快捷導(dǎo)航

vue-cli構(gòu)建項(xiàng)目下使用微信分享功能

更新時(shí)間：2018年05月28日 10:55:09 作者：web_xyk

這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧

一、index.html中引入微信官方分享js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

二、在src下的assets/js文件夾下新建wx.jsapi.js文件，把分享做成公用方法

使用axios來發(fā)送請(qǐng)求，參照 http://m.fzitv.net/article/141008.htm 配置vue-cli項(xiàng)目的axios

代碼：

import axios from 'axios'
export default {
 wxShowMenu : function() {
 axios.post('http://test.youxue.pxjy.com/wxtest').then(function(res){
  var getMsg = res.data.data;
  wx.config({
  debug: false,  //生產(chǎn)環(huán)境需要關(guān)閉debug模式
  appId: getMsg.appId, //appId通過微信服務(wù)號(hào)后臺(tái)查看
  timestamp: getMsg.timestamp, //生成簽名的時(shí)間戳
  nonceStr: getMsg.noncestr, //生成簽名的隨機(jī)字符串
  signature: getMsg.signature, //簽名
  jsApiList: [ //需要調(diào)用的JS接口列表
   'onMenuShareTimeline', //分享給好友
   'onMenuShareAppMessage', //分享到朋友圈
   'showMenuItems',
   'hideMenuItems'
  ]
  });
  wx.ready(function() {
  wx.checkJsApi({
   jsApiList: ["showMenuItems"],
   success: function(res) {
    wx.showMenuItems({
     menuList: [
      'menuItem:share:appMessage', //發(fā)送給朋友
      'menuItem:share:timeline' //分享到朋友圈
     ]
    });
   }
  });
  //分享到朋友圈
  wx.onMenuShareTimeline({
   title: "分享描述", // 分享標(biāo)題
   desc: "分享描述", //分享描述
   link: getMsg.shareLink,// 分享鏈接
   imgUrl: getMsg.imgUrl // 分享圖標(biāo)
  });
  //分享給朋友
  wx.onMenuShareAppMessage({
   title: "分享描述", // 分享標(biāo)題
   desc: "分享描述", // 分享描述
   link: getMsg.shareLink, // 分享鏈接
   imgUrl: getMsg.imgUrl // 分享圖標(biāo)
  });
  });
 })
 }
}

其中分享鏈接和圖片地址要用絕對(duì)地址，圖片用方形，大小至少200*200px以上

6月份新版微信客戶端發(fā)布后，用戶從微信內(nèi)的網(wǎng)頁分享消息給微信好友，以及分享到朋友圈，開發(fā)者將無法獲知用戶是否分享完成。所以不再寫成功和失敗的回調(diào)方法。查看具體公告

三、main.js中引入并掛在vue的原型上

代碼：

import WXConfig from './assets/js/wx.jsapi' // 微信分享Vue.prototype.WXConfig = WXConfig;

四、使用

代碼：

this.WXConfig.wxShowMenu();

總結(jié)

以上所述是小編給大家介紹的vue-cli構(gòu)建項(xiàng)目下使用微信分享功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺(tái)。它擁有所有擁來設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧
2021-12-12
解決安裝vue3腳手架@vue/cli報(bào)4048錯(cuò)誤問題
這篇文章主要介紹了解決安裝vue3腳手架@vue/cli報(bào)4048錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
詳解Vue中Axios封裝API接口的思路及方法
這篇文章主要介紹了詳解Vue中Axios封裝API接口的思路及方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
vue兩個(gè)組件間值的傳遞或修改方式
這篇文章主要介紹了vue兩個(gè)組件間值的傳遞或修改的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
Vuex中actions的使用教程詳解
actions作為Vuex的五大核心之一，它的屬性是用來處理異步方法的，通過提交mutations實(shí)現(xiàn)。本文將具體介紹一下actions的使用教程，需要的可以參考一下
2022-01-01
vue中正確使用jsx語法的姿勢(shì)分享
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語法來創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下
2021-07-07
vue中關(guān)于confirm確認(rèn)框的用法
這篇文章主要介紹了vue中關(guān)于confirm確認(rèn)框的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-08-08
簡單理解Vue條件渲染
這篇文章主要幫助大家簡單理解Vue條件渲染，什么是Vue條件渲染,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
vue中防抖和節(jié)流的使用方法
防抖和節(jié)流是我們?cè)陂_發(fā)過程中常用優(yōu)化性能的方式,可以減少不必要的計(jì)算,不浪費(fèi)資源,只在適合的時(shí)候再進(jìn)行觸發(fā)計(jì)算,這篇文章主要給大家介紹了關(guān)于vue中防抖和節(jié)流使用的相關(guān)資料,需要的朋友可以參考下
2021-08-08
vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法
這篇文章主要介紹了vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09