uniapp开发微信公众号(H5)分享功能
新建weixinModel.js
// npm install jweixin-module
var jweixin = require('jweixin-module')
// 避免ios获取不到url
function getSignUrl() {
var signLink = ''
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
signLink = uni.getStorageSync('WxCodeUrl');
if (!signLink) signLink = location.href
} else {
signLink = location.href
}
return signLink;
}
function WXConfig(_this) {
//这个URL 路径中不可以带有hash值 即不能又 #后面的的内容(包含#)
//这里使用到了encodeURIComponent()
const sign_url = getSignUrl().split('#')[0];
let URL = window.encodeURIComponent(sign_url)
ApiHttp('/comn/jsdk', {
url: URL
}, 'POST', true, true).then(res => {
if (res.code === 0) {
jweixin.config({ //这里是个函数,非对象
debug: false, // 调试,发布的时候改为false
appId: res.data.appId, //后端接口获取
nonceStr: res.data.nonceStr, //后端接口获取
timestamp: res.data.timestamp, //后端接口获取
signature: res.data.signature, //后端接口获取
jsApiList: [ // 可能需要用到的能力 需要啥就写啥。多写也没有坏处
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline',
'openLocation'
]
})
let configComnSv = getStorageSync('configComn') ? JSON.parse(getStorageSync('configComn')) : {};
let userInfoCv = getStorageSync('userInfo') ? JSON.parse(getStorageSync('userInfo')) : {};
let referid = userInfoCv.id;
let link_change = getSignUrl();
if (location.search) { //避免重复添加referid
if (link_change.includes('&referid')) {} else {
link_change += `&referid=${referid}`
}
} else {
if (link_change.includes('?referid')) {} else {
link_change += `?referid=${referid}`
}
}
let obj = {
title: configComnSv.share_title ? configComnSv.share_title : '标题', // 分享标题
desc: configComnSv.share_desc ? configComnSv.share_desc : '描述', // 分享描述
// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// link: sign_url, //这里可带参数,必须是同配置的JS安全域名一致
link: link_change, //这里可带参数,必须是同配置的JS安全域名一致,必须是全部url(不需要去除#),这个地址如果上面向后端置换的URL通过encodeURIComponent编译,后端配置的地址需要decode一下,例如php可以用urldecode函数
imgUrl: configComnSv.share_pic ? configComnSv.share_pic : '', // 必须是同配置的JS安全域名一致
success: function() {}
}
jweixin.ready(function() {
if (jweixin.onMenuShareAppMessage) {
jweixin.onMenuShareAppMessage(obj); //1.0 分享到朋友
jweixin.onMenuShareTimeline(obj); //1.0分享到朋友圈
} else {
jweixin.updateAppMessageShareData(obj); //1.4 分享到朋友
jweixin.updateTimelineShareData(obj); //1.4分享到朋友圈
}
})
}
})
}
export default {
WXConfig
}
app.vue添加url缓存
mounted() {
uni.setStorage({
key: 'WxCodeUrl',
data: location.href
});
}
分享页面使用
import weixinModule from "@/utils/weixinModel.js"
onLoad() {
weixinModule.WXConfig(this)
},
补充说明:
分享出去,需要在微信公众后配置自定义菜单,不然分享出去的是一个链接,配置完成后才是模板块,图片+文字