《十四》微信小程序中的常用 API 之登录、获取手机号、获取用户的昵称和头像、转发给朋友、转发到朋友圈、订阅消息、客服消息、支付、提现

花铛

已于 2024-02-05 11:39:46 修改

阅读量5k

点赞数 7

分类专栏：微信小程序文章标签：微信小程序

于 2021-05-13 16:33:37 首次发布

本文链接：https://blog.csdn.net/wsln_123456/article/details/116753771

版权

微信小程序专栏收录该内容

35 篇文章 8 订阅

订阅专栏

微信小程序提供了 wx 这个全局变量，通过这个全局变量可以调用微信小程序提供的 API。

wx.login()：获取登录凭证 code。通过登录凭证 code 进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。

wx.login() 是静默登录的，不必授权，用户是无感知的。

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID 是相同的。

在这里插入图片描述

// 1. 调用 wx.login() 方法获取登录登录凭证 code，code 有效期五分钟。
wx.login({
   success: (res)=>{
      if(res.code){
       	wx.request({
       	    // 2. 调用后端接口，传入 code
	        url: 'https://example.com/onLogin',
	        data: {
	          code: res.code, 
	        },
	        // 3. 后端调用 auth.code2Session 接口，换取用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识 UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key 等，将 OpenID 和 UnionID 返回给前端
	        success (res) {
			   console.log(res.data)
			},
     	 })
      }
  }
})

请添加图片描述

获取手机号：

需要将 button 组件 open-type 的值设置为 getPhoneNumber；当用户点击并同意之后，就可以通过 bindgetphonenumber 事件回调获取到动态令牌 code；然后把 code 传给后端，后端去微信后台换取用户手机号后返回给前端即可。

每个 code 有效期为5分钟，且只能消费一次。
getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。

//authorize.wxml
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
	
//authorize.js
// 点击授权面板的允许/拒绝后触发 bindgetphonenumber
getPhoneNumber(e) {
	//存在 e.detail.code，表明授权面板用户点击了允许；否则表明用户点击了拒绝
	if (e.detail.code) {
		//调用后端接口，传入 code，获取用户手机号
	    ...
	}
}

请添加图片描述

获取用户的昵称和头像：

目前，使用 wx.getUserInfo() 、<button open-type="getUserInfo"> 和 wx.getUserProfile() 用户头像将统一返回默认灰色头像，昵称将统一返回微信用户。只能使用小程序提供的头像昵称填写能力来获取。

获取用户昵称：

需要将 input 组件 type 的值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示微信昵称。
在这里插入图片描述

获取用户头像：

需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
在这里插入图片描述

转发给朋友：

Page.onShareAppMessage()：用来监听用户点击页面内转发按钮或右上角菜单中的发送给朋友按钮的行为。可以 return 一个对象，用于自定义转达内容；如果不明确 return 一个对象，将会使用默认值。

onShareAppMessage() {
   return {
     title: '转发的标题', // 默认值为当前小程序名称
     imageUrl: '转发的图片’, // 默认会取当前页面，从顶部开始，高度为 80% 屏幕宽度的截图作为转发图片
     path: `转发的路径`, // 当前页面 path。必须是以 / 开头的完整路径
   }
 },

页面内转发：

给 button 组件设置 open-type="share" 属性，点击就能拉起右上角的菜单，点击发送给朋友，会触发 Page.onShareAppMessage() 方法。

<-- index.wxml -->
<button open-type="share">转发</button>

// index.js
Page({
	onShareAppMessage () {}
})

在这里插入图片描述

右上角菜单"转发"：

如果页面不定义 Page.onShareAppMessage() 方法，则右上角菜单中的发送给朋友按钮会置灰不可用。

Page({
	onShareAppMessage () {}
})

在这里插入图片描述

获取更多的转发信息：

通过调用 wx.showShareMenu() 并且设置 withShareTicket 为 true 。

  onShareAppMessage() {
   wx.showShareMenu({
     withShareTicket: true
   })
 }

当用户将小程序转发到任一群聊之后，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket。通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。
```
onShow(res) {
  wx.getShareInfo({
    shareTicket: res.shareTicket,
    success(res) {
      console.log(res)
    }
  })    
},
```

转发到朋友圈：

Page.onShareTimeline()：监听右上角菜单中分享到朋友圈按钮的行为。如果页面不定义此方法，则右上角菜单中的分享到朋友圈按钮会置灰不可用。可以 return 一个对象，用于自定义转达内容；如果不明确 return 一个对象，将会使用默认值。

订阅消息：

订阅消息分为两种：

一次性订阅消息：用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可不限时间地下发一条对应的服务消息；每条消息可单独订阅或退订。
长期订阅消息：一次性订阅消息可满足小程序的大部分服务场景需求，但线下公共服务领域存在一次性订阅无法满足的场景（如航班延误，需根据航班实时动态来多次发送消息提醒）。为便于服务，提供了长期性订阅消息，用户订阅一次后，开发者可长期下发多条消息。目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。

订阅消息特点：

订阅消息推送位置：服务通知。
订阅消息下发条件：用户自主订阅。
订阅消息卡片跳转能力：点击查看详情可跳转至该小程序的页面。

订阅消息的使用步骤：

获取模板 ID：在微信公众平台手动配置获取模板 ID。
获取下发权限：使用 wx.requestSubscribeMessage()，调起客户端小程序订阅消息界面，返回用户订阅消息的操作结果。

当用户勾选了订阅面板中的“总是保持以上选择，不再询问”时，模板消息会被添加到用户的小程序设置页，通过 wx.getSetting() 接口可获取用户对相关模板消息的订阅状态。
```
wx.requestSubscribeMessage({
  tmplIds: [], // 需要订阅的消息模板的 id 的集合，一次调用最多可订阅3条消息
  success (res) { }
})
```
调用接口下发订阅消息（后端的工作）。
下发的订阅消息会显示在服务通知中。

客服消息：

用户给小程序发送消息：开发者在小程序内添加客服消息按钮组件，用户可在小程序内唤起客服会话页面，给小程序发消息。

小程序给用户下发消息：有两个种方式，一是在微信公众平台启用消息推送，进行相关配置，然后后端开发者调用客服消息接口发送客服消息；二是直接使用微信公众平台网页版客服工具或者移动端小程序客服小助手进行客服消息回复。

通过调用客服消息接口发送客服消息：

开发者在小程序内添加客服消息按钮组件，用户可在小程序内唤起客服会话页面，给小程序发消息。
```
<button open-type="contact" >客服</button> 
```
登录微信公众平台–>开发–>开发管理–>开发设置–>消息推送，启用消息推送，进行消息服务器配置；开发者提交消息服务器配置后，微信服务器将发送 GET 请求到填写的服务器地址 URL 上；后端开发者对请求进行校验，成功之后则消息推送接入生效。（这一步是后端的工作）
当用户在客服会话发送消息、或由某些特定的用户操作引发事件推送时，微信服务器会将消息或事件的数据包 POST 到开发者填写的 URL。开发者收到请求后可以使用发送客服消息的接口进行异步回复。（这一步是后端的工作）
已使用过的小程序客服消息会聚合显示在微信会话“小程序客服消息”内，用户可以在小程序外查看历史客服消息，并给小程序客服发消息。

通过网页版客服工具与移动端小程序客服工具发送客服消息。

若小程序没有启用消息推送，则用户发送的消息将会被转发至网页版和移动端小程序客服工具，客服人员可在网页版与移动端小程序客服工具中接入并回复用户。

第一步和第四步与上面一种方式相同。
使用网页版与移动端小程序客服工具前，需在微信公众平台–>功能–>客服中完成客服人员的绑定。目前小程序支持绑定不多于100个客服人员。
已被绑定的小程序客服人员可微信搜索“客服小助手”或扫码登录客服小助手小程序，并选择对应的小程序帐号，登录后即可看到与小程序对话的用户，可选择接入对话；或者扫码登录微信公众平台网页版客服工具（https://mpkf.weixin.qq.com/cgi-bin/kfloginpage），并选择对应的小程序帐号，登录后即可看到与小程序对话的用户，可选择接入对话。

支付：

微信支付的实现流程：

前端请求后端接口，提交业务相关的订单参数。
后端根据订单参数，进行相关的业务逻辑。
后端调用微信支付 SDK，生成预订单。
后端返回给前端支付 API 所需要的参数。
前端调用支付 API，唤起微信支付弹框。
用户进行支付/不支付。
后端监听支付成功/失败，进行相关的业务逻辑。

调用后端接口获取微信支付 API 所需的参数。
调用微信支付 API wx.requestPayment() 发起微信支付。

调用前需在小程序微信公众平台 -功能-微信支付入口申请接入微信支付。

// 1. 调用后端接口获取微信支付 API 所需的参数
const {timeStamp, nonceStr, prepayId, signType, paySign} = data
// 2. 调用微信支付 API 发起微信支付
wx.requestPayment({
	timeStamp: timeStamp, // 时间戳
    nonceStr: nonceStr, // 随机字符串
    package:  `prepay_id=${prepayId}`, // 统一下单接口返回的 prepay_id 参数值，需拼接固定格式
    signType: signType, // 签名算法
    paySign: paySign, // 签名
    success (res) { },
 	fail (res) { },
})

提现：

微信小程序没有提现相关的 API，一般用企业付款到零钱功能来实现。

企业付款到零钱功能是微信支付的功能。需要后端去调用微信支付提供的接口，小程序只需要去调用后端的接口即可。

花铛

关注

7
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
《十四》微信小程序中的常用 API 之登录、获取手机号、获取用户的昵称和头像、转发给朋友、转发到朋友圈、订阅消息、客服消息、支付、提现

微信小程序提供了 wx 这个全局变量，通过这个全局变量可以调用微信小程序提供的 API。
复制链接

扫一扫