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

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

1. 安装vue-wechat-title:

npm install vue-wechat-title

2. 在mian.js 中引入：

import vueWechatTitle from 'vue-wechat-title'
Vue.use(vueWechatTitle)

3. 在路由中配置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: '拼团详情' }
}

4. 修改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。