微信小程序开发常用功能

获取用户信息

调用 wx.getUserProfile 方法获取用户基本信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo

具体参数如下：

属性	类型	默认值	必填	说明
lang	string	en	否	显示用户信息的语言
desc	string		是	声明获取用户个人信息后的用途，不超过30个字符
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.getUserProfile({

desc: '用于完善用户基本资料', // 声明获取用户个人信息后的用途，不超过30个字符

success: (res) => {

console.log(res.userInfo));

}

})

获取到的返回值

{

"nickName": "秋梓", // 微信昵称

"gender": 0,

"language": "zh_CN",

"city": "",

"province": "",

"country": "",

"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132" // 头像

}

获取手机号

目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。

使用方法

需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到动态令牌code，然后把code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。

注：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。

代码示例

1	`<button open-type="getPhoneNumber"` `bindgetphonenumber="getPhoneNumber"></button>`

Page({

getPhoneNumber (e) {

console.log(e.detail.code)

}

})

返回参数说明

参数	类型	说明	最低版本
code	String	动态令牌。可通过动态令牌换取用户手机号。使用方法详情 phonenumber.getPhoneNumber 接口

然后通过 code 换取用户手机号。每个code只能使用一次，code的有效期为5min

调用如下接口

1	`POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN`

请求参数

属性	类型	默认值	必填	说明
access_token / cloudbase_access_token	string		是	接口调用凭证
code	string		是	手机号获取凭证

返回的 JSON 数据包

属性	类型	说明
errcode	number	错误码
errmsg	string	错误提示信息
phone_info	Object	用户手机号信息

返回结果示例

{

"errcode":0,

"errmsg":"ok",

"phone_info": {

"phoneNumber":"xxxxxx",

"purePhoneNumber": "xxxxxx",

"countryCode": 86,

"watermark": {

"timestamp": 1637744274,

"appid": "xxxx"

}

实现微信支付

唤起微信支付的核心方法调用 wx.requestPayment 方法，该方法具体参数如下

属性	类型	默认值	必填	说明
timeStamp	string		是	时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
nonceStr	string		是	随机字符串，长度为32个字符以下
package	string		是	统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
signType	string	`MD5` 仅在 v2 版本接口适用	否	签名算法，应与后台下单时的值一致
		`HMAC-SHA256` 仅在 v2 版本接口适用
		`RSA` 仅在 v3 版本接口适用
paySign	string		是	签名，具体见微信支付文档
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

/**

* 微信支付方法

* @param {string} oderId 订单id

* @param {string} total 订单金额

* @param {stromg} openId 登陆人openid

*/

function weixinPayFun(data) {

wx.showLoading({

mask: true

})

const http = new Http()

return new Promise((resolve, reject) => {

// 请求支付接口

http.post(`${env.fayongApi}/app/shopping/order/pay`, data).then(res => {

// 获取支付签名信息

let payInfo = res.data

// 调起微信支付

wx.requestPayment({

"timeStamp": payInfo.timeStamp + '',

"nonceStr": payInfo.nonceStr,

"package": payInfo.package,

"signType": "RSA",

"paySign": payInfo.paySign,

"success": function (res) {

console.log(res, 'success');

// 支付成功

resolve(res)

},

"fail": function (err) {

// 支付失败

reject(err)

},

"complete": function (res) {

wx.hideLoading()

}

})

}

添加分享功能

在需要分享的分享的页面中添加 onShareAppMessage 事件函数，此事件处理函数需要 return 一个 Object，用于自定义转发内容，只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

onShareAppMessage 方法具体参数如下

字段	说明	默认值	最低版本
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。	使用默认截图	1.5.0
promise	如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数		2.12.0

静态分享

示例代码

Page({

// 分享

onShareAppMessage() {

return {

title: "乐福健康", // 分享标题

path: "pages/newhome/index", // 分享地址路径

}

})

添加完成后点击右上角胶囊按钮会分享图标会亮起

带参分享

上面的分享是不带参数的，我们可以直接在路径中动态添加参数，分享后用户点击时会触发 onLoad 函数获取路径中的参数值

// 分享

onShareAppMessage() {

const that = this;

return {

title: that.data.goodInfo.goodName, // 动态获取商品名称

path: "pages/component/orderparticulars/orderparticulars?id=" + that.data.productId, // 动态传递当前商品id

imageUrl: that.data.background[0] // 获取商品封面图

}

动态获取分享图片和标题后我们每次分享时会出现不同内容

全局分享

除此之外我们也可以添加全局分享功能

首先要在每个页面中添加 onShareAppMessage 函数，函数体内容可以为空，如果函数体内容为空，则会使用我们在 app.js 中定义的默认分享方法，如果该函数返回了一个 object 则使用我们自定义的分享功能

在需要被分享的页面添加如下代码

Page({

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

// 函数体内容为空即可

}

})

接着在 app.js 中添加重写分享方法

//重写分享方法

overShare: function () {

//间接实现全局设置分享内容

wx.onAppRoute(function () {

//获取加载的页面

let pages = getCurrentPages(),

//获取当前页面的对象

view = pages[pages.length - 1],

data;

if (view) {

data = view.data;

// 判断是否需要重写分享方法

if (!data.isOverShare) {

data.isOverShare = true;

view.onShareAppMessage = function () {

//重写分享配置

return {

title: '分享标题',

path: "/pages/index/index" //分享页面地址

};

}

})

},

然后在 onLaunch 函数中调用该方法

onLaunch() {

this.overShare()

}

分享按钮

在开发中我们也会碰到点击分享按钮实现分享功能，实现代码如下

首先在 html 中添加 button 按钮。其中 open-typ 要等于 share,表示点击这个按钮注定触发分享函数

<van-button type="primary" icon="share" round class="search" open-type="share" size="small">

分享

</van-button>

之后要确保我们在 js 中添加了 onShareAppMessage 函数

千语创想移动端低代码开发平台-千语创想，是用Web语言去开发iOS和Android应用，多端开发框架，一次编码同时开发安卓、iOS、H5和小程序，这样将开发难度大幅降低，开发周期缩短将近一倍。此外，千语创想平台上有上千个各式各样的功能模块，一键调用方便去开发各类App和小程序。

立即免费在线制作一个APP，新手注册即送开发大礼包

转载请注明来自：https://www.qianyuthink.com/news/7887.html

上一页：javascript方法和函数
下一页：Android模块化方案