这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战
最近在写这个，弄了好久才解决，现在记录下，主要是微信公众号分享好友，然后好友通过连接点进去看详情，这里涉及进去后如果没登录就要进行登录，登录了就可以直接看。
一、接入sdk
1、全局引入sdk，先把sdk下载下来，然后放在本地工具文件夹下，在main.js里引入就可以全局使用了。下载地址
//main.js
// #ifdef H5
import wx from '@/utils/jweixin-1.6.0.js';
Vue.prototype.$wx = wx;
// #endif
我是直接点击链接后复制内容到本地js文件里粘贴的。
二、配置权限
1、在需要分享的页面，配置权限，需要后端提供接口来获取配置信息。
这里也有个重要的点，就是**appid一定要一致，微信平台一定要有权限分享，配置了安全域名，IP白名单等，如果还是提示没权限就要问后端是不是签名写的有问题，**我这个一开始就是后端的问题，自己弄了一天！
在onLoad里写入：
onLoad(options) {
let _this = this;
// #ifdef H5
uni.request({
url: getApp().globalData.serverUrl+'/sharewx',
method: 'GET',
data: {
token: getApp().globalData.token,
appId: getApp().globalData.appid,
url: window.location.href //！这里必须是这个，不然就没用！
},
success: (res) => {
let result = res.data.data;
_this.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: result.appId, // 必填，公众号的唯一标识 timestamp: result.timestamp, // 必填，生成签名的时间戳
nonceStr: result.nonceStr, // 必填，生成签名的随机串
signature: result.signature,// 必填，签名
jsApiList: ["updateTimelineShareData","updateAppMessageShareData"] // 必填，需要使用的JS接口列表
});
}
});
// #endif
},
-
通过调用后端接口获取签名，appid，时间戳，随机字符串等信息，对了，这里调接口传的url，可以试试需不需要encodeURIComponent，我这里不需要也可以，如果接口返回错误就自己加encodeURIComponent(window.location.href)加编码再传。
-
配置jsApiList权限：updateTimelineShareData这个是分享朋友圈，updateAppMessageShareData这个是分享好友的。
-
权限配置，调试的时候吧debug设置为true，无论成功与否都会弹框提示，成功就提示eMsg: ok，否则就会提示很长一串没权限的。
这个弹框就是启用了debug模式，然后我这个是因为调接口传的url不是当前页面全地址，后来改成了window.location.href就好了。
注意：请求后台接口的时候，传递的url必须是当前全连接，不然会失效，之前我自己写死了，试了大半天，就是没权限，发现不能写死！！！但是这个在开发工具里是可以分享的，但是真机上不行，所以一定要写window.location.href，网上搜了那么多都没有着重提示这个的！
onShow() {
// #ifdef H5
setTimeout(()=> {
this.wxShare();
},500)
// #endif
},
methods: {
wxShare() {
let _this = this;
_this.$wx.ready(function () { //需在用户可能点击分享按钮前就先调用
_this.$wx.updateAppMessageShareData({
title: '分享标题', // 分享标题
desc: '分享邀请', // 分享描述
link: 'https://abc.com#pages/classroom/classroom?orderId='+_this.orderId, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: "https://stu.acoer.cn/guoshiBgImg/loginIcon.png", // 分享图标，这个必须要写https，不然会提示
success: function () {
// 设置成功
}
})
});
}
}
然后在onShow生命周期里调用方法，我写setTimeout就是害怕onLoad加载慢就执行了onShow，wxShare这个方法也可以用来放在点击事件里，我的是静默加载的。
三、进入页面判断是否登录进入详情
第二步我在link里传入了orderId，现在好友如果点开链接要获取orderId，一开始以为要从链接里截取，发现并不需要，而且在开发工具里获取参数(window.location.search)都拿不到！没想到可以直接在App.vue中的onLaunch生命周期的options里获取到：
onLaunch: function(options) {
console.log(options)
let _this = this;
// #ifdef H5
if (options.query.orderId && options.query.orderId != undefined) {
let orderId = options.query.orderId;
_this.globalData.orderNum = orderId;
uni.setStorage({
key: 'orderId',
data: orderId
});
}
// #endif
})
},
onShow: function() {
let _this = this;
uni.getStorage({
key: 'token',
success: function (res) {
_this.globalData.token = res.data;
if(res.data && _this.globalData.orderNum && _this.globalData.orderNum != '') {
setTimeout(()=> {
uni.navigateTo({
url: '/pages/orderInfo/orderInfo?orderId='+_this.globalData.orderNum
});
},1500)
}else {
uni.navigateTo({
url: '/pages/login/login'
});
}
}
});
},
然后在onShow生命周期里获取token然后判断进行相应的跳转就好啦，如果没有token就跳转到login页面，只要能拿到orderId就好操作了。
就这点代码写了我一两天，被该死的权限弄得烦躁！现在还是很有成就感的，哈哈。
