バカにvueを使ってウェブページの微信の共有機能を開発することを教えます

まず、あなたはvueになります.次に、微信の公衆番号を持っています.appid 2. 鍵はあなたの微信認証身分証明書に相当します.くだらないことを言わないでください.次の直接的なコメント方法 [ ]リンクを追加して、公衆番号の基本的な構成の中で自分のidを見てipホワイトリストを設定することを覚えています.つまり、あなたのセキュリティドメイン名の下で直接vueコードの構成をメモします.

   npm install weixin-js-sdk         cnpm  

         //   
 import wx from 'weixin-js-sdk';
    main.js  

// import WXConfig from './assets/js/sdk' //     

// Vue.prototype.WXConfig = WXConfig;

次にまずsdkを作成する.js

import wx from 'weixin-js-sdk'			//  sdk  

const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']
										//     API
import axios from 'axios'
// 
 
//     var getMsg = res.data.data;
function getJSSDK(url, dataForWeixin) {
    // axios.get('').then(function(res) {    encodeURIComponent(url)
    axios.get(' ' ).then(res => {
      console.log(res)
      window.wx.config({
       
        debug: true, //       ,     api         alert  ，         ，   pc   ，       log  ，  pc      。
        //                       
        appId: 'wx8beb9047b24697e2', //   ，        
        timestamp: res.data.data.timestamp, //   ，        
        nonceStr: res.data.data.nonceStr, //   ，        
        signature: res.data.data.signature, //   ，  
        jsApiList: [
            'onMenuShareAppMessage',
            'onMenuShareQQ'
        ] //   ，     JS    
      })
      console.log(res) //    
      window.wx.ready(function () {
        window.wx.onMenuShareAppMessage({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) { },
          success: function success(res) {
            console.log('   ');
          },
          cancel: function cancel(res) {
            console.log('   ');
          },
          fail: function fail(res) {
            alert(JSON.stringify(res));
          }
        });
        // 2.2   “      ”    、              
        window.wx.onMenuShareTimeline({
          title: dataForWeixin.title,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            // alert('          ');
          },
          success: function success(res) {
            //alert('   ');
          },
          cancel: function cancel(res) {
            //alert('   ');
          },
          fail: function fail(res) {
            alert(JSON.stringify(res));
          }
        });
      // 2.3   “   QQ”    、              
      window.wx.onMenuShareQQ({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            //alert('       QQ');
          },
          complete: function complete(res) {
            alert(JSON.stringify(res));
          },
          success: function success(res) {
            //alert('   ');
          },
          cancel: function cancel(res) {
            //alert('   ');
          },
          fail: function fail(res) {
            //alert(JSON.stringify(res));
          }
        });
        // 2.4   “     ”    、              
        window.wx.onMenuShareWeibo({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            alert('         ');
          },
          complete: function complete(res) {
            alert(JSON.stringify(res));
          },
          success: function success(res) {
            alert('   ');
          },
          cancel: function cancel(res) {
            alert('   ');
          },
          fail: function fail(res) {
          alert(JSON.stringify(res));
          }
        });
      })
      window.wx.error(function (res) {
        alert("      ");
      });
    })
  }
  export default {
    //   JSSDK
    getJSSDK: getJSSDK
  }

```javascript

index.htmlファイルの導入は公式で最新のインタフェースを見て、自分で対応するインタフェース``vue共有モジュールの中で1つのイベントを作成して自分で呼び出します

//         
    weihao(){
        let url = window.location.href.split('#')[0];
        let obj = {
        title: this.userInfo.UserName,		//    
        desc: '    ',						//    
        linkurl: location.protocol+"//"+location.host+'/dist/#/show?id=' + this.userInfo.Id,//    
        img: this.userInfo.Photo,				//         
      }
      sdk.getJSSDK(url, obj)
    }
                                  sdk     
                         
    

注意:これは一般的な共有ではありませんパッケージappの共有支払いappの后ろで私は整理して整理して引き続きみんなに配布します同様にvue开発のappは広大なvueがappをする同志がvue开発の原生appの行列に参加することを望んでみんながvue开発appの行列の中でqq群に参加することを望みます: