vue 微信公众号开发

开题

上个月初入职了一家新公司。来了新公司很忙。本来计划是在上个月底写一篇博客的，写一下关于新公司的事情。
几度思考之后还是没写。也许做程序员接手别人的项目，都会说别人的项目多么的坑吧。但是我接手的这个两个
不是我一个人说坑。各种非人道的东西就不一一说了。整体开发效率降低。前几天前端来了一个同事，所以才有时间写这些。

正题 – vue 微信公众号开发

这个月帮一个朋友做一个微信公总号开发的项目。
之前做这类项目都是一个页面一个html的形式，单位用的rem。这次采用的是vue做的SPA单页应用,单位是vw。
这次在采坑的过程中有些需要总结一下的。

坑一 – 联通广告植入

应为需要给别人看效果，所以项目是部署在我的服务器上的。开始前一周还好，后面做到快要结束的时候，页面
给联通植入的广告，没办法关闭。为这个问题花了一些时间。开始想到的是采用https。我阿里云的免费证书都申
请好了，前端nginx也部署好了（可以看这里Nginx部署静态网页(2017.11.17添加https)）。可是后台的接口是http的。前端部署为https之后没法访问http的后台接口。
后台我也给他证书了，可是他Tomcat不会部署，阿里云有操作步骤，截图给他了还是不会。我的内心是崩溃的啊……
没得法，后台不能配合。只能继续使用http的了。但是这里就有一个问题了，为什么前端是https的网页不能访问后台的http接口。
目前还没答案。
为了解决广告，打电话给联通了，回答的也是非常业余。也打电话了阿里云了，让我提工单，没时间。后来没管了。
广告就偶尔才会出现。恶心的运营商，什么时候可以做一点好事。

坑二 – vm兼容性问题

之前做手机端一直使用rem,使用Flexible实现手淘H5页面的终端适配中介绍的。
使用淘宝的lib-flexible。这个也是一直做项目使用了两年多了。现在想换一下。
结果看见了如何在Vue项目中使用vw实现移动端适配这里作者介绍了详细的使用步骤和其他说明。
由于鄙人短视，没有仔细把作者文章看完，导致了项目在快要做完的时候，用苹果手机和safari浏览器测试的时候发现
img标签的图片显示不出来。我自己又之后安卓手机，一直到那个时候才发现这个问题。被这个问题困然了两三天。
后来在网上看见了[New]Vue项目使用vw实现移动端适配教程这篇文章才解决的。
实际在上面大漠的文章中就有，只是我没看见。
关于为什么苹果手机和safari浏览器中img标签图片显示不出来，请仔细看如何在Vue项目中使用vw实现移动端适配。
解决办法也在里面。
这个坑其实是自己挖的。

获取openid

其实这个过程去年初的时候做过微信网页开发–获取微信用户信息，只不过那时候是一个页面一个html这次是vue的SPA。
原理都是一样的。这是微信的文档：微信网页授权。按照步骤做。
首先是设置MP_verify_xxxx.txt文档再设置安全域名。
这里写图片描述
我的做法是：
直接把MP_verify_xxxx.txt放在dist目录下面。nginx的部署好之后就可以访问了。

大家看见了也auth.html文件，这个里面只做了一件事：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>hxproject</title>
  </head>
  <body>
  </body>
  <script>
    window.onload = function(){
      var redirect_uri = encodeURIComponent('http://xxx.com/#/home');
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri='+ redirect_uri +'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
    }
  </script>
</html>

之后在http://xxx.com/#/home页面的路径后面微信会给我们添加一个code参数，剩下的就是后台根据这个code参数去获取用户信息
返回给前端。其实做获取openid,一定要多看文档。剩下的没难度。

微信公总号支付 – 微信内H5调起支付

关于微信支付，可以看之前微信小程序开发(五)小程序支付-统一下单。
后台部分基本一样。
就是前端部分有区别:
微信公总号支付：

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
           "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
           "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
           "package":"prepay_id=u802345jgfjsdfgsdg888",     
           "signType":"MD5",         //微信签名方式：     
           "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
       }
   ); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

微信JSSDK-微信支付

wx.chooseWXPay({
    timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: '', // 支付签名随机串，不长于 32 位
    package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
    signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: '', // 支付签名
    success: function (res) {
    // 支付成功后的回调函数
    }
});

微信小程序支付

wx.requestPayment({
   'timeStamp': '',
   'nonceStr': '',
   'package': '',
   'signType': 'MD5',
   'paySign': '',
   'success':function(res){
   },
   'fail':function(res){
   }
})

其实支付前端需要的几个参数的名字和类型是一样的。只是后端有些差异。