e微信微信官方账号开发踩踏记录(vue开发微信官方账号网页)

JS-SDK是微信公众平台为web开发者提供的基于微信的web开发工具包。通过使用微信JS-SDK，web开发者可以高效地使用微信拍照、选图、语音、定位等手机系统。同时，他们可以直接使用微信独有的分享、扫描、卡券、支付等功能，为微信用户提供更好的web体验。

如果要在微信官方账号的嵌入式h5中实现微信分享、支付等功能，就不得不引入js-sdk。使用js-sdk有一个关键环节，就是通过config接口注入权限验证配置，配置中有一个签名参数需要服务器获取，这里就不讨论了。你可以通过官方文件了解更多。

哈希还是历史？在上一篇文章中，我推荐你在vue中配置Vue -路由器使用哈希模式。那么哈希模式和历史模式有什么区别呢？我举个栗子的例子。假设我们都是通过http://domain.com进入，然后需要jssdk跳转到/jssdk的路由的页面。然后，签名验证时获得的实际js-sdk的当前页面url在ios和andrioid之间是不同的。在这里，我通过表格显示它:

真相都在形式里。我不擅长表达自己。原谅我的懒惰。

如果你没有访问和分享指定页面的需求，hash模式很方便，但是我没有办法，只能用微信分享。如果使用hash模式，分享地址，微信会自动处置#后面的部分，这样我就无法分享指定页面给好友，也无法给好友。我能怎么做呢？我只能用脑子解决历史问题。其实很容易解决，就是iOS需要使用第一次进入页面的URL来获取签名，Android每次切换路由都会重新配置签名。这里我列举两个方案:

页面的url记录在门户文件中。创建页面组件后，ios获取记录的URL并对其进行签名。android获取当前路线(window . location . href . split( # 39；#')微信支付版:

如果只需要在微信官方账号调用支付，两种方式都可以。由于作者已经使用js-sdk访问了其他函数，所以我在这里选择了chooseWXPay。

接入步骤在其他功能都接入成功的前提下，收款非常快捷方便。作者列举了如下主要步骤:

微信公众平台中配置了js安全接口域名(例如www.imwty.com)，这是调用js-sdk的前提，微信官方账号支付也是基于JS-SDK；

支付目录设置在微信支付平台。请参考微信支付开发文档。这里需要说明的是，无论你需要进行支付的页面路由是什么，都必须进行配置，并且需要在后面加上/(如www.imwty.com/pay/)。

调用js-sdk签名配置(微信. config)，上面已经提到了。

在点击支付按钮的逻辑中，调用了wechat.chooseWXPay()方法，其中也涉及到支付签名，需要从服务器获取签名信息。

注意:访问支付页面时不要遗漏/。微信在调用step 4时会严格比对你的页面路由是否与支付平台中设置的路由一致。

这里的编码主要是展示作者在步骤4中的写法，仅供参考。

...methods(){ handler pay(){ * * bold text * * let self = this//make payment signature API util . get( # 39；/API/jssdk/pay # 39；，{amount: this.amount})。然后(函数(wxmsg) {self。$ we chat . choosewxpay({//支付签名时间戳，注意微信jssdk中使用的时间戳字段都是小写的。但是最新版本的支付后台用于生成签名的时间戳字段名要大写S字符appid: wxmg.appid，timest: wxmg.timest，non centr:wxmg . non centr，//支付签名的随机字符串，不超过32位package: wxmg.package，//统一支付接口返回的prepay_id参数值，提交格式如下:Prepay _ ID = * * *)sign type:wxmg . sign type，//签名方法，默认为#39SHA1 # 39；，使用新版本的付款需要传入 # 39；MD5 # 39Pay: wxmsg.paysign，//支付签名成功:function (res) {//支付成功回调函数}，Cancel: function (res) {//支付取消回调函数}，error: function (res) {//支付失败回调函数}})。Catch (function () {...}}相关建议:

微信官方账号微信开发配置常见错误信息汇总

微信官方账号中微信开发的详细介绍

主机参考微信微信官方账号使用姿势正确！获得您意想不到的资源！以上是vue微信微信官方账号开发的踩踏记录详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• Vue微信官方账号开发踩点记录（vue微信官方账号开发）

本文由主机参考刊发，转载请注明：e微信微信官方账号开发踩踏记录(vue开发微信官方账号网页) https://zhujicankao.com/81217.html