开发技术学习

现在很多单页面应用都是通过vue来制件的，

在微信场景下就需要有分享功能了。

前端VUE代码：

import axios from 'axios';

axios.defaults.baseURL = 'http://example.adophper.com/wxshareObject';
export default {
  name: 'app',
  methods: {
      isWeiXin() {
        let ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          return true;
        } else {
          return false;
        }
      },
      wxInit(config) {
        wx.config({
          debug: false,
          appId: config.appId,
          timestamp: config.timestamp,
          nonceStr: config.nonceStr,
          signature: config.signature,
          jsApiList: [
            'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo'
          ]
        });
        wx.ready(function () {
          let links = 'http://example.adophper.com';   //分享出去的链接
          let title = 'vue学习课程';   //分享的标题
          let desc = '测试分享';  //分享的详情介绍
          let img = 'http://example.adophper.com/icon.png';
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: links, // 分享链接'
            imgUrl: img, // 分享图标
            success: function () {
              // 分享纪录
              alert("分享到朋友圈成功")
            },
            cancel: function () {
              alert("分享失败,您取消了分享!")
            }
          });
          wx.error(function(res){
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          })
        })
      }
  },
  mounted () {
      let old_this = this;
      if (this.isWeiXin()){
          let url = window.location.href;
          axios.get('/jssdk.php', {
              params: {
                  url: encodeURIComponent(url)
              }
          })
            .then(function (response) {
                console.log(response);
                if (response.data.status == 100) {
                  this.wxInit(response.data.data);
                }
            }.bind(this))
            .catch(function (error) {
              console.error(error);
            })
      }
  }
}

后端接口代码：

/*appid appsecret*/
$jssdk = new JSSDK("wx7cb720f0663xxxx", "526ce2e7a54cb9d6d4818e10dc2xxxxx");//官方下载的类文件

$url = isset($_GET['url']) ? urldecode($_GET['url']) : null;

$signPackage = $jssdk->GetSignPackage($url);

$data = array(
	'status' => 100,
	'message' => 'ok',
	'data' => $signPackage
);

echo json_encode($data);

exit;

vue 微信分享

参考资料：http://www.cnblogs.com/zhengweijie/p/6922808.html