vue.js引入微信sdk？
Posted 前端工程师的吹水领域
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js引入微信sdk？相关的知识，希望对你有一定的参考价值。
第一次尝试在vue项目里面引入微信sdk！
为以后支付什么鬼的乱七八糟功能做铺垫！
但网上的资料真的很~铺垫~贼铺垫~
以下是连小白都能看得懂的教程！
这篇推文只是试试水~~
你可以不看内容
但请看一下末尾谢谢~
文笔不好，不喜勿喷！
如有雷同，算你倒霉！
以我现在项目里的某一个页面来做例子：
先来个判断此时是否用微信打开本网页的方法：
当isWeiXin()为true时就代表你用微信打开了这个网页啦
引入包：npm install weixin-js-sdk --save
一、关于配置：
根据你的项目架构，你可以放在APP.vue或者main.js里面，这里以main.js为例。
【配置最坑爹的就是signature（签名）！】
开始配置各个参数：
timestamp（时间戳）：Date.now() JS的时间戳获取方式
nonceStr（16位自定义随机字符串）：
关于这个字符串，在这里介绍一种小白能理解的方法，如下
62个字符，每次调用采用随机数return一个字符，不要问我为什么下面写的是61....（如果你不知道为啥，我推荐你去中山火炬职院信息系好好学习一下！）
然后写一个16次的for循环，最终拼接起来就是个16位纯随机的字符串啦。
这样写....小白应该看得懂吧...
signature（签名）：这个签名是最烦人的！。。。
先简介一下jsapi_ticket：
jsapi_ticket的获取方式：
（下次有时间就发一篇关于node后台的攻略。。。）
签名主要由 jsapi_ticket、nonceStr、timestamp、url四个部分按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
sha1加密方式传说是最安全的加密方式，分享个sha1.js：http://files.cnblogs.com/mofish/sha1.js，如果你可以使用import或者require方式引入就最好了，如果你不能引入或者有其他问题，你可以采用下面这种小白方式：将下图所示function直接copy进main.js。
以上jsapi_ticket、nonceStr、timestamp、url四个参数准备好后，便可以设置config了：
二、局部文件自定义分享内容设置（以项目某个详情页为例）
有两种情况：一种是用户点击微信右上角调出的分享，那么我们就要在渲染出页面前就配置好分享的内容，等待用户去分享就行（固定的分享内容）；另一种是你的页面有一个按钮-点击后就调用了微信的分享（动态的分享内容），这种的话不止要做前者的预配置，还要在你调用该按钮的时候再重新设置一次动态生成的内容。
以固定分享内容为例：
我在加载该页整体数据的function请求成功后就开始做分享内容的设定（如果是微信打开该网页的情况下）
有一点要强调一下：如果你有多个页面可以分享，那么最好做全局性的配置，比如说写一个全局方法，每次分享的设置只需要传入上面所说的四个参数后进行一次配置，注意是进行一次配置！如果你的执行序反过来，那你是得不到效果的；每次进入到一个新的页面时，要清除掉已经做好的分享监听内容，或者是重新盖掉监听内容，否则就会出现A页面做了配置，跳转到B页面，用户点了分享，却分享了A页面的内容。。。呵呵~
按照以上流程配置完后
可以在微信开发者工具上做测试了！
下次打算写一篇
《egg框架的node后台搭建与使用》
或者是
《前端直传阿里云oss与node后台传oss》
前端工程师的吹水领域！
每周看心情更新~~~
文笔不好，不喜勿喷！
如有雷同，算你倒霉！
《中山好人好事》
以上是关于vue.js引入微信sdk？的主要内容，如果未能解决你的问题，请参考以下文章