web微信开发技巧总结

时间  2019-11-06
标签 web 微信 开发 技巧 总结 栏目 HTML 繁體版
原文   原文链接

新项目，不论是手机端仍是 PC 端基本上都会有微信登陆、微信支付，甚至还会作一个微信公众号。整个体系庞大，资料也千奇百怪。因此特意总结一篇微信开发的技巧和相应资料来帮助你提升开发效率。php

微信登陆

PC 端“常规”微信登陆

官方推荐的 PC 端登陆是经过微信开放平台建立应用来实现的。凡是建立的应用都能用下面微信提供的连接来进行扫码受权操做html

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
复制代码

链接中包含如下参数：前端

能够看到 response_type, scope 都是写死的。appid 会在你建立应用的时候给你（固然还有 AppSecret）。state 主要是为了用于验证是不是别人假冒的请求。重点是 redirect_uri。当用户扫码以后微信会重定向当前页面跳转到 redirect_uri 指向的地址。这个连接须要进行 urlEncode 进行重定向。为何须要 urlEncode 对连接进行处理呢，我搜了一些资料总结了俩条我认为最重要的理由：java

  1. url 连接支持的字符有限，不进行编码是没法识别的
  2. url 规定了一些特殊字符，如 &, ?, # 要是连接中带有这些字符会被误认

对 url 进行编码也很简单，下面的 js 代码直接拷贝便可android

let a = 'http://xuyuechao.top'
// 编码
let b = encodeURIComponent(a)
// 解码
decodeURIComponent(b)
复制代码

这里须要注意别用 encodeURI 。他是不会对 ASCII 字母和数字进行编码的。web

到了这里一个完整的微信受权连接就已经有了，经过 a 连接打开一个新页面或者是经过 js 打开一个新页面均可以。这个受权连接打开的页面会带有一张二维码，这时候用户扫码分为俩种操做：赞成受权和不一样意受权。而他们最大的不一样是跳转到重定向链接的时候是否带有 codeajax

// 用户赞成受权
redirect_uri?code=CODE&state=STATE
// 用户不一样意受权
redirect_uri?state=STATE
复制代码

实现这一步前端的使命基本上已经完成了，由于核心 code 到手剩下的就是后端的事情了，简单描述一下后续步骤：后端

  1. 前端将 code 经过 ajax 传给后端
  2. 后端经过 code, appid, appsecret 获取到用户的基本信息生成 token 传给前端做为登陆凭证
  3. 前端保存 token ，以后的请求携带 token 发送给后端便可

上面的那种是打开新窗口的模式，效果以下图：api

这种方式是强制性跳转到新页面并不友好，因此微信还提供了另一种 JS 的方式，在当前页面打开一个 iframe 窗口来提供整个网站的流畅性。步骤以下：数组

  1. 页面引入以下 JS
<script>http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
</script>
复制代码
  1. 在须要使用微信登陆的地方实例如下JS对象
var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
 state: "",
 style: "",
 href: ""
});
复制代码

效果以下：
用户扫码获取到 code 以后就跟上面的操做同样了。这些信息均可以经过微信文档看到（ 文档地址）官方文档的资料也更加清楚详细。这里只是帮你简单的顺顺思路

PC 端“不常规”微信登陆

微信登陆扫码是能够关注公众号的哦，这里就用到了一种很是规登陆方式。优势主要有二：

  1. 能够作出更美的界面，上面提供的 js 登陆方式是打开一个 iframe 页面确定是不美观的，并且也不可控。此方法只须要一个二维码，而二维码你爱怎么内嵌就怎么内嵌因此效果要强大的多。特意找了张效果图：

2. 提升微信公众号推广，这种方式扫描的二维码是直接关注公众号的，后期还能够给用户发消息。

废话很少说，立刻给你上实现步骤：

  1. 申请微信公众号，这里须要用到服务号（微信公众号一共是三种类型，订阅号、服务号、企业号想查看具体区别能够看这篇文章:文章地址）
  2. 后端调用微信的生成临时二维码接口将二维码和二维码惟一凭证返回给前端，前端使用凭证轮询后端提供的用户是否扫码接口
  3. 用户扫码以后微信会通知后端，后端将此凭证的类别变为用户已扫码
  4. 前端轮询的接口有告终果进行相应的操做

能够看到这个方法对于前端来讲更简单，定义一个 img 标签，获取到后端返回的二维码地址将 img 标签的 src 属性修改成这个地址便可。而后开启轮询访问接口。相关资料可参考这篇文章：文章地址

手机端登陆

先声明此处特指微信内网页登陆方式

这种方式跟上面提到的 PC 端普通登陆方式基本相似，废话很少说上实现步骤

  1. 建立微信服务号，获取 appid 和 appsecript（这个前端用不到，只对后端有用）
  2. 拼写对应的跳转连接，参数跟上文中的 PC 端参数基本相似，因此此处就不说明了
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
复制代码

只获取用户的 openid 不须要用户受权的静默连接 scope=snsapi_base

须要用户受权，获取用的昵称、性别、所在地 scope=snsapi_userinfo

  1. 相同的用户若是是须要用户受权的操做也分为俩种状况赞成受权和不一样意受权。区别也仅仅是重定向的连接里是否带有 code
// 用户赞成受权
redirect_uri?code=CODE&state=STATE
// 用户不一样意受权
redirect_uri?state=STATE
复制代码
  1. 将 code 传递给后端获取 token，用户信息完成登陆操做

注意：redirect_uri 的连接须要在微信提供的白名单里

微信登陆总结

我的感受微信最麻烦的是概念的理解以及相关文章的查找，这俩个是我在日常开发的时候特别头疼的。当你完成一次的时候概念其实能够变为具体的操做步骤，从上文能够看出不论是 PC 端仍是手机端都是使用微信提供的连接地址，而后用户进行了相应的操做以后进行 redirect_uri 重定向的时候带有 code 完成的。相关文章我已经帮你找好了，在这里在罗列一遍好让你很是容易的找到相关文章：

微信支付

手机端微信支付

手机端完成微信支付有俩种方式，一种采用微信支付文章中的支付方式，另一种采用微信公众号提供的支付方式。微信支付提供的支付方式实现比较简单，一样功能也少。我的推荐采用公众号提供的支付方式。

俩种支付的共同点

  1. 都须要先搞一个微信服务号来获得 appid 和 appsecript
  2. 都须要让用户登陆获取到用户的 openid （具体的步骤就能够看上面的手机端登陆方式了）

微信支付文章提供的支付方式

这种支付的重点在于微信内浏览器提供了一个叫 WeixinJSBridge 的全局变量。须要作的是判断是否在微信内。这里送你一个判断手机端环境的方式：

BrowserInfo = {
  isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
  isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
  isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
  isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
  isAli: Boolean(navigator.userAgent.match(/AlipayClient/ig)),
  isPhone: Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent))
}
复制代码

好了开始介绍支付步骤

  1. 判断是不是手机端微信内浏览器，是接着往下执行。不是按照产品制定的规则进行操做
  2. 从后端哪里获取微信支付须要的相关参数。参数能够看下文步骤四中提供的代码
  3. 在合适的位置执行 onBridgeReady 方法，这个方法存在的一个问题是你调用的时候他不必定初始化了所以须要判断一下是否初始化，方法以下
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}
复制代码
  1. 上面的 onBridgeReady 方法代码以下
function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
复制代码

整个支付流程到此结束，难点主要是 paySign 的签名方式，可是这一步是放在后端的，因此前端要实现这种支付方式仍是异常简单的。在 Java 中 package 这个参数每每会给你用别的名字，由于 package 在 java 中是一个关键字，因此后端无法直接给你返回正好符合格式的对象，这点有点不友好但也不要怪后端哦。 相关文档连接地址: 文档地址

公众号文章提供的支付方式

这种支付方式要比上面的流程更复杂，可是功能也多（主要指支付以外的功能）。直接上步骤

  1. 先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
  2. 界面引入微信提供的 js
// 注意这个是带有版本号的，最好经过下面提供的文章连接用最新的连接地址
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
复制代码
  1. 经过config接口注入权限验证配置(相关的参数都是后端维护的，直接请求后端提供的接口地址便可)
wx.config({
  debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的惟一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，须要使用的JS接口列表
});
复制代码
  1. 微信提供了 ready 和 error 钩子函数来通知你是否完成了相关操做。若是你须要一加载完成就执行相应的支付操做就须要将相关步骤写入 ready 函数里
wx.ready(function(){
  // config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
});
复制代码
  1. 调用微信支付提供的支付方法(相关的参数都是后端维护的，直接请求后端提供的接口地址便可),须要注意 chooseWXPay 这个方法要添加进微信配置时参数 jsApiList 的数组里
wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的全部使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});
复制代码
  1. 至此微信支付完成

相关文档连接地址: 文档地址

PC 端微信支付

这个咋说呢，重点所有在后端，前端要作的事情确实很少，步骤以下：

  1. 调用后端的接口获取微信支付二维码内容
  2. 根据内容生成二维码图片。我这里用的是 qrcode 的库
  3. 轮询后端接口获取支付结果

相关文档连接地址: 文档地址

全文总结

能够看到整个微信登陆和支付过程并不复杂，可是新手刚开始操做确定会碰到各类问题。其中签名不对是最麻烦的，由于他须要前端提供回调地址，而回调地址的设置又一般不是前端设置的，我这里给出的建议是出现相似问题能够优先查找白名单和回调地址的配置跟前端设置的是否一致。

再安利一波文章中提到的各类链接地址

为了文章更好的完善特意创建了群提供交流环境，固然支付遇到问题也能够进行提问。欢迎扫描下方二维码加群。手机端扫码不便，能够复制微信号进行添加。 xu645352780

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程