在第三方页面调用微信接口

这两天在作一个微信上的web项目, 项目很简单, 大部分是表单提交和验证的代码, 考虑到速度和基本样式, 选择用vue + muse-ui来作, 初稿很快就完成了, 而后到了老板提需求的阶段, 表示要在页面上作一个和微信扫一扫同样的功能来识别二维码读取二维码信息, 主要仍是为了让用户减小表单输入的操做难度, 咋一听这怎么可能呢, 微信扫一扫是创建在app的基础上的, web页面是不管如何都没法调取原生应用还要修改原生应用更加不可能的啊, 除非利用react native或者weex, 偶然间同事跟我提及顺丰的扫一扫识别条码的功能, 是在公众号的web页面上实现的, 我拿来一看, 这是调的微信扫一扫的功能啊, 难不成微信还有内部的接口, 而后下面就是翻阅微信公众平台文档js-sdk的收获和一些坑

步骤

1. 进入文档映入眼前的及时js-sdk的文档目录, 包括概述, 使用步骤1234..., 调用说明等等, 很详细有木有, 看了才知道, 首先介绍一下js-sdk

经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

官方原文, 功能仍是很不错的

2. 绑定域名 首先设置JS接口的安全域名, 在"公众号设置"->"JS接口安全域名"里能够设置你将要调用接口的域名

3. 引入js文件 写文章的时候, 已经更新到了1.4.0res.wx.qq.com/open/js/jwe…, 在vue中引入能够引入它的npm包, 能够再npm官网搜索weixin-js-sdk, 或者直接使用yarn add weixin-js-sdk下载到项目中

4. 在页面加载时配置接口注入权限验证

import wx from 'weixin-js-sdk';
export default {
  methods: {
    configWX() {
      this.$axios.get('api/xxx?url=' + location.href.split('#')[0])
        .then(res => {
          res = res.data
          // 配置
          wx.config({
            // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，
            // 能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
            debug: true,
            appId: 'your appId', // 必填，公众号的惟一标识
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonceStr, // 必填，生成签名的随机串
            signature: res.signature,// 必填，签名
            jsApiList: [ 'scanQRCode' ] // 必填，须要使用的JS接口列表
          });
        })
        .catch(err => {
          alert('error: ' + err )
        })
    }
  },
  created() {
    this.configWX();
  }
}
复制代码

官方的步骤就是这么下来的, 并且它用了特殊的文体叙述写法----倒序, 我开始也对于配置文件中的字段一脸懵B, 这些东西是从哪里来的啊, 所以, 上面代码有几点须要解释一下

• 关于后台, 后台在用户进入这个页面以前, 已经经过调用微信的接口https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET获取到了access_token, appid和secret可在"基本配置"->"公众号开发信息"中查询到相关信息, access_token这个字段是公众号的全局惟一接口调用凭据，公众号调用各接口时都需使用access_token

  参数	是否必须	说明
  grant_type	是	获取access_token填写client_credential
  appid	是	第三方用户惟一凭证
  secret	是	第三方用户惟一凭证密钥，即appsecret

  返回的格式以下:

  {"access_token":"ACCESS_TOKEN","expires_in":7200}
  复制代码

• 用第一步拿到的access_token 采用http GET方式请求得到jsapi_ticket（有效期7200秒，开发者必须在本身的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi, 获取jsapi_ticket时, type固定为jsapi, 获取到jsapi_ticket以后，就能够生成JS-SDK权限验证的签名了。关于签名算法官方有详细文档, 可自行查阅.

• 签名完成以后基本就接近前端须要的数据了, 再来看一下前端须要什么

  appId: 'your appId', // 必填，公众号的惟一标识
  timestamp: res.timestamp, // 必填，生成签名的时间戳
  nonceStr: res.nonceStr, // 必填，生成签名的随机串
  signature: res.signature,// 必填，签名
  复制代码

  appId能够在公众号上查到, timestamp是时间戳, nonceStr是后台设置的随机串, signature就是签名了, 解释了仍是一脸懵B有木有, 一图胜千言

  

  这下应该懂了, 后台的签名算法未必正确, 可使用微信JS接口签名校验工具检验.

• url参数设置为location.href.split('#')[0]是为了考虑vue用户使用hash模式致使的问题, 我用的是history模式, 可是也有其余问题, 后面会讲

5. 个人项目是用户在点击按钮以后才调用扫一扫接口, 然而有些功能好比获取用户信息可能在已进入页面的时候就须要调用, 就会用到两个接口, 在created钩子中调用

wx.ready(function(){
    // config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，
    // 因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
});
wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过时致使验证失败，
    // 具体错误信息能够打开config的debug模式查看，
    // 也能够在返回的res参数中查看，对于SPA能够在这里更新签名。
});
复制代码

6. 调用扫一扫 在调用功能以前, 最好验证一下接口的可用性

wx.checkJsApi({
  jsApiList: ['scanQRCode'], // 须要检测的JS接口列表，
  success: function(res) {
    // 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});
复制代码

wx.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 能够指定扫二维码仍是一维码，默认两者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});
复制代码

7. 在config中将debug设置为true, 在移动端会以弹窗形式弹出debug的信息, 我遇到过诸如签名错误, 缓存问题, 兼容问题等引起的一系列问题, 这里坑确实很多, 可是由于没作笔记, 先前的问题大多难以还原, 这里粗略记下两个

• android能够调用, ios却调不了, 开启debug后提示the permission value is offline verifying, 网上各类说法都有, 我不肯定正确, 但个人确实不是他们说的问题, 个人问题产生的缘由是部分ios版本不支持pushState, 而我恰巧使用了它, 彷佛牵扯到KWwebview和UIwebview, 我不是很懂, 不过官方有介绍, 我只须要把全部引入当前调用页面的router-link所有替换成a标签便可.
• 还有签名错误问题, 配合开发是须要很大的沟通成本的, 幸亏有微信JS接口签名校验工具, 这个东西仍是很不错的, 为开发者确实解决了不少沟通问题

题外

• 还有部分ios上的兼容问题, 好比我在vue中使用scss做为扩展语言, 在设置muse-ui的组件内样式时, 有时会用到穿透语法/deep/, 致使个人样式失效, 删除/deep/就行了, 若是设置组件样式不成功, 则新建一个.scss文件, 在main.js中导入便可

以上就是在微信公众号上搭建一个简单表单项目的心得, 共同进步