微信小程序常用的用户交互功能

本文主要是介绍微信小程序常用的用户交互功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

用户授权登录:

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

1. 首先我们调用 wx.login()获取 临时登录凭证code ，并回传到开发者服务器(公司的服务器)。

2. 我们使用wx.request()将code发送给开发者服务器。

3. 然后服务器端再请求微信开放接口,将我们生成的code及appid,appsecret等发送给微信接口服务校验用户信息,如果校验成功微信开发接口会将用户的oppenid,session_key等返回给我们服务器,这时服务器会自定义生成一个token(自定义登录态)与我们的openid和ession_key关联,然后又将token返回给小程序客户端

4. 当我们微信小程序客户端请求到了token,我们将token存储到本地storage中

5. 然后每次请求数据时都会从本地读取存储的token,然后发送请求获取数据

6. 然后服务器端会校验我们发送的token是否正确或是否未过期,如果正确,则返回业务数据给小程序端

示例代码:

  login(){
    // 调用wx.login()获取code
    wx.login({
      success:(res)=>{
        let code=res.code
        wx.request({
          // 此处url是你们公司的服务器中的登录域名接口，我这里用了别人的一个测试接口
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin',
          method:"POST",
          data:{
            code:code,
          },
          success:res=>{
            console.log(res);
            // 获取token
            let token=res
            console.log(token);
            // 将token存储本地
            wx.setStorage({
              key:"token",
              data:token
            })
          }
        })
      }
    })
  },

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

获取用户信息：

示例代码:

wx.getUserProfile({
      desc: 'desc',//声明获取用户信息的用途 必传项
      success:(res)=>{//获取成功时回调
        console.log(res);
      }
    })

获取到的所需用户基本头像，昵称信息在res.userInfo中

微信小程序支付功能:

1. 调用后台接口生成订单.在调起支付前必须先生成订单

2. 生成订单后后台返回小程序支付所需要的参数

3. wx.requestPayment(参数) 调起微信支付

示例代码:

pay(){
    // 1.生成订单
    wx.request({
      url: '请求生成订单的接口地址',
      success:res=>{
        console.log(res.data);
        // 一般生成订单接口会给我们返回以下参数：
        // perpay_id（统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***）、nonceStr（随机字符串，长度为32个字符以下）、timeStamp（订单生成的时间戳）、paySign（签名，具体见微信支付文档）、
        // 发起支付请求
        wx.requestPayment({
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          paySign: res.data.paySign,
          timeStamp: res.data.timeStamp,
          success:(res)=>{
            // 调用成功后会自动调起微信支付
          }
        })
      }
    })
  }

其余参数详见:wx.requestPayment(Object object) | 微信开放文档

微信小程序授权获取用户手机号:

详见:button | 微信开放文档和获取手机号 | 微信开放文档

获取微信用户绑定的手机号，需先调用wx.login接口。

用户授权获取手机号 需要搭配button组建的 open-type=""属性使用

若用户点击允许获取手机号择返回 encryptedData和iv属性 然后这接两个参数发送到服务端进行解密 服务端解密成功后获取手机号 返回客户端

<button type="primary"  open-type="getPhoneNumber" bindtap="getPhoneNumber">一键获取手机号</button>

 getPhoneNumber(e){
    console.log(e);
    // iv 加密算法的初始向量
    let iv=e.detail.iv
    // encryptedData 包括敏感数据在内的完整用户信息的加密数据，详细见加密数据解密算法
    let encryptedData=e.detail.encryptedData
    wx.request({
      url: 'url',
      // 后端接口要求传什么数据就传什么
      data:{
        encryptedData:encryptedData,
        iv:iv,
      },
      success:res=>{

      }
    })
  },

分享功能:

方法1: wx.showShareMenu 显示当前页面的转发按钮(点击右上角...弹出的内容中转发按钮 默认禁用)

• "shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮
• 显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮

//在页面加载生命周期就开启该功能
onLoad:function(){
    wx.showShareMenu({
      //
      menus: ['shareAppMessage', 'shareTimeline'],
      success:res=>{
        
      }
    })
  },

方法2: 通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage 事件

<button type="primary" open-type="share">分享</button>

button添加了属性 open-type="share"，后点击就直接触发分享,无需绑定事件

这篇关于微信小程序常用的用户交互功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！