微信小程序常用功能总结（持续更新中~）

分享我在商城类微信小程序项目中用到的功能~（uniapp）

1. 分享小程序某个页面到微信好友或群聊

onShareAppMessage() {let imagePath = 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/20221016.png'const promise = new Promise(resolve => {setTimeout(() => {resolve({title: '所有门店通用！',imageUrl: imagePath,path: '/pages/home/home?invitee2=' + this.cellphone,})}, 2000)})return {title: '所有门店通用！',path: /pages/home/home?invitee2=' + this.cellphone,promise}
}

imageUrl：分享微信好友展示的图片，图片尺寸比例为5:4

title：为转发的文字宣传语

path：resolve中的path路径为转发页面的路径；path路径为微信好友点开分享的链接跳转到小程序页面的路径；resolve中的path路径后面可以追加传递的参数，可以在跳转页面中的onLoad生命周期函数中获取传递的参数。（ps: 可以保持return中的title，path跟resolve中的title，path的值保持同步）

2. 分享小程序当前页面到微信朋友圈

onShareTimeline(){let helpPhone = '151****2185'return{title: '快来！冬衣/春秋衣/夏衣/鞋类统统9.9元任意洗',query: 'helpPhone=' + helpPhone,imageUrl: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/shareImage.png'}
}

imageUrl：分享朋友圈展示图片，图片尺寸比例为1:1

title：朋友圈的显示文字标题

query：微信其他用户点击朋友圈链接进入小程序携带的参数，可不选，并在onLoad生命周期函数中获取传递过来的参数

3. 下拉刷新和上拉加载更多

下拉刷新onPullDownRefresh()

上拉加载更多onReachBottom()，提前在pages.json中配置开启上拉刷新功能enablePullDownRefresh和触底距离onReachBottomDistance

{
"path" : "pages/order/order",
"style" :
{
"navigationBarTitleText": "订单中心",
"enablePullDownRefresh": true,
"onReachBottomDistance": 150,
"backgroundColor":"#F8F8F8",
"navigationBarBackgroundColor":"#FFFFFF"
}
}

//以下代码为订单页面，需要做下拉刷新和上拉加载更多功能//下拉刷新
onPullDownRefresh() {wx.showNavigationBarLoading()  //下拉刷新加载图标this.returnOrderList()this.getAccount()setTimeout(() => {wx.hideNavigationBarLoading()   //关闭下拉刷新加载图标wx.stopPullDownRefresh()  //停止下拉刷新}, 400)console.log('结束下拉刷新')
},//上拉加载更多
onReachBottom() {if (this.currentpage * this.pagesize >= this.total) {wx.showToast({title: '数据加载完毕！',duration: 500,icon: 'none'})this.isloading = false}if (this.isloading) returnthis.currentpage += 1this.getOrderList()
}

4. 拨打电话

调用 wx.makePhoneCall() 就可以屏幕底端弹出拨打电话弹窗

传参：phoneNumber为需要拨打的电话

connectStore(item) {let phone = item.phoneif(phone){let phone = item.phonewx.makePhoneCall({phoneNumber: phone,success() {console.log('拨打成功！')},fail() {console.log('取消！')}})}else{wx.showToast({icon: 'none',title: '暂未分配门店，请等待小哥上门取衣！',duration: 1500})}
}

5. 触发地图导航功能

wx.openLocation() 该方法可以使用微信内置地图查看位置，前提可以拿到导航位置的经纬度信息

//跳转地图导航
mapNavigate(shop) {let latitude = shop.latitude   //number类型let longitude = shop.longitude   //number类型let name = shop.store_namelet address = shop.addresswx.openLocation({latitude,longitude,name,address,scale: 16})
}

6. 消息订阅功能

wx.requestSubscribeMessage() 调起客户端小程序订阅消息界面，返回用户订阅消息的操作结果，其核心参数tmplIds为数组类型，是需要订阅的消息模板的id的集合，一次调用最多可订阅3条消息。消息模板id在[微信公众平台(mp.weixin.qq.com)-功能-订阅消息]中配置。

// 调起消息订阅界面
wx.requestSubscribeMessage({ tmplIds: ['BCgczlvieEYWoNG*****RJi2Mx3jrzpfwS31DewXz44','wEukVq6UZfs8Bk9*****HuodMsC9t_6Rz5yfsrZ35TA','80hlbpSyJaRRrFa*****Fsg_xdGxJA90ZqKCyOjTGc8'],success(res) {console.log('订阅消息 成功` ');console.log(res);},fail(er) {console.log("订阅消息 失败` ");console.log(er);}
})

7. 微信支付

wx.requestPayment() 可以调用微信支付功能，需传递几个必填参数，timeStamp时间戳，paySign签名，signType签名算法，package统一下单接口返回的 prepay_id 参数值，nonceStr随机字符串，参数由后端生成返回前端，前端发起微信支付，支付成功拿到回调结果。

//发起微信支付
async prepay_wx(params) {let that = thislet res = await wx.request({url: '请求后端支付接口',method: 'POST',data: params,header: {'content-type': 'application/json','Authorization': that.access_token,}})if (res.data.code === 200) {let sign = res.data.signlet prepay_id = res.data.prepay_idlet nonce_str = res.data.noncestrlet timestamp = res.data.timestamplet order_id = res.data.order_idparams.order_id = order_idlet prepayId = 'prepay_id=' + prepay_idif (sign.length > 0) {wx.requestPayment({nonceStr: nonce_str,package: prepayId,signType: 'MD5',paySign: sign,timeStamp: timestamp,success(res) {wx.showLoading({title: '加载中',mask: true})setTimeout(function() {wx.switchTab({url: '/pages/order/order',})uni.hideLoading()}, 1000)},fail(res) {wx.showToast({title: "支付失败！",icon: 'error',duration: 1500})}})}}
},