一、网络请求

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) // 经度
      }
    })
  }
})