vue接入微信小程序

因工作需要这两天看了下微信web-view，目前web-view还很不完善，但是基本功能还能用，先记录一下刚学到的，以后再更新；

vue接入微信

目前只使用了web-view的部分功能，比如路由跳转和收发消息；
比如这几个功能：

首先在vue的package.json中添加依赖：

 "dependencies": {
    "weixin-js-sdk": "1.3.2"
  },

然后在.vue文件中的script中导入：

<script>
import * as wx from "weixin-js-sdk";//有时候这样不行，就这样引入 import  "weixin-js-sdk"; 

export default {
created() {
	//先判断工程是否是小程序，这个方法是异步的
	//小程序环境：执行顺序：1、开始 2、结束 3、进入方法 4、是小程序环境
	//非小程序环境：执行顺序：1、开始 2、结束 （不会进入getEnv方法）
	console.log("开始");
	wx.miniProgram.getEnv((res) => {
	console.log("进入方法")
          if (res && res.miniprogram) {//小程序环境 res.miniprogram是true/false
              console.log("是小程序环境")
          } 
      });
      console.log("结束");
}
  methods: {
    sendMsgToMiniProgram() {
    //这个是向小程序发送参数，但是限制很严格：
    //网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次postMessage 的参数组成的数组
      wx.miniProgram.postMessage({data: {msg: "vue向微信小程序发来贺电"}})
      //这个是web-view跳转到其它小程序页面的方法，还有其它 这里只列举了这一个，用户路由跳转；
       wx.miniProgram.navigateTo({url: "/xxx/xxxx/xxxxx?id=xxxx"})
    },
  }
};
</script>

小程序接受消息

首先绑定message:

<web-view src="{{url}}" bindmessage="onHandler"></web-view>

然后在methods中接收:

Component({

    properties: {
        url: {
            type: String,
            value: ""
        },
    },

    methods: {
        onHandler: function (e) {
            //e.detail.data  这里的data是一个数组[{msg: "vue向微信小程序发来贺电"},{msg: "vue向微信小程序发来贺电"}]
           console.log(e)
        },
    }

});

先记录这，随着项目进度更新吧