前端学习--Vue+H5开发公众号踩坑

1、设置微信公众号商城标题

  1. 安装vue-wechat-title:
npm install vue-wechat-title
  1. 在mian.js 中引入:
import vueWechatTitle from 'vue-wechat-title'
Vue.use(vueWechatTitle)
  1. 在路由中配置meta
{
    path: '/index',
    name: 'index',
    component: () => import('@/pages/views/index.vue'),
    meta: { title: '亲子购物节' }
},
{
    path: '/pack/detail/:productId',
    name: 'packDetail',
    component: () => import('@/pages/views/details/packDetail.vue'),
    meta: { title: '拼团详情' }
}
  1. 修改title
//方法1 在需要修改xx.vue页面里添加:
<div v-wechat-title="xxx"></div>
注:在某些环境里如果只在某一个页面里使用这种方式,而其他页面使用(3)那种路由配置的方式,标题可能不会发生改变。
解决方法:全部页面改为‘<div v-wechat-title="xxx"></div>’去设置

//方法2 在app.vue文件中:
<router-view v-wechat-title="$route.meta.title"></router-view>

2、支付功能(wx.chooseWXPay)
(1)前端调起微信支付时,timestamp参数名用小写
(2)调用wx.chooseWXPay方法时要加上appId、sign(传递的值和paySign一样)这两个参数

//公众号支付功能官方文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串,不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
  signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});
备注:prepay_id 通过微信支付统一下单接口拿到,paySign 采用统一的微信支付 Sign 签名生成方法,注意这里 appId 也要参与签名,appId 与 config 中传入的 appId 一致,即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。
上一篇:微信授权获取code/openid


下一篇:考研打卡小程序从零开发,打卡记录生活