ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-09-20 11:02:30  阅读:198  来源: 互联网

标签:微信 用户 获取 token res 交互 wx


用户授权登录:

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

  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",后点击就直接触发分享,无需绑定事件

标签:微信,用户,获取,token,res,交互,wx
来源: https://blog.csdn.net/yueye_wu/article/details/120387601

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有