微信小程序问题归纳（三）

程序如何实现页面间的跳转

1. wx.navigateTo(OBJECT)
   保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。注:目前页面路径对多只能十层。
2. wx.redirectTo(OBJECT)
   关闭当前页面，跳转到应用内的某个页面。
3. wx.reLaunch(OBJECT)
   关闭所有页面，打开到应用内的某个页面。
4. wx.switchTab(OBJECT)
   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
5. wx.navigateBack(OBJECT)
   关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

如何改变小程序的标题？

wx.setNavigationBarTitle({
title: ‘附近门店’
})

小程序如何通过路由传递参数？

(1)在列表页(xxList.wxml)绑定事件

 <view class="product-img" bindtap='goproductDetail' id="{{item.id}}">
          <image src="{{item.imgSrc}}"/>
  </view>

(2)在列表页(xxList.js)通过事件对象获取参数

goproductDetail:function(event){
    let that = this;
    let chosenPrdId = event.currentTarget.id
    wx.navigateTo({
      url: `../productDetail/productDetail?productId=${chosenPrdId}`,
      success: function () {

        wx.setNavigationBarTitle({
          title: '产品详情'
        })
      },
      fail: function () {
        console.log('进入了失败的回调');
      }
    })
  }

(3)在详情页(xxDetail.js)获取路由参数

 onLoad: function (option) {
    console.log(option.chosenPrdId); //选择的id
    // TODO 访问后台接口查询具体信息
  }

this.setData和直接赋值的区别

这两者都可以造成data里数据的改变，但是this.setData赋值才会造成wxml里面数据的改变，也就是同步更新渲染界面，而直接赋值只会让data里数据发生变化，但是界面并不会改变。

授权获取用户手机号思路

实现思路：
1、通过wx.login获取code,把code传给后台，后台再去访问微信接口获取到用户的openID和sessionKey，但是后台不能直接把openID或者sessionKey发给前台（不安全），而是需要用一个单独的字段与openID和sessionKey做关联后传给前台，作为前台登录成功的标识，就相当于cookie在本地浏览器存储的session一样，前台接收到返回的标识存储在本地，也可以自己设置存储的变量名（假如是userId）
2、前端通过button按钮触发 getPhoneNumber事件，用户允许授权后（e.detail.errMsg == ‘getPhoneNumber:ok’）获取encryptedData，iv
3、把【encryptedData】 、【iv】 、【userId】 通过request请求传给后台，后台接收到解密获取用户手机号，返回给前台，前台再存储在本地，以便做其他逻辑判断或者后期使用

小程序如何输出遍历对象

<view wx:for="{{ obj }}" wx:for-item="item"  wx:for-index="key">
    <view class='aside'>{{ key }}</view>
</view>

微信小程序登录授权思路

1.通过调用wx.login() API，成功后会拿到用户的code信息
2.将code信息通过接口，传给自己的后台（不是微信的后台），在服务端发起对微信后台的请求，成功后拿到用户登录态信息，包括openid、session_key等。也就是通常所说的拿code换openid，这个openid是用户的唯一标识。
3.自己的后台，拿到openid、session_key等信息后，通过第三方加密，生成自己的session信息，返回给前端。
4.前端拿到第三方加密后的session后，通过wx.setStorage()保存在本地，以后的请求都需要携带这个经过第三方加密的session信息。
5.之后如果需要用户重新登录，先去检查本地的session信息，如果存在，再用wx.checkSession()检查是否在微信的服务器端过期。如果本地不存在或者已过期，则重新从步骤1开始走登录流程。

onLaunch:function () {
    var than = this
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        var code = res.code
        // console.log(code)
        wx.getUserInfo({
          success: res => {
            console.log(res),
              // this.globalData.userInfo = res.userInfo 
              //全局储存
            wx.request({
              url: 'https://exam.qhynice.top/index.php/Api/Login/getsessionkey',
              method: "POST",
              data: {
                code: code
              },
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              success: ress => {
                console.log(ress.data)
                var openid = ress.data.openid
                wx.setStorageSync('openid', ress.data.openid)
                wx.setStorageSync('session_key', ress.data.session_key)
                wx.request({
                  url: 'https://exam.qhynice.top/index.php/Api/Login/authlogin',
                  method: "POST",
                  data: {
                    openid: wx.getStorageSync('openid'),
                    NickName: res.userInfo.nickName,
                    HeadUrl: res.userInfo.avatarUrl,
                    gender: res.userInfo.gender
                  },
                  header: {
                    'content-type': 'application/x-www-form-urlencoded'
                  },
                  success(res) {
                    console.log(res)
                    var id = res.data.arr.ID
                    wx.setStorageSync('id', id)
                  },
                })
              }
            })
              }
            })
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
          this.globalData.Custom = capsule;
          this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
          this.globalData.CustomBar = e.statusBarHeight + 50;
        }
      }
    })
  }