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 这些操作。