Vue微信官方账号开发踩点记录（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中是不同的。这里我通过一个表格展示了它:

真相都在形式中。我不能很好地表达自己。原谅我偷窃。

如果不需要访问和分享指定页面，哈希模式非常方便，但我别无选择，只能用微信分享。如果使用哈希模式并分享地址，微信会自动处置#后的部分，那么我就无法将指定页面分享到朋友圈或朋友圈。我该怎么办？我只能用脑子解决历史问题。其实也很容易解决，就是iOS需要使用第一次进入页面的URL来获取签名，而Android每次切换路由时都会重新配置签名。我在这里列出了两个方案:

页面的url记录在门户文件中。创建页面组件后，ios获取记录的URL进行签名，android获取当前路由（window . location . href . split（‘#‘）微信支付版本:

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

访问步骤在其他所有功能都成功访问的前提下，接收付款非常方便。作者列出了主要步骤:

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

在微信支付平台中设置支付目录。请参考微信支付开发文档。这里需要说明的是，你需要支付的是你需要配置的，你需要在它后面加上/（例如www.imwty.com/pay/）。

调用js-sdk签名配置（wechat.config），如上所述。

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

注意:访问支付页面时，请不要遗漏/。微信在调用第四步时会严格比较您页面上的路线是否与支付平台中设置的路线一致。

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

...methods（）{ handler pay（）{ * * bold text * * let self = this//for payment签名API util . get（‘/API/jssdk/pay‘，{amount: this。金额}）。then（function（wxmsg）{ self。$微信。choosewxpay（{//支付签名时间戳，注意微信jssdk中所有使用的时间戳字段都是小写的。但是，最新版本的用于在支付后台生成签名的时间戳字段名需要大写S字符appid: wxmsg.appid，timestamp: wxmsg.timestamp，non castr:wxmsg . non castr，//支付签名随机字符串，长度不超过32位package: wxmsg.package，//统一支付接口返回的premium _ ID参数值，提交格式为:premium _ ID = * * *）sign type:wxmsg . sign type，//签名方法默认为“SHA1”要使用新的支付方式，您需要传入‘MD5‘paySign:wxmsg . paySign，//支付签名成功:function（RES）{//成功支付的回调函数}。cancel:function（RES）{//支付取消回调函数}，error:function（RES）{//支付失败回调函数}}）。catch（function（）{...}）}相关建议:

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

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

主机参考微信微信官方账号使用正确姿势！获得您意想不到的资源！

以上是vue微信官方账号开发的坑位记录详细内容。更多内容请关注主机参考其他相关文章！

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

• linux在嵌入式系统开发领域的广泛应用（嵌入式Linux应用场景）
• 微信官方账号开发详细介绍（微信官方账号开发方法）
• 传智和黑马微信公众平台开展视频资料共享（传智黑马培训学校怎么样）
• 传智和黑马的微信公众平台开发视频教程资源推荐（传智播客和黑马程序员是什么关系）
• 使用EasyWechat快速开发微信官方账号支付

本文由主机参考刊发，转载请注明：Vue微信官方账号开发踩点记录（vue微信官方账号开发） https://zhujicankao.com/106049.html