为了实现uniapp H5 公众号网页实现微信分享和微信支付真是耗费了很长时间，😑uniapp文档和微信相关文档对初次接触业务的开发人员也不太友好🤢，接下来把我已经实现的相关流程先分享出来。看看这些过程符合不符合你目前的开发需求。
微信相关权限申请
//操作流程⤵️
⚙️设置与开发
-公众号设置
-功能设置
-设置 JS接口安全域名 和 网页授权域名 (可能是你部署的网址)
-安全中心
-IP白名单
-写入你当前的IP地址 多个IP地址用➡️;⬅️分号隔开
-基本配置
-公众号开发信息
-查看你的AppID和AppSecret以及配置IP白名单
-接口权限
-查看你的公众号拥有的权限，业务需要哪个就申请那哪个.
安装微信SDK
//Js 环境下
npm install weixin-js-sdk
//因为我的项目涉及技术栈是Vue3+Ts所以网上找了个现成的包,你也可以根据原生weixin-js-sdk包进行相关TS声明。
//Ts 环境下
npm install weixin-js-sdk-ts
引入SDK
我是直接在项目首页引入的，或者是进入你所上线部署网址链接的
第一个页面:因为Vue的动态路由和微信配置的相关问题(比较🥬也没时间深入了解，你可以自己研究研究)浪费了很多时间索性直接在首页引入SDK并进行后续配置.
//
// index.html
//
<body>
...
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
...
</body>
// .vue文件里面引入
//
// index.vue
//
// ❗记住一定要写在H5的环境里❗
import { onLoad } from '@dcloudio/uni-app'
import { mockAPI } from '@/api/mockAPI'
// #ifndef H5
import wx from 'weixin-js-sdk-ts'
// #endif
配置wx.config()
//前端需要以下键值对(服务器端需要返回的值):
{
...
nonceStr: "xxxxxx-xxxx-xxxxxx-xxxxxxxxxx"
signature: "123j23h5v2jh5235182912rbj1241j2bj"
timestamp: "1687154134"
...
}
//--------协调后端开发--------
//向服务器端传appid(你所开发的公众号appid)和首页url(因为在首页配置SDK)
// ❗ url需要进行编码(具体原因你可以自己去了解) ❗
//
//index.vue
//
onLoad(()=>{
...
const url = window.location.href
const appid = 'wxa12d34eca643970d'
mockAPI(appid,encodeURIComponent(url)).then((res:any)=>{
console.log(res)
//返回的响应值字段至少要包括上面的nonceStr,signature,timestamp.这些是必须的❗
//根据返回的响应数据进行wx.config()配置
wx.config({
debug: true,//可以在控制台查看wx.config相关结果输出
appId: appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'chooseWXPay',
],
openTagList: [] //这个是因为weixin-js-sdk-ts这个包必须写入的值(你可以研究研究为什么❔)
})
wx.error(error => {
//wx.config()配置失败后执行此处
console.log(error)
})
wx.ready(function() {
//如果控制台输出{errMsg: "config:ok", jsApiList: Array(1)}
//并且此处放入的一些函数方法可以执行成功
//那么到此应该是初步配置成功了🤔
//还可以通过wx.checkJsApi()检测相关微信权限是否可用
wx.checkJsApi({
jsApiList:[
'onMenuShareAppMessage',
'onMenuShareTimeline',
'chooseWXPay',
'hideOptionMenu',
'showOptionMenu',
'openLocation',
'getLocation',
'updateAppMessageShareData',
'updateTimelineShareData'
],
success:function(res){
//当debug为true时
console.log('API权限结果为', res)
//{errMsg: "checkJsApi:ok", checkResult: {…}}
}
})
})
})
...
})
实现微信自定义分享 wx.updateAppMessageShareData()
在微信中打开你的项目链接并且点击微信右上角原生
•••图标后的分享操作
//在你需要分享的页面处调用wx.ready() 因为我们在首页已经配置好了wx.config()
//如果配置成功了 我们可以直接在其他页面调用wx.ready()
//需要分享的.vue页面
onLoad(()=>{
...
dataAPI()//可以是你当前页面获取数据的API 把响应数据填入下方 wx.updateAppMessageShareData({})配置中
...
wx.ready(function(){
wx.updateAppMessageShareData({
title:'',
desc:'',
link:'',
imgUrl:'',
success:function(){
//成功后可以执行其他函数方法操作
//{errMsg: "updateAppMessageShareData:ok"}
}
})
})
...
})
🤢🤮🤢只有把你的项目链接在你的公众号对话页面中打开才可以使用自定义分享❗❗❗
