背景：企業(yè)微信應(yīng)用使用企業(yè)微信JS-SDK的分享接口實現(xiàn)分享樣式自定義
原生：
需要實現(xiàn)成：
企業(yè)微信JS-SDK 是企業(yè)微信面向網(wǎng)頁開發(fā)者提供的 基于企業(yè)微信內(nèi) 的網(wǎng)頁開發(fā)工具包。
通過使用企業(yè)微信JS-SDK，網(wǎng)頁開發(fā)者 可借助企業(yè)微信 高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力，同時可以直接使用企業(yè)微信分享、掃一掃等企業(yè)微信特有的能力，為企業(yè)微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。
傳送門：企微JS-SDK開發(fā)文檔
步驟一：引入JSSDK
<!-- 這里以jssdk1.2.0為例子，在html文件里引入jssdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
步驟二：通過config接口注入權(quán)限驗證配置
// 示例：
wx.config({
beta: true,// 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會有問題
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，企業(yè)微信的corpID，必須是本企業(yè)的corpID，不允許跨企業(yè)使用
timestamp: '', // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法
jsApiList: [] // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進來
});
這里的config里的內(nèi)容一般是請求后端獲取，舉個例子：
新建一個qwjssdk.ts文件或js文件，這里以Typescript為例，JavaScript類似。
- 提前將需要用到的api用一個數(shù)組存起來
const defaultApiSet = new Set([
'onMenuShareAppMessage', // 獲取“轉(zhuǎn)發(fā)”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
])
/**
* [getBrowserEnv 判斷當(dāng)前瀏覽器的環(huán)境，可忽略]
* @return {[Object]}
*/
function getBrowserEnv(): {isWxWork: boolean, wxWorkVersion: string | null} {
const ua = navigator.userAgent.toLowerCase()
const isWxWork = /wxwork/i.test(ua) && /micromessenger/i.test(ua)
// 獲取企業(yè)微信版本
let wxWorkVersion = null
if (ua.match(/wxwork\/(\S*)\s/)) {
wxWorkVersion = (ua.match(/wxwork\/(\S*)\s/) as object)[1]
}
return {
isWxWork,
wxWorkVersion
}
}
-
定義一個方法調(diào)用簽名接口和注冊配置信息
getParams是請求后端接口，獲取簽名，返回來的參數(shù)可以與配置信息對應(yīng)上即可，一般返回（appId、timestamp、noncestr、signature）。具體可閱讀JS-SDK使用權(quán)限簽名算法。
注意點： url的賦值
為什么 url賦值 要使用
encodeURIComponent()？
：因為有個業(yè)務(wù)場景需要帶值為中文的請求參數(shù)，所以這里需要先編碼再把url傳給簽名接口，否則不會走分享api。這里因項目而異。沒有作者這個業(yè)務(wù)場景的話可以直接將url賦值為window.location.href.split('#')[0]
// 請求接口獲取參數(shù)
async getParams() {
const url = encodeURIComponent(window.location.href.split('#')[0]) // 注意點，因項目而已
const res = await Api.getJssdkConfig({ launchUrl: url }) // 請求自己定義接口的方法
if (res.code.value === 0) {
return new Promise((resolve, reject) => {
resolve(res.data.value)
})
}
}
async initConfig() {
const config:any = await this.getParams()
if (!config) {
console.log('簽名失敗')
return false
}
config.jsApiList = Array.from(defaultApiSet) // 將需要用到的api賦值給confi.JsAPIList
await this.registeredConfig(config) // 去注冊，將注冊信息帶到注冊配置方法里面
}
- 注冊配置信息
// 注冊配置信息
registeredConfig(config) {
console.log('registeredConfig config:>> ', config);
window.wx.config({
// 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會有問題
beta: true,
// 開啟調(diào)試模式
debug: false,
// 必填，企業(yè)微信的corpID
appId: config.appId,
// 必填，生成簽名的時間戳
timestamp: +config.timestamp,
// 必填，生成簽名的隨機串
nonceStr: config.noncestr,
// 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法
signature: config.signature,
// 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進來
jsApiList: config.jsApiList
})
return new Promise((resolve, reject) => {
// 如果是企業(yè)微信端的情況下執(zhí)行，瀏覽器的情況下走else。不判斷的話可忽略此判斷。此方法在上面已經(jīng)寫了。
if (getBrowserEnv().isWxWork) {
window.wx.ready(() => {
console.log('注冊成功', config)
// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
resolve(null)
})
window.wx.error(err => {
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
console.log('注冊失敗', err, config)
reject(err)
})
} else {
resolve(null)
}
})
}
步驟三：封裝分享api
在公共方法文件里面封裝分享方法的調(diào)用。
這里就命名一個common.ts文件為例吧。
注意點：每次調(diào)用api都需要重新注冊一遍
每次調(diào)用api之前都需要調(diào)用前面寫的initConfig()重新注冊一遍配置信息。否則分享的樣式比如title、desc、imgUrl都會不生效。
// 引入qwjssdk文件，路徑自己決定
import qwjssdk from '~/utils/qwjssdk'
/**
* 通過調(diào)用jssdk能力自定義分享內(nèi)容
* */
export const wxShareAppMessage = async (shareObj: shareObj) => {
await qwjssdk.initConfig() // 重點??！這里根據(jù)業(yè)務(wù)需求，需要每次更換路由都需要重新注冊一遍，否則分享出去的樣式不生效。
if (!window.wx) {
return
}
// 獲取“轉(zhuǎn)發(fā)”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
window.wx.onMenuShareAppMessage({
title: shareObj.title, // 分享標(biāo)題
desc: shareObj.desc, // 分享描述
link: shareObj.link, // 分享鏈接
imgUrl: shareObj.imgUrl, // 分享圖標(biāo)
success: function () {
// 這里可以寫分享成功之后的邏輯
console.log('SUCCESS onMenuShareAppMessage :>> ', shareObj);
},
error: (err)=>{
// 這里可以寫分享失敗之后的邏輯
console.log('ERR onMenuShareAppMessage :>> ', err);
}
});
}
這里只用到了success 和 error 的回調(diào)，其他回調(diào)可以看下面這段官網(wǎng)的描述：
所有接口通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個對象，除了每個接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：
success：接口調(diào)用成功時執(zhí)行的回調(diào)函數(shù)。
fail：接口調(diào)用失敗時執(zhí)行的回調(diào)函數(shù)。
complete：接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
cancel：用戶點擊取消時的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會用到。
trigger: 監(jiān)聽Menu中的按鈕點擊時觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。
注意
不要嘗試在 trigger 中使用 Ajax 異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用 Ajax 的回包會還沒有返回。
以上幾個函數(shù)都帶有一個參數(shù)，類型為對象，其中除了每個接口本身返回的數(shù)據(jù)之外，還有一個通用屬性err_msg，其值格式如下：
調(diào)用成功時：“xxx:ok” ，其中xxx為調(diào)用的接口名
用戶取消時：“xxx:cancel”，其中xxx為調(diào)用的接口名
調(diào)用失敗時：其值為具體錯誤信息
步驟四：監(jiān)聽轉(zhuǎn)發(fā)按鈕
在業(yè)務(wù)代碼里面，引入封裝的api，這里就以index.vue舉例叭
import { wxShareAppMessage } from '~/utils/common'
/**
* 調(diào)用分享api，實現(xiàn)分享自定義內(nèi)容
*/
const toShare = () => {
shareData.value = {
title: '搜索',
desc: '搜索',
link: window.location.href,
imgUrl: 'xxxxxxxxx.png'
}
wxShareAppMessage(shareData.value)
}
toShare() // 根據(jù)自身的業(yè)務(wù)邏輯調(diào)整請求位置
執(zhí)行上面代碼就代表著開始監(jiān)聽轉(zhuǎn)發(fā)按鈕了。文章來源：http://www.zghlxwxcb.cn/news/detail-467020.html
快去嘗試叭~文章來源地址http://www.zghlxwxcb.cn/news/detail-467020.html
到了這里，關(guān)于feat：使用企業(yè)微信JS-SDK的onMenuShareAppMessage()實現(xiàn)點擊轉(zhuǎn)發(fā)自定義分享內(nèi)容（TypeScript）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
