uniapp H5 JSSDK自定义分享微信内容

JSSDK使用步骤

1.微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

在开发期间,后端会有一个测试公众号,在上面可以配置本地ip地址,方便开发期间测试

2.引入jssdk包
安装包
npm install jweixin-module --save```

在对应页面引用
import jweixin from 'weixin-js-sdk'


	const onWxPrepay = (res : Order.WxpayData) => {
		uni.hideLoading()
		//通过config接口注入权限验证配置
		jweixin.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,线上环境需要改为false
			appId: res.appId, // 必填,公众号的唯一标识
			timestamp: res.timestamp, // 必填,生成签名的时间戳
			nonceStr: res.nonceStr, // 必填,生成签名的随机串
			signature: res.paySign,
			jsApiList: ['chooseWXPay'], // 必填,需要使用的JS接口列表
		})
		jweixin.ready(() => {
			jweixin.chooseWXPay({
				appId: res.appId, // 必填,公众号的唯一标识
				timestamp: res.timestamp,
				nonceStr: res.nonceStr, // 支付签名随机串,不长于 32 位
				package: res.prepayId, // 统一支付接口返回的prepay_id参数值
				signType: 'RSA', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
				paySign: res.paySign,
				success: (res) => {
					uni.showToast({
						title: '支付成功',
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/order/order',
						})
					}, 500)
				},
				cancel: () => {
					uni.showToast({
						title: '取消支付',
						icon: 'none',
					})
				},
				fail: () => {
					uni.showToast({
						title: '支付失败',
						icon: 'none',
					})
				},
			})
		})
	}
	

chooseWXPay中需要的那些参数,需要后端同学提供,后端同学不配合的话让他看看文档哦~

这里只是修改了微信分享出去的内容,并不能直接唤起微信分享弹窗,微信分享弹窗只能通过点击右上角三个点点才能唤起。
注意:如果是直接在微信浏览器上打开,点击右上角分享是没有自定义内容的效果的,可以通过扫码或者是在公众号上打开才有自定义内容效果,这里可能是微信做了场景校验

在这里插入图片描述
这里我理解的是要在点击页面右上角之前就需要自定义设置好,所以要在onLoad的时候就进行config ready 这些操作。

官方文档地址
建议再看官方文档的时候一定要仔细仔细,很多地方文档已经写的很清楚了。
所有JS接口列表