开发之路十五——vue开发笔记

ps:好记性不如烂笔头，记录开发vue过程中的点滴

1、路由传参（3种方式）

• params传参（显示参数）
  需要路由配合，也就是在地址后面追加参数

//路由
{
  path: '/child/:id',
  component: Child
}
//跳转+传参
this.$router.push({
    path:'/child/${id}',
})
//获取参数
this.$route.params.id

• params传参（不显示参数）
  这种方式，会在刷新页面时参数丢失

//路由
{
  path: '/child',
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
        id:123
    }
})
//获取参数
this.$route.params.id

• query传参
  刷新不会丢失数据，方式类似于第二种方式

//路由
{
  path: '/child',
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
        id:123
    }
})
//获取参数
this.$route.query.id

2、利用微信api(weixin-jsapi)

• 使用时开发者工具会报错，只要扫码结果能够拿去到就行，手机预览时，会报错，是由于微信比较严格，需要在公众号内打开此h5才能正常使用，需要发版后测试此功能。如果报错scanQRCode:fail, the permission value is offline verifying，则按照下列方式，再重试。

 // 1.在开发者工具地址栏访问以下地址：
 https://www.weixinsxy.com/jssdk/
 // 2.查看权限是否开启成功，测试下看返回是否scanQRCode:ok，即成功
 // 3.然后再访问本地的开发地址进行测试

// 下载安装命令
npm install weixin-jsapi --save
// 在main.js中引入 weixin-jsapi
import wx from "weixin-jsapi"; 
// 在main.js中注册 weixin-jsapi
Vue.prototype.wx = wx

<div class="scan" @click="wxScanCode()">扫描样本编号</div>
<script>
// vue 专用版本JS-SDK
import wx from "weixin-jsapi";
export default {
  data() {
    return {};
  },
 mounted() {
    this.wxApi();
  },
  methods: {
    //注册wxapi
    wxApi() {
      axios({
        url: `${BASE_URL}/wechat_jsapi_signature?appid=${APPID}&url=${location.href}`,
        method: "get"
      }).then(result => {
        console.log('result',result)
        // 后端返回的参数
        var timestamp = result.timestamp;
        var noncestr = result.nonceStr;
        var signature = result.signature;
        var appId = result.appId;
        wx.config({
          debug: false, 
          // debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名，见附录1
          jsApiList: [
             "scanQRCode"
          ]
        });
      });
    }，
    //调用扫码功能
    wxScanCode(){
      let that = this
      wx.ready(function() {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            that.data.number = resul !==undefined ?result:''
           }
        });
      });
    }
  }
};
</script>