分类 默认 下的文章

作者:Duzling
链接:https://www.jianshu.com/p/205a244b4c1f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

登录及获取微信用户信息

调用wx.login()获取登录凭证code,再调用后端接口换取用户登录态信息(openid, session_key)

    此时获得的登录状态具有时效性,可以调用wx.checkSession()检查是否过期,若过期,则需要重新调用wx.login()执行登录流程

使用wx.getSetting()获取用户授权列表
    若已授权:调用wx.getUserInfo()获取用户信息
    若未授权:弹出模态框展示一个 微信授权登录 按钮提示用户点击登录
        同意授权:用户授权后可通过绑定的方法获取用户信息
        拒绝授权:则无法获取用户信息,若必须微信授权登录才可用,可以以恰当的方式给出说明,如使用wx.openSetting()引导用户手动打开授权开关

将获取到的用户信息和第1部中得到的code使用服务端提供的接口更新用户信息,如1中的示例

授权绑定微信手机号

显示授权绑定微信手机号的按钮(必须用户手动点击)
用户同意授权后,调用成功回调处理后续操作

相应接口代码示例

用户授权列表:wx.getSetting()

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true, // true已授权 false未授权
    //   "scope.userLocation": true
    //    ...
    // }
  }
})

检查登录态是否过期

wx.checkSession({
  success () {
    //session_key 未过期,并且在本生命周期一直有效
  },
  fail () {
    // session_key 已经失效,需要重新执行登录流程
    wx.login() //重新登录
  }
})

调用wx.login()进行登录并获取cookies

wx.login({
    success: function(res) {
        // 得到了code
        if (res.code) {
            wx.request({
                url: api.user.authLogin(res.code) // 后端提供的验证登录接口
                success: function(response) {
                 // 验证成功,保存cookies, 封装在全局统一的请求方法中,如get, post
                    wx.setStorage({
                     key: 'cookies',
                     data: response.data.res.cookies
                    })
                 
                    wx.getUserInfo({
                     withCredentials: true,
                        success: function(res) {
                            // 取得用户微信信息,调用后端接口更新用户信息
                            const userInfo = res.userInfo
                            const encryptedData = res.encryptedData
                         const iv = res.iv
                            
                            const params = {
                              nick_name: userInfo.nickName,
                              gender: userInfo.gender,
                              province: userInfo.province,
                              city: userInfo.city,
                              country: userInfo.country,
                              avatar_url: userInfo.avatarUrl,
                              encrypted_data: encryptedData,
                              encrypt_iv: iv
                            }

                            server.get(api.user.updateBaseInfo(), params, () => {
                             // 成功保存用户信息
                            })
                        }
                    })
             }
            })
        }
    }
})

微信授权登录

<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
methods = {
    onGetUserInfo: this.handleGetUserInfo
}

// 同意授权
handleGetUserInfo(e) {
    wx.getUserInfo()
}

授权获取微信绑定的手机号

<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
    绑定微信手机号
</button>
methods = {
    onGetPhoneNumber: this.handleGetPhoneNumber
}

/**
* 同意授权获取手机号
* @desc 获取到 encryptedData,iv信息,需要服务端解密才能获取到真正的手机号
*/
handleGetPhoneNumber(e) {
    if (e.detail.iv) {
        server.post(api.user.bindWXPhoneNumber(), {
            encrypted_data: e.detail.encryptedData,
            encrypt_iv: e.detail.iv
        }, data => {
            wx.showToast({ title: '绑定成功' })
            // do something
        }, error => {
            wx.showModal({
                title: '绑定失败',
                content: '[服务端返回的错误信息]',
                showCancel: false,
                success: res => {
                    if (res.confirm) { // 用户确认后
                        // do something
                    }
                }
            })
        })
    } else { // 用户拒绝授权
        // do something
    }
}

 #多维数组创建
let app_info =[
    {appid:info[appid],path:info[path],extend_data:info[extend_data]}
  ]

 #一维数组创建

let app_info ={appid:info[appid],path:info[path],extend_data:info[extend_data]}
  

    swipclick:function(event){
  console.log(event)
  let item_url =event.currentTarget.dataset.url // 页面跳转地址
  console.log(item_url)
  let tolink  = '../../pages/h5view?url='+encodeURIComponent(item_url);
  if(item_url){
    //先提示后跳转
     wx.showModal({
      title: '跳转提示',
      content: '您即将离开XXX,请注意您的账号和财产安全!',
      confirmColor: "#1aad19",
      success: function (sm) {
          if(sm.confirm){
              wx.navigateTo({
              url: tolink,
              })
          }
      }
   })
  }
  console.log('嘿嘿')
},

一、先解决焦点图的点击事件
wxml部分

<swiper indicator-dots='true' 
    indicator-active-color='#ff5777'
    autoplay='true'
    circular='true'
    interval='5000'
    class='swiper'>

<block wx:for="{{bannerList}}" wx:key="index">

<swiper-item>
  <image class="swiper-image" src="{{item.img_url}}" data-id="{{item.img_id}}" data-url="{{item.img_path}}" bindtap="swipclick" mode='scaleToFill'/>
</swiper-item>

</block>
</swiper>

js部分

    swipclick:function(event){
  console.log(event)
  let item_url =event.currentTarget.dataset.url // 页面跳转地址
  let tolink  = '../../pages/h5view?url='+encodeURIComponent(item_url);
  wx.navigateTo({
    url: tolink,
  })
  console.log('嘿嘿')
},

二、制作一个空白page承载URL的加载内容
我这里在page/h5view创建了一个page
h5view.js在

/**

  • 生命周期函数--监听页面加载
    */

onLoad: function (options) {

  let now_url =decodeURIComponent(options.url);
  //获取url内容
  url:now_url ,
  this.setData({
      url: now_url,
  })

},

这里接收从navigateTo过来的参数

然后渲染到wxml里

<view class="container">

<view class="pageH5">
<web-view src="{{url}}"></web-view>
</view>
</view>

frontend/web/index.php

<?php

defined('YII_DEBUG') or define('YII_DEBUG', true);  //false 换成true