wxShare.js

import wx from 'weixin-js-sdk'; import {ticketUrlApi, userInfosApi} from "../api/api"; import {SessionGet, SessionPut} from "./dataStorage"; // 微信sdk 版本號是1.6.0// 基本配置 -> 公眾號開發信息 -> 開發者ID(AppID) let appId = undefined; let timestamp = undefined; let nonceStr = undefined; let signature = undefined; let paramsList = undefined; // 初始化網址 let assessments = {title: undefined,content: undefined,pic: undefined, }; const jsApiList = ['updateTimelineShareData', 'updateAppMessageShareData', 'wx-open-launch-app'];//要用到微信API function getJSSDK() {wx.config({debug: false, // 可開啟調試模式appId: appId, // 需要后端接口返回的appIdtimestamp: timestamp, // 需要后端接口返回的timeStampnonceStr: nonceStr,// 需要后端接口返回的nonceStrsignature: signature, // 需要后端接口返回的signaturejsApiList: jsApiList, // 注冊的微信jsapiopenTagList: ['wx-open-launch-app'],success: () => {console.log("success...")},});// 分享的展示信息let shareData = {title: assessments.title ? assessments.title : "漂流瓶探聊",desc: assessments.content ? assessments.content : "快來遇見讓你心動的TA!",imgUrl: assessments.pic ? assessments.pic : "https://profile.csdnimg.cn/F/E/5/0_weixin_44653409",link: SessionGet("shareUrl"),};wx.ready(() => {wx.updateAppMessageShareData(shareData);wx.updateTimelineShareData(shareData);// wx.onMenuShareAppMessage(shareData);// 監聽“分享到朋友圈”按鈕點擊、自定義分享內容及分享結果接口// wx.onMenuShareTimeline(shareData);// 監聽“分享到QQ”按鈕點擊、自定義分享內容及分享結果接口// wx.onMenuShareQQ(shareData);// 監聽“分享到微博”按鈕點擊、自定義分享內容及分享結果接口// wx.onMenuShareWeibo(shareData);});wx.error((res) => { // 注冊 wx.config的報錯提示console.log(JSON.stringify(res) + "微信驗證-----錯誤信息錯誤信息錯誤信息-");}); }/*** 初始化微信SDK*/ function getWeiXinSignature() {if (SessionGet("assessments")) assessments = SessionGet("assessments")// 當前urllet url = window.location.href;// 初始化微信分享跳轉urlif (!SessionGet("shareUrl")) {paramsList = new URLSearchParams(url.split('?')[1])if (paramsList.get('state')) {SessionPut("shareUrl", window.location.origin + paramsList.get('state'))}}/*** 獲取微信SDK配置*/ticketUrlApi({url: SessionGet("shareUrl")}).then((res) => {appId = res.appIdsignature = res.signaturenonceStr = res.nonceStrtimestamp = res.timestamp// token 登陸if (url.includes("token")) {// alert("token 登陸....")getJSSDK()} else if (SessionGet("userInfo")) {// alert("緩存 登陸....")getJSSDK()} else if (url.includes("code")) { // 微信瀏覽器直接訪問 獲取用戶信息// alert("code 登陸....")getUserInfos()} else { // 獲取用戶 code 綁定用戶// alert("初始化 登陸....")getWeixinCode(url)}}); }// 微信瀏覽器直接訪問 獲取用戶信息 并跳轉指定頁面 function getUserInfos() {userInfosApi({code: paramsList.get('code')}).then((res) => {SessionPut("userInfo", res)window.location.href = SessionGet("shareUrl")}); }// 獲取用戶 code 并標記跳轉的指定頁面 function getWeixinCode(url) {// 授權后重定向的回調鏈接地址，官方要求用urlEncode對鏈接進行處理const callbackURL = encodeURIComponent(url)// 重定向后會帶上state參數，最多128字節const state = encodeURIComponent(window.location.pathname + window.location.search)window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect` }export default {getWeiXinSignature,appId }

頁面添加微信瀏覽器跳轉
html

<wx-open-launch-app id="wxopenLanchAppId" appid="要跳轉的appid" extinfo="getExtinfo"><script type="text/wxtag-template"><style>.diy-style{color: white;}</style><span class="diy-style" :style="{width: window.outerWidth}">分享WX</span></script></wx-open-launch-app>

script

import Vue from "vue"; // 忽略自定義元素標簽拋出的報錯 Vue.config.ignoredElements = ['wx-open-launch-app'];methods: {// 判斷是否是微信瀏覽器getIsWeiXing() {let wx = window.navigator.userAgent.toLowerCase();if (wx.match(/MicroMessenger/i) == 'micromessenger') {// console.log('是微信瀏覽器默認走微信')this.$SessionPut("isWeiXing", true)/*** 初始化微信SDK*/this.$wxShare.getWeiXinSignature();} else {// console.log('不是微信瀏覽器繪制原生。');this.$SessionPut("isWeiXing", false)}},init() {// 判斷微信打開并且是安卓this.$nextTick(() => {const btn = document.getElementById("wxopenLanchAppId");btn.addEventListener('error', function (e) {this.toDownload()});});} }, created() {// 刷新分享地址this.getIsWeiXing()},mounted() {this.init();},props: {href: {type: String,default: ''}},

判斷是否是微信瀏覽器

getIsWeiXing() {let wx = window.navigator.userAgent.toLowerCase();if (wx.match(/MicroMessenger/i) == 'micromessenger') {console.log('是微信瀏覽器默認走微信')return true; // 是微信端} else {console.log('不是微信瀏覽器繪制原生。');return false; // 是微信端} },

總結

以上是生活随笔為你收集整理的微信SDK(小程序, 公众号)坑 汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。