web微信开发技巧总结

时间：2022-08-06 19:18:01 | 来源：网站运营

时间：2022-08-06 19:18:01 来源：网站运营

新项目，不管是手机端还是 PC 端基本上都会有微信登录、微信支付，甚至还会做一个微信公众号。整个体系庞大，资料也千奇百怪。所以特地总结一篇微信开发的技巧和相应资料来帮助你提高开发效率。

微信登录

PC 端“常规”微信登录

官方推荐的 PC 端登录是通过微信开放平台创建应用来实现的。凡是创建的应用都能用下面微信提供的链接来进行扫码授权操作

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 对链接进行处理呢，我搜了一些资料总结了俩条我认为最重要的理由： 1. url 链接支持的字符有限，不进行编码是无法识别的 2. url 规定了一些特殊字符，如 &, ?, # 要是链接中带有这些字符会被误认

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

let a = 'http://xuyuechao.top'// 编码let b = encodeURIComponent(a)// 解码decodeURIComponent(b)这里需要注意别用 encodeURI 。他是不会对 ASCII 字母和数字进行编码的。

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

// 用户同意授权redirect_uri?code=CODE&state=STATE// 用户不同意授权redirect_uri?state=STATE实现这一步前端的使命基本上已经完成了，因为核心 code 到手剩下的就是后端的事情了，简单描述一下后续步骤： 1. 前端将 code 通过 ajax 传给后端 2. 后端通过 code, appid, appsecret 获取到用户的基本信息生成 token 传给前端作为登录凭证 3. 前端保存 token ，之后的请求携带 token 发送给后端即可

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







这种方式是强制性跳转到新页面并不友好，所以微信还提供了另外一种 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 完成的。相关文章我已经帮你找好了，在这里在罗列一遍好让你非常容易的找到相关文章： - PC 端常规微信登录文章链接: 文章地址 - PC 端非常规微信登录文章链接:文章地址 - 手机端登录文章链接: 文章地址

微信支付

手机端微信支付

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

俩种支付的共同点

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. 轮询后端接口获取支付结果

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

全文总结

可以看到整个微信登录和支付过程并不复杂，但是新手刚开始操作肯定会碰到各种问题。其中签名不对是最麻烦的，因为他需要前端提供回调地址，而回调地址的设置又通常不是前端设置的，我这里给出的建议是出现类似问题可以优先查找白名单和回调地址的配置跟前端设置的是否一致。

再安利一波文章中提到的各种连接地址 - PC 端常规(开放平台)微信登录文章链接: 文章地址 - PC 端非常规(公众号)微信登录文章链接:文章地址 - 手机端登录文章链接: 文章地址 - 手机端微信支付文章连接:文章地址 - 手机端公众号支付文章连接:文章地址 - PC 端支付文章连接:文章地址

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