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