博主最近在开发一个H5的我的项目，正好遇到了微信分享，不得不说微信的文档不知多久没更新的缘故，外面的操作能够在安卓完满的进行，然而！有一个可恶的苹果挡住了来路！闲话不多说，间接进去正题。附上步骤图
一、判断是否须要微信受权
依据微信JSSDK文档，一般来说后端须要配置白名单。进入公众号外面填写JS接口平安域名，这点很重要，因为这样能力获取到正确的config配置。依照我当初的我的项目，咱们前端次要做的就是判断用户有没有openid，没有的话就让他去微信登录受权。那该怎么判断呢？没错只能在地址里判断有没有code码，没有code码的时候，咱们就让他去进行微信受权。
if(window.location.href.includes('code='){ // 有code码的时候进行的操作} else{ // 没有code码时候要进行微信受权}12345复制代码如果你是用vue的hash模式开发的话，当你用微信开发者工具看到微信正确受权回来之后是这样的一个链接。
http://192.168.1.165/?code=051JpHFa1U8B6A0sfLIa1m5d422JpHFy&state=#/activity1复制代码喜剧不？好受不？这样的code码要本人在链接里获取(开发环境下是不会跳转到你本地的，下面的代码只是展现用，实际上微信只会跳转到你的线上域名地址）。那要怎么获取啊？贴心博主给你上面的代码，不求人！
/** * @description 解析get参数 * @param url * @returns {Object} */export function getUrlParams (url) { if (url.includes('?')) { const str = url.split('?')[1].split('#')[0] const arr = str.split('&') const obj = {} for (let i = 0; i < arr.length; i++) { obj[arr[i].split('=')[0]] = arr[i].split('=')[1] } return obj } else { return {} }}123456789101112131415161718复制代码只有你把下面的一整个链接间接放到这个办法外面，他就会返回一个Object对象给你。用下面的链接的话返回的就是上面的。
const obj = { code:051JpHFa1U8B6A0sfLIa1m5d422JpHFy, state:""}1234复制代码这时候你只须要将code码发送给你的后端，让他返回给你openid就能够了。当然这个办法不止是这么用的，当你分享须要带参数的时候，这个办法就能够放在跳转到微信受权之前间接调用，而后你就把传过来的参数间接保留到本地贮存。为什么要这么做？没错，微信会把你的链接截取的不成人样，所以只能这样保留参数了。
二、获取config配置以及如何携带参数
这里如何引入微信的JSSDK就不再说了，能够通过npm下载包或者是script标签引入。如下：
npm i -S weixin-js-sdk1复制代码又或者
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> vue我的项目的话请写在index.html页面1复制代码2.1 config配置注入
那么咱们就进行第三步！就是config配置注入。原理就是咱们通过接口给后端传递url地址(必须与下面公众号配置的平安域名统一！)，后端通过微信的接口获取到config配置，具体为什么这么做呢？就是为了平安，不泄露你的公众号的某些信息。而后咱们就填到上面的办法。
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert进去，若要查看传入的参数，能够在pc端关上，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的惟一标识 timestamp: , // 必填，生成签名的工夫戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'] // 必填，须要应用的JS接口列表});12345678复制代码这里我须要的是微信好友分享以及微信朋友圈分享，更多的接口能够查问微信接口文档。这是须要特地揭示的是，配置胜利后间接调用wx.ready事件
个别调试的时候都会关上debug。就是config外面的那个，不便查看config配置胜利与否。
2.2 分享链接带参数
如果是简略的分享网页的话，其实不须要做这些步骤。因为微信内置就能够分享网页，只是不会携带任何货色而已，如果是绑定上下级关系的时候，就须要用到自定义分享去配置。后面说到的getUrlParams办法就起了重大作用，用来保留携带过去的参数，那么参数咱们须要怎么拼接呢？首先有一点须要明确的是，微信受权回来当前，你的网址链接个别都是长这样的：
http://192.168.1.153/?code=051JpHFa1U8B6A0sfLIa1m5d422JpHFy&state=#/invite1复制代码没错，会始终携带微信受权回来的货色(博主用的是vue的hash模式，默认将路由地址加在前面)，那么咱们须要拼接进去的地址是怎么样的？如下：
http://192.168.1.153/?spoorerid=100&inviteuserid=11441复制代码没错，微信的官网文档中，特地揭示了咱们的链接不能携带#号前面的货色。详情请看这里
明确标签能够通过？的get形式携带参数，那么咱们只有配置成这样就完事了。间接如何配置不做任何示例，我的办法就是，用一个变量拼接参数。如拼接成 ?spoorerid=100&inviteuserid=1144，而后拼成一个残缺的链接。如下：
const link = (window.location.href).replace(window.location.search, addlink).split('#')[0]// 其中addlink就是下面说的变量。拼出来的后果在下面曾经展现了。12复制代码三、分享操作
基本上做完下面的工作就能够去分享了，然而！家喻户晓，ios跟安卓始终有这奥妙的关系！没错，如果你是像博主一样，点击了分享当前，才去获取config配置的话，那么祝贺你，安卓是能够的，然而ios的就是不行！不论是在微信开发者工具多少次的胜利，你ios这样做就是不行。上面提供两种办法。
3.1 全局配置
实现起来很简略，就是间接在app.vue里把微信JSSDK的货色都写上，包含获取config配置，还有就是ready外面的货色都写上，间接在mounted调用一下就能够了。然而这样的弊病就是，如果需要是指定某个页面能力分享操作，这样写的话就会单页面里的任何一个页面都能够分享，这是咱们不想要的。
3.2 独立配置(指定某个页面分享)
下面说到，如果点击触发事件的时候才去获取config配置等等，在ios是不行的。通过一直的尝试以及是查问(其实是问了某个高手)，当你跳转到那个须要分享的页面时，你不能应用this.$router.push()的形式去跳转，在hash模式下，其实页面是不做任何跳转的，这就导致了在ios中不能获取到配置项。这时候，原生的货色就起了关键作用：
window.location.href = window.location.href.split('#')[0] + '#/invite'1复制代码通过上面的形式跳转到分享页，页面是相当于刷新了一次，这时候在ios就能获取到相干配置了。能够参考这个文章。
总结
好了，花了两三个小时终于是整顿完了这文章。如果感觉有用，喜爱珍藏或者点个喜爱，毕竟这是博主搜了一个多星期百度的后果，心愿能帮到大家永不加班，到点就走！
作者：RadiomM
链接：https://juejin.cn/post/690344...
起源：掘金
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。