Vue移动端开发总结

所有元素在手机端点击的时候不会产生阴影

// 所有元素在手机端点击的时候不会产生阴影
* {
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

平滑

  height: 100%;
  -webkit-overflow-scrolling: touch !important;
  overflow: scroll;

微信分享

微信官方文档

安装

npm install weixin-js-sdk --save

引入微信sdk

import wx from 'weixin-js-sdk' //微信分享

使用

created(){
this.WXshare()
},
methods:{
    // 分享功能
  WXshare() {
    //请求后台返回签名
   this.$http.get("server/business/IntegralShareH5.ashx?cmd=getShareConfig", {
      params: {
        url: encodeURIComponent(location.href.split('#')[0])
      }
    }).then(e => {
      this.wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wx26961c9858d8e183', // 必填，公众号的唯一标识
        timestamp: e.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: e.data.nonceStr, // 必填，生成签名的随机串
        signature: e.data.signature, // 必填，签名，见附录1
        jsApiList: [
          'onMenuShareAppMessage', //分享朋友
          'onMenuShareTimeline', //分享朋友圈
          'onMenuShareQQ', //分享qq
          'onMenuShareQZone', //分享qq空间
        ]
      })

    })
    this.wx.ready(() => {
      var ImgUrl = '图片地址' //注意图片地址要300x300,且为jpg格式。
      var shareContent = {
        title: 'xxx', // 分享标题
        desc: 'xxx', // 分享描述
        link: 'https://www.xxxx.com', // 分享链接，该链接域名必须与当前企业的可信域名一致
        imgUrl: ImgUrl, // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      };
      //分享到朋友圈
      this.wx.onMenuShareTimeline({
          title: 'xxx', // 分享标题
          link: 'https://www.xxxx.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: ImgUrl, // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
          },
        }),
        this.wx.onMenuShareAppMessage(shareContent);
        this.wx.onMenuShareQQ(shareContent);
        this.wx.onMenuShareQZone(shareContent);
    })
},
}

ps：路由设置为 mode: 'hash', 可在任意页面进行分享。