引入weixin jssdk

package.json

@@ -15,9 +15,11 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "hex-sha1": "^1.0.2",
     "vant": "^2.2.14",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/Pay.vue

@@ -51,6 +51,8 @@
 
 <script>
 import remoteApi from '@/api/remoteApi'
+import wx from 'weixin-js-sdk'
+import hex_sha1 from 'hex-sha1'
 
 export default {
   data() {
@@ -77,6 +79,48 @@ export default {
       return (this.kwh* this.price).toFixed(2);
     }
   },
+  created () {
+    var appId = 'wxe598c699aa68cffe'
+    var timestamp = (new Date()).getTime()
+
+    var fullStr = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+    var nonceStr = ''
+
+    for(var i=0;i<10;i++){
+      nonceStr += fullStr.charAt(Math.floor(Math.random()*fullStr.length))
+    }
+
+    var url = window.location.href.split('#')[0]
+
+    //服务器端通过access_token获取 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
+    var ticket = 'sM4AOVdWfPE4DxkXGEs8VAMadDORtDxQLtMKXqk9xSQE7OmFwIWBf7X3rxflmFXgENu66LRawd1bYAjz89QM2w'
+
+    //注意这里noncestr中的s是小写
+    var plainText = `noncestr=${nonceStr}&jsapi_ticket=${ticket}&timestamp=${timestamp}&url=${url}`
+    
+    console.log(`plainText="${plainText}"`)
+  
+    var signature = hex_sha1(plainText)
+
+    console.log(`signature=${signature}`)
+
+    wx.config({
+      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+      appId: appId, // 必填，公众号的唯一标识
+      timestamp: timestamp, // 必填，生成签名的时间戳
+      nonceStr: nonceStr, // 必填，生成签名的随机串
+      signature: signature,// 必填，签名
+      jsApiList: ['checkJsApi','chooseWXPay'] // 必填，需要使用的JS接口列表
+    });
+
+    wx.ready(function(){
+
+    });
+
+    wx.error((error)=>{
+      console.log(error)
+    });
+  },
   mounted () {
     var roomId = this.$route.query.roomId;