二、微信jssdk授权

如果你页面中有用到分享、上传图片、微信支付等功能，那么需要先进行js-sdk授权。我这边封装成了2个方法：initConfig和setShare，方便在路由/页面切换的时候重复调用。

//main.js
import wxsdk from './config/wxsdk.js' //该模块提供initConfig和setShare方法，具体代码太长见github
Vue.prototype.wxsdk = wxsdk;//挂载到全局

//使用
 created() {
   this.wxsdk.initConfig(location.href.split("#")[0], () => {
     this.wxsdk.setShare(this.user.openId);
    });
 }

三、webpack-dev-server解决跨域

讲真的所有跨域解决方案都必须有服务端的参与，诚然这个问题是浏览器抛出的，但让前端去解决真的很冤。下面两个配置让你永远告别跨域烦恼。本地开发用webpack-dev-server，测试生产环境用nginx。

//接口根路径http://47.105.59.***:9090/zt-wx
//以vue-cli搭建的项目config举例 config/index.js
  dev: {
    proxyTable: {
      '/zt-wx': {
        target: 'http://47.105.59.***:9090',  //目标接口域名
        changeOrigin: true  //是否跨域
      }
    },
  }
//实际发起请求时的url
this.http.get(`/zt-wx/api/wx/info`).then(); //http是我自己对axios的再封装  

//nginx代理配置
server {
    location /zt-wx {
		proxy_pass http://47.105.59.***:9090;
    }
}        

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

//config/store.js
const store = new Vuex.Store({
    state: {
        user: {}
    },
    mutations：{
        updateUser(state, data){
            state.user = data;
        }
    }
})
//在组件中使用
computed: {
    user() {
        return this.$store.state.user;
    }
}
//在需要的时候更新数据
this.$store.commit("updateUser", user);

//安装
npm install --save html2canvas
//引入
import html2canvas from "html2canvas";
//使用
const myPosterWrap = document.getElementById("posterWrap");
html2canvas(myPosterWrap).then(canvas => {
    this.posterSrc = canvas.toDataURL("image/png");
    this.uploadPosterImg(this.posterSrc);
});

十、css黑科技之放置指定比例的图片

就是把不定宽图片按指定比例显示，直接上码（1：1.25）。

//html
<div class="poster-img-wrap">
    <div class="poster-img-place"></div>
    <img class="poster-img" :src="user.picAddress" alt="">
</div>

//less
.poster-img-wrap {
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;
    .poster-img-place {
        width: 100%;
        padding-top: 125%;
    }
    .poster-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.p-index{
   min-height: calc(100% + 1px);
}