真 · vue.js接入微信sdk！

Posted 2021-05-01 前端工程师的吹水领域

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了真 · vue.js接入微信sdk！相关的知识，希望对你有一定的参考价值。

上期发布了第一种接入微信sdk的方法

但是刚发布没几个小时

感觉对小白来说还是不够小白~

所以我挤出点时间再修改了一版！

这次采用插件形式配置config！

纯天然，纯小白！

这篇推文仍旧是试试水~~

你可以不看内容

但请看一下末尾谢谢~

文笔不好，不喜勿喷！

如有雷同，算你倒霉！

一、总体思路

为什么说上一版不适合小白？
答：上次采用的是每当打开或进入即将要分享的页面时，就调用一次main.js或APP.vue里准备好的方法，但最终成型后各个页面要配置的东西都挺多的，较为分散，容易出错，所以这次采用一个插件文件的形式来配置config，确保不容易出错；node后台返回jsapi_ticket，但后期可以改造为所需的各个参数都由一次请求来获取，前端只做调用配置的工作。
主要流程：
答：在main.js里引入该插件，在router.afterEach()里添加一个判断，如果为需要分享的页面即调用插件主方法；而在需要分享的页面仅仅需要将要分享的标题与简介保存在localStorage里。

二、开始配置（以main.js为例）

配置微信的核心如图所示：
如何引入插件？
答：新建一个.js文件（以we_config.js为例）在main.js中：
如图所示，这是一个全局方法，所以调用该方法时应为：
Vue.prototype.we_config() -----we_.config()是我范例的主方法
我这里由于业务需求，仅仅是图例所示的三种情况下才调用配置
需要分享的页面的所需配置：
localStorage.setItem('share_data', JSON.stringify({share_title: this.video.title, share_remark: this.video.remark}));
item名可自定义，share_data只是范例
插件内容（前期准备）：
在核心方法的第一幅图可以得知，我们需要准备四个参数：
timestamp（时间戳）、
nonceStr（随机字符串）、
signature（签名）

下面开始各个准备：
①.首先在头部引入请求文件（import Api from '../api/index.js'）该文件是我将各个请求整合的文件，不必参照，只需将后面需要请求的地方改为你会写的ajax或者http.get即可

②.引入微信：
npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk'

③.微信config里需要准备一个16位随机字符串参数nonceStr，这里提供一个小白向的获取方式：
不要问我为什么getRandomCode()里的return是61，如果你不知道，我推荐你去中山火炬职业技术学院-信息工程系好好进修一下！

④.这里还需要准备一个此时的时间戳（单位到秒）：
parseInt(Date.now() / 1000)

⑤.签名里还需要一个参数URL，而在vue里如果你想用hash模式，那么你需要将页面的传参一类改造一下，因为微信会将#之后的所有东西都删掉！而我这里以history模式为例：window.location.href.split('#)[0]

⑥.微信config里的最重要参数：signature（签名）需要sha1加密，所以我们先做铺垫，这里提供一个sha1文件的下载链接：http://files.cnblogs.com/mofish/sha1.js

⑦.如果你可以通过import或者require的方式引入上面下载的sha1.js那就最好了，如果你不知道怎么使用或者出错了，那么你可以将下图所示的各个方法复制到we_config.js里
插件内容（正式function）：
①.前面提到，这个插件是以全局function的方式挂载在vue里，所以这里的写法如下：
其中we_config方法是这个插件的主函数，在外部只需要调用这个function即可，110行Api.authUserOpenId()是我测试用的一个向后台请求jsapi_ticket的方法，这个函数其实可以改造成后台直接返回一个签名以及各个所需参数（但我懒，我懒得去改造node后台，所以就先展示前端是怎么操作的吧）
注意！113行we_config()里获取到后台返回数据后的签名拼接，拼接需要全小写！不然会报错！！！

②.在各个参数准备好之后，115行调用了图里第二个function---setConfig()，这个函数就是在配置微信相关参数（非用户看到的）随后通过返回的true/false执行setWeiXinShare()：
简单说一下：前面有提到，在你需要分享的页面将要展示的分享名，以及分享描述以localStrong的方式缓存起来，当然你也可以用sessionStorage，而在143行那里就是获取你缓存起来的数据了，打红色的部分是你分享出来的链接的图标logo（我这里是统一的logo）。
调用：
如图所示，当router处理完成后在应该配置的页面下，调用we_config()主函数即可，前提是你在router处理过程中有保存share_data。