資訊專欄INFORMATION COLUMN
摘要：接下來通過詳細的步驟介紹如何接入微信二次分享操作。不要嘗試在中使用異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用的回包會還沒有返回用戶點擊分享到朋友圈已分享已取消此時微信二次分享就已經大功告成了。
微信二次分享 效果演示 如何運行項目
// 克隆代碼到本地 git clone https://github.com/Jameswain/WeiXinSDK.git // 安裝依賴 npm i // 運行項目 npm run dev
通過charles配置代理，配置如下：
charles配置如下，你可以直接導入到你charles的Map remote，記住把IP地址換成你的IP地址。
配置好代理以后，在微信里打開 m.ximalaya.com/49265909/album/11501536/ 這個網址，看到以下效果，表示代理配置成功，然后你就可以進行二次分享的測試了。
接下來通過詳細的步驟介紹如何接入微信二次分享操作。
官方接入文檔：https://mp.weixin.qq.com/wiki...
1、配置JS接口安全域名1、做二次分享首先需要申請一個微信服務號。
2、登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”
注意：這里的JS接口安全域名就是你需要進行二次分享頁面的域名。
注意：配置JS接口安全域名時，首先需要MP_verify_576FDJKHHJK29XXTpb.txt 文件放置在域名根目錄下；然后才能保存成功，如果配置的域名下沒有MP_verify_576FDJKHHJK29XXTpb.txt 文件是無法保存成功的。
2、引入js文件在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...
如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js... （支持https）。
以上是官方的原文提供的js文件地址，我們一般都會把jweixin-1.4.0.js文件下載下來放在我們域名的靜態文件中進行引入。
https://h5.jameswain.com/static/lib/jweixin-1.4.0.js // 發布到線上的地址
在index.html頁面中加入以下代碼：
3、訪問服務端接口獲取配置信息? 這里需要通過服務端提供的獲取配置信息接口，獲取權限驗證的相關配置，例如我獲取配置信息的接口是：http://m.ximalaya.com/x-third... 返回結果如下：
{
"appId": "wx3a4b4454f28a932b",
"timestamp": 1541226502,
"nonceStr": "705a85bb-1e66-4a54-85a8-ebef769faee6",
"signature": "3b4e00872606b69438c168c13fad772327b1d1b3"
}
編寫配置微信分享公共代碼
// src/common/wxsdk.js
import axios from "axios"
/**
* 獲取微信分享配置接口地址
* 換項目的時候，直接拷貝該文件，修改這個接口地址即可直接使用微信分享
*/
const GET_SHARE_CONFIG_URL = "/x-thirdparty-web/weixinJssdk/config?signatureUrl=http%3A%2F%2Fm.ximalaya.com%2F49265909%2Falbum%2F11501536%2F&thirdpartyId=17&_=1541230577945";
let wxconfig = null;
/**
* 初始化微信分享配置
*/
async function initWeiXinConfig() {
try {
const { data } = await axios.get(GET_SHARE_CONFIG_URL);
wxconfig = data;
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: wxconfig.appId, // 必填，公眾號的唯一標識
timestamp: wxconfig.timestamp, // 必填，生成簽名的時間戳
nonceStr: wxconfig.nonceStr, // 必填，生成簽名的隨機串
signature: wxconfig.signature, // 必填，簽名
jsApiList: [ // 必填，需要使用的JS接口列表
"checkJsApi", // 判斷當前客戶端是否支持指定JS接口
"onMenuShareTimeline", // 獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口
"onMenuShareAppMessage", // 獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口
"onMenuShareQQ", // 獲取“分享到QQ”按鈕點擊狀態及自定義分享內容接口
"onMenuShareWeibo", // 獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口
"onMenuShareQZone", // 獲取“分享到QZone”按鈕點擊狀態及自定義分享內容接口
"hideMenuItems", // 批量隱藏功能按鈕接口
"showMenuItems", // 批量顯示功能按鈕接口
"hideAllNonBaseMenuItem", // 隱藏所有非基礎按鈕接口
"showAllNonBaseMenuItem", // 顯示所有功能按鈕接口
"translateVoice", // 識別音頻并返回識別結果接口
"startRecord", // 開始錄音接口
"stopRecord", // 停止錄音接口
"onVoiceRecordEnd",
"playVoice", // 播放語音接口
"onVoicePlayEnd",
"pauseVoice", // 暫停播放接口
"stopVoice", // 停止播放接口
"uploadVoice", // 上傳語音接口
"downloadVoice", // 下載語音接口
"chooseImage", // 拍照或從手機相冊中選圖接口
"previewImage", // 預覽圖片接口
"uploadImage", // 上傳圖片接口
"downloadImage", // 下載圖片接口
"getNetworkType", // 獲取網絡狀態接口
"openLocation", // 使用微信內置地圖查看位置接口
"getLocation", // 獲取地理位置接口
"hideOptionMenu", // 隱藏右上角菜單接口
"showOptionMenu", // 顯示右上角菜單接口
"closeWindow", // 關閉當前網頁窗口接口
"scanQRCode", // 調起微信掃一掃接口
"chooseWXPay", // 發起一個微信支付請求
"openProductSpecificView", // 跳轉微信商品頁接口
"addCard", // 批量添加卡券接口
"chooseCard", // 調起適用于門店的卡券列表并獲取用戶選擇列表
"openCard" // 查看微信卡包中的卡券接口
]
});
} catch (e) {
console.error(e);
}
};
export default {
/**
* 設置微信分享
* @param opts
*/
share(opts) {
if (wx) {
if (!wxconfig) {
initWeiXinConfig();
}
// 默認配置
const defaultOpts = {
title: "互聯網之子",
desc: "在長大的過程中，我才慢慢發現，我身邊的所有事，別人跟我說的所有事，那些所謂本來如此，注定如此的事，它們其實沒有非得如此，事情是可以改變的。更重要的是，有些事既然錯了，那就該做出改變。",
link: window.location.href,
imgUrl: "http:// demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg",
trigger: function (res) {
// 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
console.log("用戶點擊分享到朋友圈", res);
},
success: function (res) {
console.log("已分享");
},
cancel: function (res) {
console.log("已取消");
},
fail: function (res) {
console.log(JSON.stringify(res));
}
}
wx.ready(function () {
// 分享到朋友圈
wx.onMenuShareTimeline({...defaultOpts, ...opts, ...{title: opts.desc, desc: opts.title}});
// 分享給朋友
wx.onMenuShareAppMessage({...defaultOpts, ...opts});
// 分享到QQ
wx.onMenuShareQQ({...defaultOpts, ...opts});
// 分享到騰訊微博
wx.onMenuShareWeibo({...defaultOpts, ...opts})
// 分享到QZone
wx.onMenuShareQZone({...defaultOpts, ...opts});
});
wx.error(function (res) {
console.log("error=>", res);
});
} else {
console.log("當前不是微信環境");
}
}
}
4、在入口文件中進行分享配置
? ?在Vue的入口文件中進行微信二次分享的配置，分享文案可以根據你的業務進行調整。
注意：二次分享必須要把代碼部署到你配置的JS接口安全域名下才能看到效果。
// src/main.js
import wxsdk from "./common/wxsdk"
// 配置微信分享
wxsdk.share({
title: "互聯網之子",
desc: "長大的過程中，我才慢慢發現，我身邊的所有事，別人跟我說的所有事，那些所謂本來如此，注定如此的事，它們其實沒有非得如此，事情是可以改變的。更重要的是，有些事既然錯了，那就該做出改變。",
imgUrl: "https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C25%2C550%2C363%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=afce76f80055b31988b6d8357e99ae14/267f9e2f070828381f3de6edb299a9014c08f112.jpg",
trigger: function (res) {
// 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
console.log("用戶點擊分享到朋友圈", res);
},
success: function (res) {
console.log("已分享");
},
cancel: function (res) {
console.log("已取消");
},
fail: function (res) {
console.log(JSON.stringify(res));
}
});
此時微信二次分享就已經大功告成了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53197.html
摘要：接下來通過詳細的步驟介紹如何接入微信二次分享操作。不要嘗試在中使用異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用的回包會還沒有返回用戶點擊分享到朋友圈已分享已取消此時微信二次分享就已經大功告成了。 微信二次分享 效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何運行項目 ...
摘要：對于用戶觸發時才調用的接口，則可以直接調用，不需要放在函數中。 微信分享網頁后，再次點擊微信分享的內部會自動在網址后拼接&from=來源，導致二次分享的圖案文案失效，解決辦法: function getQueryString(name) {//根據字段看網址是否拼接&字符串 var reg = new RegExp((^|&) + name + =(...
摘要：但是在本次開發中，我只使用了，，個別微信版本分享出來的還是沒有圖片和文案，的是沒有問題，所以又加上了棄用的，之后，安卓機也可以正常分享。 微信二次分享／自定義分享 從App中使用App分享（一次分享） showImg(https://segmentfault.com/img/bVbp83T?w=593&h=278); 使用微信導航欄的分享（二次分享） －－已做處理 showImg(...
閱讀 1552·2021-11-17 09:33
閱讀 1100·2021-11-12 10:36
閱讀 2414·2019-08-30 15:54
閱讀 2441·2019-08-30 13:14
閱讀 2914·2019-08-26 14:05
閱讀 3289·2019-08-26 11:32
閱讀 3001·2019-08-26 10:09
閱讀 2995·2019-08-26 10:09
