H5页面分享给朋友或朋友圈，以及点击链接无法显示图片、标题等
需求：做一个H5宣传页面，可以像卡片一样在微信里面转发
遇到问题：
1、没有设置JS安全域名，会报：config：fail,invalid url domain（去公众号里配置）
2、jsApiList的长度为0，（初始化执行的太快，没拿到）
3、微信中点击链接无法显示图片、标题、描述等
4、更新后手机缓存问题（据同事说，在路径后面加一个随机参数就可以避免这个问题，我没改，我实在是被第三个问题搞呕了，不想改了）
第三个问题是我找了很久的bug，后面看到一个简书上的博主的文章，才找到解决办法：https://www.jianshu.com/p/c462d0103ead
不可以直接在微信内点击H5链接地址，必须是通过微信公众号下方链接点击，或者通过扫码进入，才能正常显示分享样式。
可以参考一下这个博主，我后面使用的是扫二维码打开
可怜我一直以为是自己的问题，还找了很久的bug，不说了，说多了都是泪~
写的不好的地方请见谅，这里单纯给自己做笔记了
参考代码：
<template>
<view>
<swiper :style="'height: '+ screenHeight +'px;'" class="swiper" :vertical="true" >
<swiper-item>
<image src="/static/img/01.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/static/img/02.jpg"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
import jweixin from "jweixin-module"
export default {
data() {
return {
screenHeight:0,
}
},
created() {
this.screenHeight = uni.getSystemInfo().screenHeight ? uni.getSystemInfo().screenHeight : 800
},
onLoad() {
this.wxShare()
},
methods: {
wxReady() {
jweixin.ready(function() {
jweixin.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: ``, // 分享链接
imgUrl: '', // 分享图标
success: res => {
// 用户确认分享后执行的回调函数
console.log(res)
console.log('分享成功')
},
cancel: res => {
// 用户取消分享后执行的回调函数
console.log(res)
console.log('bbbbbbb')
},
fail: res => {
console.log(res)
console.log('cccccc')
}
});
jweixin.onMenuShareTimeline({
title: '', // 分享标题
link: ``, // 分享链接
imgUrl: '', // 分享图标
success: res => {
// 用户确认分享后执行的回调函数
console.log(res)
console.log('分享成功')
},
cancel: res => {
// 用户取消分享后执行的回调函数
console.log(res)
console.log('bbbbbbb')
},
fail: res => {
console.log(res)
console.log('cccccc')
}
});
jweixin.onMenuShareTimeline({
title: '', // 分享标题
link: ``, // 分享链接
imgUrl: '', // 分享图标
success: res => {
// 用户确认分享后执行的回调函数
console.log(res)
console.log('分享成功')
},
cancel: res => {
// 用户取消分享后执行的回调函数
console.log(res)
console.log('bbbbbbb')
},
fail: res => {
console.log(res)
console.log('cccccc')
}
});
jweixin.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: ``, // 分享链接
imgUrl: '', // 分享图标
success: res => {
// 用户确认分享后执行的回调函数
console.log(res)
console.log('分享成功')
},
cancel: res => {
// 用户取消分享后执行的回调函数
console.log(res)
console.log('bbbbbbb')
},
fail: res => {
console.log(res)
console.log('cccccc')
}
});
});
},
wxShare() {
let that = this
const Api_url='https:xxxx'
var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题，前台用的js编码，后台解码
uni.request({
url: Api_url + '接口',
method: 'POST',
header: {
'token': '',
'usertype': 1,
'content-type': 'application/x-www-form-urlencoded' //post一定要带这个header，被这里坑了半天
},
data: {
url: surl
},
success: res => {
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.data.signature, // 必填，签名，见附录1
surl: res.data.data.url, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','updateTimelineShareData','updateAppMessageShareData']
});
that.wxReady()
},
fail: error => {
console.log('request fail', error);
},
complete: () => {}
});
},
}
}
</script>
<style lang="scss" scoped>
</style>
