文章目录
第一个坑第二个坑小技巧实现思路
第三方配置就不说了，按着官方文档来就可以了 H5端 微信分享 使用JS-SDK 详情请查看JS-SDK说明文档
第一个坑
在进行接口鉴权时需要签名等参数，签名等参数需要调用后端接口返回。需要注意的是：调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用url作为入参，具体看后端拿什么字段作为入参字段)。 区分俩种情况：
IOS端 微信IOS版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是最初进入页面时的urlAndroid端 微信安卓版，每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
/** 这段代码写在App.vue的onLaunch生命周期中(在获取签名时_SYSTEM_AUTHURL会用到)
* 定义全局第一次进入的页面地址，否则iOS端微信JSSDK授权会一直报invalid signature签名失效的错误
* IOS：微信IOS版，微信安卓版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是最初进入页面时的url
* Android：微信安卓版，每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
* */
let authUrl = window.location.href.split('#')[0];
uni.setStorageSync('_SYSTEM_AUTHURL', authUrl);
第二个坑
updateAppMessageShareData的link参数，分享链接的地址上有带中文的参数(中文参数值会被干掉)，安卓上分享是可以正常分享，但是在IOS上会出现报错，导致你分享标题、描述、图片等都失效了：
只要把分享链接先 encodeURIComponent转码就可以了。 例如：
// 分享的链接link
"https://www.xxx.com/test?&eid=1&name=名字"
// 改成
"https://www.xxx.com/test?&eid=1&name="+encodeURIComponent("名字")
updateAppMessageShareData示例：
// jweixin 是引入的微信sdk.js文件
jweixin.updateAppMessageShareData({
title: '', // 分享标题
desc: '的哈加快速度好看\r\n的时间里将埃里克', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标(我这里是oss的图片全路径)
success: res => {
console.log('成功', res);
},
error: err => {
console.log('失败', err);
},
cancel: can => {
console.log('取消', can);
}
})
小技巧
对于描述要实现多行显示的话： 只需要在updateAppMessageShareData的分享描述desc值，需要换行的地方拼接上一个’\r\n’。 title标题和desc描述文字过长时，会自动显示’…’
实现思路
先创建一个公共js文件wxsdk.js： a.引入官方文档的微信sdk文件 b.引入获取签名的api接口文件 c.引入store仓库index.js文件 wesdk.js文件里大致执行顺序是： getWxConfig里面先调用isWechat 判断当前环境是否是微信内置浏览器 后调用shareAppMessage分享的方法，并将分享的配置信息传过去(定制情况下)，非定制情况下(这里传的是应用首页路径)
import jweixin from '@/js_sdk/jweixin-module/index.js';
import { getWxOptions } from '@/util/api/weixin.js'
import store from "@/store"
//判断是否在微信中
const isWechat = function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
};
//获取微信JSSDK授权
const getWxConfig = function(shareLink) {
let share = shareLink ? shareLink : '/pages/home/index?status=phi&hospitalId=' + store.getters.domainInfo.hospitalId
var that = this;
if (!that.isWechat()) {
// '/pages/error/wechat'这个是警告页面提示请在微信内打开(防止将页面地址复制在手机浏览器打开)
return uni.reLaunch({
url: '/pages/error/wechat'
})
}
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// 判断是否拿微信开发者工具打开，是的话不能走 window.entryUrl，否则sdk授权不成功
if (u.indexOf('wechatdevtools') > -1) {
isiOS = false
}
let pageUrl = '';
if (isiOS) {
pageUrl = uni.getStorageSync('_SYSTEM_AUTHURL');
}else {
pageUrl = window.location.href.split('#')[0];
}
let hospitalId = uni.getStorageSync('_SYSTEM_HOSPITALID');
// 判断是否合作机构 请求不同授权接口
getWxOptions({
partnersCode: uni.getStorageSync('_PARTNER_CODE'),
url: pageUrl,
hospitalId
}).then(res => {
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳，由开发者生成的当前时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串，由开发者随机生成
signature: res.data.signature, // 必填，签名
// 必填，需要使用的JS接口列表
jsApiList: [
'checkJsApi',
'openLocation',
'chooseImage',
'openAddress',
'chooseWXPay',
'updateAppMessageShareData',
'updateTimelineShareData',
'getLocalImgData',
'uploadImage',
'hideMenuItems'
]
})
jweixin.ready(() => {
/**
* config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
* 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
*/
//分享给朋友接口--如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行
// jweixin.updateAppMessageShareData('相关参数');
setTimeout(function() {
that.shareAppMessage(share);
}, 100);
//分享到朋友圈接口--如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行
// jweixin.updateTimelineShareData('相关参数');
// [生产环境] 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有 menu 项见附录3
// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
if (process.uniEnv.ENV == 'prod') {
jweixin.hideMenuItems({
menuList: ['menuItem:copyUrl']
});
}
});
jweixin.error(err => {
console.log(err, '接口验证失败');
});
})
};
// 分享页面
const shareAppMessage = function(shareParams) {
let customizationShare = typeof shareParams == 'object' ? true : false;
let shareContent = {
title: '',
desc: '',
link: '',
imgUrl: ''
};
if(customizationShare) {
// 定制分享内容
shareContent.title = shareParams.title;
shareContent.desc = shareParams.desc;
shareContent.link = store.getters.domainInfo.host + process.uniEnv.BASE_DIST + shareParams.link;
shareContent.imgUrl = process.uniEnv.BASE_FILEURL + '/' + shareParams.imgUrl;
}else {
// 这里拿的是store仓库中默认的分享内容
shareContent.title = store.getters.domainInfo.htmlAbbreviation + sTitle;
shareContent.desc = store.getters.domainInfo.shareText;
shareContent.link = store.getters.domainInfo.host + process.uniEnv.BASE_DIST + '/pages/home/index?status=phi&hospitalId=' + store.getters.domainInfo.hospitalId;
shareContent.imgUrl = process.uniEnv.BASE_FILEURL + '/' + store.getters.domainInfo.logo;
};
jweixin.updateAppMessageShareData({
title: shareContent.title, // 分享标题
desc: shareContent.desc, // 分享描述
link: shareContent.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareContent.imgUrl, // 分享图标
success: res => {
console.log('成功', res);
},
error: err => {
console.log('失败', err);
},
cancel: can => {
console.log('取消', can);
}
})
}
在store仓库中initsdk.js文件中写初始化sdk方法：
import getters from '../getters.js';
import wxopt from '@/util/plugins/wxsdk.js'
const payment = {
state: {
// 微信sdk 页面中通过Getter获取
wxsdk: null,
},
actions: {
// 初始化微信SDK
init_wxsdk({ commit, state, getters }, shareParams ) {
let link;
if(shareParams) {
shareParams.link = shareParams.link + '&hospitalId=' + getters.domainInfo.hospitalId;
link = shareParams;
}else {
link = '/pages/home/index?status=phi&hospitalId=' + getters.domainInfo.hospitalId;
};
// 通过config接口注入权限验证配置
state.wxsdk = wxopt;
state.wxsdk.getWxConfig(link); // 配置授权
}
}
}
export default payment
在App.vue的onLaunch生命周期中接着第一个坑示例代码后面写上初始化微信sdk方法，走默认分享内容
import { mapActions, mapGetters } from 'vuex';
onLaunch: function(options) {
let authUrl = window.location.href.split('#')[0];
uni.setStorageSync('_SYSTEM_AUTHURL', authUrl);
// 写上初始化sdk方法
this.init_wxsdk();
}
// 还需要在methods生命周期中写上
methods: {
...mapActions(["init_wxsdk"])
}
在需要实现定制分享的页面中：
import { mapActions, mapGetters } from 'vuex';
onLoad(options) {
// 走定制分享内容
let shareParam = {
title: this.details.fullName + ' ' + this.details.titleValue || this.details.role,
desc: hospitalName + ' ' + this.deptName + '\r\n' + beGoodAt,
link: nowPagesPath,
imgUrl: img
};
this.init_wxsdk(shareParam);
// 走默认分享内容
this.init_wxsdk();
}
// 还需要在methods生命周期中写上
methods: {
...mapActions(["init_wxsdk"])
}