微信小程序提供了 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. 调用后端接口,传入 codeurl: '/onLogin',data: {code: res.code, },// 3. 后端调用 auth.code2Session 接口,换取用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识 UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key 等,将 OpenID 和 UnionID 返回给前端success (res) {console.log(res.data)},})}}})
获取用户信息(只支持获取用户昵称和头像):
wx.getUserProfile()
:用于获取用户信息。页面产生点击事件后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。
//authorize.wxml<button bindtap="getUserProfile">获取用户信息</button>//authorize.jsgetUserProfile() {wx.getUserProfile({desc: '用于完善用户信息', // 声明获取用户个人信息后的用途,会展示在弹窗中success: (res) => {console.log(res.userInfo) // userInfo 中有效信息现在只支持获取到用户昵称和用户头像}})
发送给朋友:
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.jsPage({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./cgi-bin/kfloginpage),并选择对应的小程序帐号,登录后即可看到与小程序对话的用户,可选择接入对话。
支付:
调用后端接口获取微信支付 API 所需的参数。调用微信支付 API微信支付的实现流程:
前端请求后端接口,提交业务相关的订单参数。后端根据订单参数,进行相关的业务逻辑。后端调用微信支付 SDK,生成预订单。后端返回给前端支付 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,一般用企业付款到零钱功能来实现。
企业付款到零钱功能是微信支付的功能。需要后端去调用微信支付提供的接口,小程序只需要去调用后端的接口即可。
跳转小程序:
wx.navigateToMiniProgram()
打开另一个小程序:
wx.navigateToMiniProgram()
:打开另一个小程序。
需要用户点击才能调用此接口。
在跳转至其他小程序前,会弹窗询问是否跳转,用户确认后才可以跳转其他小程序。
wx.openEmbeddedMiniProgram()
打开半屏小程序:
wx.openEmbeddedMiniProgram()
:打开半屏小程序。
需要在小程序管理后台「设置」-「第三方设置」-「半屏小程序管理」
板块发起申请,最多可以申请10个小程序。被半屏跳转的小程序需要通过来源小程序的调用申请。通过调用wx.openEmbeddedMiniProgram()
即可半屏跳转小程序。
wx.navigateBackMiniProgram()
返回到上一个小程序:
wx.navigateBackMiniProgram()
:返回到上一个小程序。
只有在当前小程序是被其他小程序打开时可以调用成功。
打开 APP:
需要用户主动点击设置了open-type='launchApp'
属性的 button 组件才能跳回 APP。也就是说,不能打开 APP,而只有从 APP 或者在一些特定的场景值下打开小程序,才能跳回 APP。
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
《十四》微信小程序中的常用 API 之登录 获取用户信息 发送给朋友 分享到朋友圈 订阅消息 支付 提现 跳转小程序 打开 APP