一. 网络请求api和封装

---

1. 网络请求 – API参数

• 微信提供了专属的 API 接口，用于网络请求：wx.request(Object object)

• 比较关键的几个属性解析：

  • url：请求服务器接口地址
  • data：请求参数
  • method：请求的方式
  • success：成功时的回调
  • fail：失败时的回调
  

2. 网络请求 – API使用

• 直接使用 wx.request(Object object) 发送请求：

  

3. 网络请求 – API封装

4. 网络请求域名配置

• 每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信
  • 小程序登录后台 – 开发管理 – 开发设置 – 服务器域名
• 服务器域名请在「小程序后台 - 开发 - 开发设置 - 服务器域名」中进行配置，配置时需要注意：
  • 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议
  • 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost
  • 可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败
  • 如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败
  • 域名必须经过 ICP 备案
  • 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关 API 也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API
  • 不支持配置父域名，使用子域名

二. 展示弹窗和页面分享

---

1. 展示弹窗效果

• 小程序中展示弹窗有四种方式：showToast、showModal、showLoading、showActionSheet

  

2. 分享功能

• 分享是小程序扩散的一种重要方式，小程序中有两种分享方式：

  • 方式一：点击右上角的菜单按钮，之后点击转发
  • 方式二：点击某一个按钮，直接转发

• 当我们转发给好友一个小程序时，通常小程序中会显示一些信息：

  • 如何决定这些信息的展示呢？通过 onShareAppMessage
  • 监听用户点击页面内转发按钮（button 组件 open-type="share"）或 右上角菜单“转发”按钮的行为，并自定义转发内容
  • 此事件处理函数需要 return 一个 Object，用于自定义转发内容
  

三. 设备信息和位置信息

---

1. 获取设备信息

• 在开发中，我们需要经常获取当前设备的信息，用于手机信息或者进行一些适配工作

  • 小程序提供了相关 API：wx.getSystemInfo(Object object)
  

2. 获取位置信息

• 开发中我们需要经常获取用户的位置信息，以方便给用户提供相关的服务：

  • 我们可以通过 API 获取：wx.getLocation(Object object)

    onGetLocationInfo() {
      wx.getLocation({
        success: res => {}
      })
    }

• 对于用户的关键信息，需要获取用户的授权后才能获得：

  • https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission

    "permission": {
      "scope.userLocation": {
        "desc": "获取你的位置信息"
      }
    }

四. 小程序 Storage 存储

---

• 在开发中，某些常见我们需要将一部分数据存储在本地：比如 token、用户信息等

  • 小程序提供了专门的 Storage 用于进行本地存储

• 同步存取数据的方法：

  • wx.setStorageSync(string key, any data)
  • wx.getStorageSync(string key)
  • wx.removeStorageSync(string key)
  • wx.clearStorageSync()

• 异步存储数据的方法：

  • 不会阻塞后续代码执行
  • wx.setStorage(Object object)
  • wx.getStorage(Object object)
  • wx.removeStorage(Object object)
  • wx.clearStorage(Object object)
  

五. 页面跳转和数据传递

---

1. 界面跳转的方式

• 界面的跳转有两种方式：通过 navigator 组件 和 通过 wx 的 API 跳转

• 这里我们先以 wx 的 API 作为讲解：

  

2. 页面跳转 - navigateTo

• wx.navigateTo(Object object)

  • 保留当前页面，跳转到应用内的某个页面
  • 但是不能跳到 tabbar 页面
  

3. 页面返回 - navigateBack

• wx.navigateBack(Object object)

  • 关闭当前页面，返回上一页面或多级页面
  

4. 页面跳转 - 数据传递

• 如何在界面跳转过程中我们需要相互传递一些数据，应该如何完成呢？

  • 首页 -> 详情页：使用 URL 中的 query 字段
  • 详情页 -> 首页：在详情页内部拿到首页的页面对象，直接修改数据
  

• 早期数据的传递方式只能通过上述的方式来进行，在小程序基础库 2.7.3 开始支持 events 参数，也可以用于数据的传递

  

5. 界面跳转的方式

• navigator 组件主要就是用于界面的跳转的，也可以跳转到其他小程序中：

  

六. 小程序登录流程演练

---

1. 小程序登录解析

• 为什么需要用户登录？

  • 增加用户的粘性和产品的停留时间

• 如何识别同一个小程序用户身份？

  • 认识小程序登录流程
  • openid 和 unionid
  • 获取 code
  • 换取 authToken

• 用户身份多平台共享

  • 账号绑定
  • 手机号绑定

2. 小程序用户登录的流程