# 一、网络请求

# 1、请求限制:

  出于安全性考虑,小程序官方对数据接口请求做了以下限制:

限制 说明
只能请求 HTTPS 类型的接口 HTTP 请求不安全
域名不能使用 IP 地址 或者 localhost(但可以配置端口) 域名必须经过 ICP 备案

# 2、合法性校验

  在开发阶段,为了我们方便,可以在开发环境开启不校验请求域名、HTTPS 证书等选项。

① 开发环境:

在微信开发者工具手动设置:详情按钮 ——> 本地设置 ——> 勾选不校验合法域名等选项

② 上线环境:

在微信公众平台的小程序后台手动设置:开发管理 ——> 开发设置 ——> 服务器域名

# 3、网络请求

  对于网络请求 (opens new window),我们可以在微信官方文档的 API 部分找到 wx.request(config)方法。

使用示例
Page({
  data: {
    articleList: []
  },

  onLoad: function (options) {
    // 在onLoad中发起网络请求
    this.getArtclList()
  },

  getArtclList() {
    wx.request({
      url: 'http://www.note-book.cn/api/post',
      method: 'POST',
      data: {
        name: '中国',
        numb: '22'
      },
      // 注意使用箭头函数 👀
      success: (res) => {
        this.setData({
          articleList: res.data
        })
      }
    })
  }
})

  下面是一些常用的 config 选项:

常规选项 回调选项
method success 回调
url fail 回调
data(支持 string/ojbect/ArrayBuffer 类型) complete 回调
header(值为对象)

# 4、Storage 存储

  小程序中的 数据缓存 (opens new window)和原生 BOM 中的 Storage 接口不同的是:

区别

  小程序只支持原生类型、Date、及能够通过 JSON.stringify 序列化的对象

  也就是说小程序可以帮助我们自动序列化。(Storage 接口是需要手动序列化为字符串类型的)

wx.setStoregeSync('token', 'xradarg3fa53za2f')
wx.getStoregeSync('token')
wx.removeStoregeSync('token')
wx.clearStoregeSync()
App({
  onLaunch() {
    // 1、微信的登录逻辑
    wx.login({
      // timeout:
    })

    // 2、微信的storage
    // 同步存储
    wx.setStoregeSync('token', 'xradarg3fa53za2f')
    wx.setSotregeSync('userInfo', {
      nickName: 'lencamo',
      level: 99
    })

    // 3、发送其他网络请求
    wx.request({ url: 'url' })
  }
})

# 二、交互 API

  与网络请求,紧密相邻的当然少量弹窗等需求

页面交互 (opens new window)

# 1、静态弹窗

Page({
  btnShowFn() {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  }
})
Page({
  btnShowFn() {
    wx.showLoading({
      title: '加载中'
    })

    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
  },

  // 和下面的效果类似(只不过上面是手动关闭弹窗)
  btnShowFn() {
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 2000
    })
  }
})

# 2、交互弹窗

提示

  实在不满意的话,就使用 vant 组件库吧

Page({
  btnShowFn() {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})
Page({
  btnShowFn() {
    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success(res) {
        console.log(res.tapIndex)
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  }
})

# 3、转发分享

指南 --> 开放能力 --> 转发 (opens new window)

onShareAppMessage (opens new window)

  常见的我们可以通过下面两种方式进行分享小程序:

  • 右上角菜单的“转发”按钮
  • 自定义转发按钮
<button open-type="share">转发</button>

  要实现对转发页面的自定义,可以使用 Page({})的onShareAppMessage函数。

Page({
  onShareAppMessage() {
    return {
      title: 'xxxx',
      path: '/pages/xxxxx',
      imageUrl: '/assets/xxxx'
    }
  }
})

# 4、用户设备

API --> 基础 --> 系统 (opens new window)

  获取用户设备的基本信息

Page({
  btnShowFn() {
    wx.getSystemInfo({
      success(res) {
        console.log(res.screenHeight) // 屏幕高度
        console.log(res.windowHeight) // 窗口高度
      }
    })
  }
})

# 5、用户位置

API --> 位置 (opens new window)

  获取用户位置信息前,要先授权:

permission (opens new window)

// app.json
{
  "permission": {
    "scope.userLocation": {
      "desc": "需要获取您的位置信息"
    }
  }
}

  然后就可以调用即可获取用户位置信息了:

Page({
  btnShowFn() {
    wx.getLocation({
      success(res) {
        console.log(res.latitude) // 纬度
        console.log(res.longitude) // 经度
      }
    })
  }
})
更新于 : 7/8/2024, 10:21:14 AM