PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » vue引用微信分享功能

vue引用微信分享功能

此文被围观76日期: 2017-07-17 分类 : 前端设计  标签:  ··

现在很多单页面应用都是通过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


本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.