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

分享我在商城类微信小程序项目中用到的功能~（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) return
	this.currentpage += 1
	this.getOrderList()
}

4. 拨打电话

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

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

connectStore(item) {
	let phone = item.phone
	if(phone){
		let phone = item.phone
		wx.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_name
	let address = shop.address
	wx.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 = this
	let 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.sign
		let prepay_id = res.data.prepay_id
		let nonce_str = res.data.noncestr
		let timestamp = res.data.timestamp
		let order_id = res.data.order_id
		params.order_id = order_id
		let prepayId = 'prepay_id=' + prepay_id
		if (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
					})
			    }
		    })
		}
	}
},