乐趣区

关于前端:安卓ios微信H5分享踩坑指南

jiezi

博主最近在开发一个 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=#/activity
1
复制代码

喜剧不？好受不？这样的 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-sdk
1
复制代码

又或者

<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=#/invite
1
复制代码

没错，会始终携带微信受权回来的货色(博主用的是 vue 的 hash 模式，默认将路由地址加在前面)，那么咱们须要拼接进去的地址是怎么样的？如下：

http://192.168.1.153/?spoorerid=100&inviteuserid=1144
1
复制代码

没错，微信的官网文档中，特地揭示了 咱们的链接不能携带 #号前面的货色 。详情请看这里

明确标签能够通过？的 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…
起源：掘金
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

退出移动版