Methods of using WeChat jssdk in Vue application in combination with vux

vux WeChat sharing instructions

The sharing interface can only be used by certified public accounts, and the domain name must be registered and set in the WeChat background.

First make sure that the requirements for using jssdk have been met before developing.

Introduced

Introduce globally in:

import { WechatPlugin } from 'vux'
(WechatPlugin)

() // You can directly access the wx object.

Outside the component

Considering that you need to call the config method for configuration after introducing the plugin, you can access the wx object outside the component.

jssdk requires a signature configuration interface. You can directly use VUX AjaxPlugin encapsulated by Axios

import { WechatPlugin, AjaxPlugin } from 'vux'
(WechatPlugin)
(AjaxPlugin)

('/api', ({data}) => {
 ()
})

Used in components

Then any component can access the wx object through this.$wechat.

export default {
 created () {
 this.$({
  title: 'hello VUX'
 })
 }
}

What I am using is an external component definition and an internal component call

Introduce the corresponding file

import Vue from 'vue'
import { WechatPlugin } from 'vux'
(WechatPlugin)//Using WeChat plug-in

//Share on WeChatconst wxShare = (obj,callback)=&gt;{
 // (obj,callback);
 function getUrl(){
  var url = ;
  var locationurl = ('#')[0];
  //(locationurl);

  return locationurl;
 }
 if(obj){
  var title = ==undefined||==null?'Spring Water System':;
  var link = ==undefined||==null?:;
  var desc = ==undefined||==null?'Spring Water System':;
  var imgUrl = ==undefined||==null?'src/img/':;
  var debug = ==true?true:false;
 }else{
  alert('Please pass the sharing parameters');
 }
 //Share on WeChat ("http://Get wx_token address").then(response => ()).then(data => {  // ('WeChat WeChat',data)  var wxdata = data;
   = debug;
  = [
   // All APIs to be called must be added to this list   'onMenuShareTimeline',//Share to friends circle   'onMenuShareAppMessage',//Share with friends   'onMenuShareQQ',//Share to QQ   'onMenuShareQZone',//Share to QQ Space   'onMenuShareWeibo'//Share to Tencent Weibo  ];
  (wxdata);


  (function () {
   //Share to friends circle   ({
    title:title, // Share the title    link: link, // Share link    desc: desc, // Share the description    imgUrl:imgUrl, // Share icon    success: function () {
     callback &amp;&amp; callback();
     // The callback function executed after the user confirms the sharing    },
    cancel: function () {
     // The callback function executed after the user cancels the sharing    }
   });
   //Share to friends   ({
    title: title, // Share the title    desc: desc, // Share the description    link: link, // Share link    imgUrl: imgUrl, // Share icon    type: '', // Sharing type, music, video or link, if not filled in, the default is link    dataUrl: '', // If the type is music or video, you want to provide a data link, the default is empty    success: function () {
     // The callback function executed after the user confirms the sharing     callback &amp;&amp; callback();
    },
    cancel: function () {
     // The callback function executed after the user cancels the sharing    }
   });
   //Share to QQ   ({
    title: title, // Share the title    desc: desc, // Share the description    link: link, // Share link    imgUrl: imgUrl, // Share icon    success: function () {
     // The callback function executed after the user confirms the sharing     callback &amp;&amp; callback();
    },
    cancel: function () {
     // The callback function executed after the user cancels the sharing    }
   });

   //Share to QQ Space   ({
    title: title, // Share the title    desc: desc, // Share the description    link: link, // Share link    imgUrl: imgUrl, // Share icon    success: function () {
     // The callback function executed after the user confirms the sharing     callback &amp;&amp; callback();
    },
    cancel: function () {
     // The callback function executed after the user cancels the sharing    }
   });

   //Share to Tencent Weibo   ({
    title: title, // Share the title    desc: desc, // Share the description    link: link, // Share link    imgUrl: imgUrl, // Share icon    success: function () {
     // The callback function executed after the user confirms the sharing     callback &amp;&amp; callback();
    },
    cancel: function () {
     // The callback function executed after the user cancels the sharing    }
   });
  })
 })
}

Output

export {wxShare}

Called within the component

import { wxShare } from 'Encapsulate the js path of the wxShare function'
 export default {
  name:'Home',
  data() { //Options/Number import { ViewBox } from 'vux' export default {
  name:'Home',
  data() { //Options/Data   return {

   }
  },
  methods: { //Event Handler
  },
  components: { //Define components
  },
  created() { //Life Cycle Function   wxShare({
    title: 'Share title', // Share the title    desc: 'Share description', // Share the description    link: , // Share link    imgUrl: 'http://Picture address', //Share icon   // debug:true
   },function(){//Share the callback function after successful sharing
   });
  }

 }

The above method of using WeChat jssdk in Vue application combined with vux is all the content I share with you. I hope you can give you a reference and I hope you can support me more.