360SDN.COM

首页/Vue.js/列表

真 · vue.js接入微信sdk!

来源:前端工程师的吹水领域  2017-09-20 15:57:32    评论:0点击:

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

但是刚发布没几个小时

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

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

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

纯天然,纯小白!

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

你可以不看内容

但请看一下末尾谢谢~

文笔不好,不喜勿喷!

如有雷同,算你倒霉!

一、总体思路

  1. 为什么说上一版不适合小白?

    答:上次采用的是每当打开或进入即将要分享的页面时,就调用一次main.js或APP.vue里准备好的方法,但最终成型后各个页面要配置的东西都挺多的,较为分散,容易出错,所以这次采用一个插件文件的形式来配置config,确保不容易出错;node后台返回jsapi_ticket,但后期可以改造为所需的各个参数都由一次请求来获取,前端只做调用配置的工作。

  2. 主要流程:

    答:在main.js里引入该插件,在router.afterEach()里添加一个判断,如果为需要分享的页面即调用插件主方法;而在需要分享的页面仅仅需要将要分享的标题与简介保存在localStorage里。

二、开始配置(以main.js为例)

  1. 配置微信的核心如图所示:


  2. 如何引入插件?

    答:新建一个.js文件(以we_config.js为例)在main.js中:

    如图所示,这是一个全局方法,所以调用该方法时应为:

    Vue.prototype.we_config()  -----we_.config()是我范例的主方法

    我这里由于业务需求,仅仅是图例所示的三种情况下才调用配置

  3. 需要分享的页面的所需配置:

    localStorage.setItem('share_data', JSON.stringify({share_title: this.video.title, share_remark: this.video.remark}));

    item名可自定义,share_data只是范例


  4. 插件内容(前期准备):

    在核心方法的第一幅图可以得知,我们需要准备四个参数:

    appId(公众号appId)、

    timestamp(时间戳)、

    nonceStr(随机字符串)、

    signature(签名)

    时间戳与随机字符串的获取方式在下面会给出,appId可在公众号基本配置处得到;最重要的是signature(签名),这个签名由 jsapi_ticket、nonceStr、timestamp、url四个部分按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义,其中 jsapi_ticket可以理解为微信反馈的一个临时票据,该票据一个公众号每天的请求次数有限,一个票据有效期为两小时,获取的方式比较复杂:

    我用的是node后台(egg框架),在node中首先拿appId跟appSecret换取access_token,请求地址:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=【你的appid自己写】&secret=【你的appSecret自己填】; 再用请求到的access_token换取jsapi_ticket,请求地址:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=【你请求到的token】&type=jsap(最好的情况还是前端还是老老实实发个请求到后台拿各个处理好的参数算了)

    下面开始各个准备:

    ①.首先在头部引入请求文件(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里

  5. 插件内容(正式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)。

  6. 调用:

    如图所示,当router处理完成后在应该配置的页面下,调用we_config()主函数即可,前提是你在router处理过程中有保存share_data。

三、总结:

这里提供的版本是前端请求后台的jsapi_ticket,但其实最好的就是在后台直接处理各个参数,然后一次性返回给前端,至于怎么做...下次如果要写一篇node后台的,我再补充node后台的相关操作。

总的来说,这个插件写完调用起来很方便,你只要缓存一下标题跟描述,然后换掉插件里的appId,main.js里面在router后根据判断调用起主方法;真的很小白~特别小白~

下次选题

egg框架的node后台搭建与使用

或者是

前端直传阿里云oss与node后台传oss


前端工程师的吹水领域!

每周看心情更新~~~

文笔不好,不喜勿喷!

如有雷同,算你倒霉!

欢迎关注我们公司的项目

《中山好人好事》



阅读原文

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权