摘要:背景在中使用微信分享需要安裝應(yīng)用判斷蘋果手機(jī)訪問后臺(tái)接口獲取微信參數(shù)必填,公眾號(hào)的唯一標(biāo)識(shí)必填,生成簽名的時(shí)間戳必填,生成簽名的隨機(jī)串必填,簽名,見附錄必填,需要使用的接口列表,所有接口列表見附錄分享標(biāo)題分享鏈接分
背景
在vue中使用jssdk微信分享
weixin-js-sdk mint-ui需要安裝npm install weixin-js-sdk mint-ui --save
mixins/wechat.js
//weixin-js-sdk應(yīng)用 const wx = require("weixin-js-sdk") import { Toast } from "mint-ui" export default { methods: { wechatShare(info) { // 判斷蘋果手機(jī) let _url = "" if (window.__wxjs_is_wkwebview === true) { _url = window.location.href.split("#")[0] || window.location.href } else { _url = window.location.href } // 訪問后臺(tái)接口獲取微信參數(shù) this.$store .dispatch("GetWxParam", { url: encodeURIComponent(_url) }) .then(res => { wx.config({ debug: false, appId: res.data.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: res.data.timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: res.data.nonceStr, // 必填,生成簽名的隨機(jī)串 signature: res.data.signature, // 必填,簽名,見附錄1 jsApiList: [ "previewImage", "hideAllNonBaseMenuItem", "showMenuItems", "onMenuShareTimeline", "onMenuShareAppMessage", "chooseWXPay" ] // 必填,需要使用的 JS 接口列表,所有JS接口列表見附錄2 }) }) .catch(err => { console.log(err) }) wx.ready(() => { const share_title = info.title const share_desc = info.desc const share_link = info.link const share_img = info.img wx.showOptionMenu() wx.onMenuShareTimeline({ title: share_title, // 分享標(biāo)題 link: share_link, // 分享鏈接 imgUrl: share_img, // 分享圖標(biāo) success: function() { Toast("已成功分享到朋友圈") }, cancel: function() { Toast("已取消分享") } }) wx.onMenuShareAppMessage({ title: share_title, // 分享標(biāo)題 desc: share_desc, // 分享描述 link: share_link, // 分享鏈接 imgUrl: share_img, // 分享圖標(biāo) success: function() { Toast("已成功分享給您的朋友") }, cancel: function() { Toast("已取消分享") } }) }) } } }
使用方法
import wxShare from "@/mixins/wechat" //引用
export default {
mixins: [wxShare], // methods: { setShare() { const shareInfo = { title: `羽絨服低至199元!`, desc: `7月26日-8月3日,年中限時(shí)特惠,售完即止`, link: window.location.href, img: ".../logo.jpg" } // mixins this.wechatShare(shareInfo) }, }, created(){ // 設(shè)置 this.setShare() } }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/108130.html
摘要:微信在中的簡(jiǎn)單使用以上是微信官方給出的示例代碼,但是對(duì)于實(shí)際項(xiàng)目使用,還需要進(jìn)一步對(duì)代碼進(jìn)行封裝。 微信 jssdk 在 vue 中的簡(jiǎn)單使用 import wx from weixin-js-sdk; wx.config({ debug: true, appId: , timestamp: , nonceStr: , signature: , jsApiLi...
摘要:路由守衛(wèi)內(nèi)觸發(fā)更新簽名獲取真實(shí)有效微信簽名此處需要自行處理在路由守衛(wèi)內(nèi)更新簽名,保證是使用當(dāng)前頁面,是使用目標(biāo)路由完整地址再加上域名使用簽名調(diào)用在使用的頁面通過取出緩存的微信簽名,然后進(jìn)行簽名。 背景 手機(jī)型號(hào): 型號(hào):iphone 7 / iphone xs max版本:ios 10.3.1 / ios 12.1微信版本:WeChat 6.7.3 問題還原: Vue應(yīng)用(vue-ro...
摘要:配置先上配置每個(gè)頁面都調(diào)用微信授權(quán)配置注是我在暴露的接口這份配置主要是根據(jù)微信公眾號(hào)開發(fā)踩坑記錄配置而來。 首先說明,應(yīng)用環(huán)境是使用的是vue+vue-router,history模式開發(fā)的單頁應(yīng)用。 配置 先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...
摘要:微信說明文檔分享的坑根據(jù)的文檔,很多人都是在初始化的配置的時(shí)候,傳入的當(dāng)前的地址不正確。同樣的,給微信初始化的加入對(duì)應(yīng)的參數(shù)。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑,以后方便查詢第一次接入公眾號(hào)微信支付、分享、定位等等的坑的時(shí)候,心里是迷茫而又恐懼。因?yàn)?,聽說坑特別多,后來發(fā)現(xiàn)自己的親身體驗(yàn)到了這一點(diǎn)。 支付的坑 1、當(dāng)前URL未注冊(cè) ...
摘要:微信說明文檔分享的坑根據(jù)的文檔,很多人都是在初始化的配置的時(shí)候,傳入的當(dāng)前的地址不正確。同樣的,給微信初始化的加入對(duì)應(yīng)的參數(shù)。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑,以后方便查詢第一次接入公眾號(hào)微信支付、分享、定位等等的坑的時(shí)候,心里是迷茫而又恐懼。因?yàn)椋犝f坑特別多,后來發(fā)現(xiàn)自己的親身體驗(yàn)到了這一點(diǎn)。 支付的坑 1、當(dāng)前URL未注冊(cè) ...
閱讀 1622·2023-04-26 02:43
閱讀 3040·2021-11-11 16:54
閱讀 1362·2021-09-23 11:54
閱讀 1181·2021-09-23 11:22
閱讀 2372·2021-08-23 09:45
閱讀 855·2019-08-30 15:54
閱讀 3107·2019-08-30 15:53
閱讀 3197·2019-08-30 15:53