最近公司有一個(gè)新的業(yè)務(wù)需求，企微分享卡片到企微、企微分享卡券到微信，點(diǎn)擊領(lǐng)取、打開(kāi)小程序進(jìn)行領(lǐng)取。企微好像不可以直接跳轉(zhuǎn)微信小程序，沒(méi)有這樣的接口，所以只能想另一種方法實(shí)現(xiàn)跳轉(zhuǎn)，通過(guò)H5跳轉(zhuǎn)微信小程序? ? ? 我是V2的寫(xiě)法
這是第一次寫(xiě)這種需求，腦袋空白，也不知道從哪里搞起。還好之前的業(yè)務(wù)有企微分享卡片的功能，參照他的代碼，慢慢理解，最后還是完成了。話不多說(shuō)，直接上代碼
步驟一：首先需要注入企微的權(quán)限，沒(méi)有權(quán)限不能調(diào)用企微的接口，企微的開(kāi)發(fā)文檔上有相關(guān)的接口，大家直接去看一下? 傳送門(mén) ?企微注入權(quán)限? 我用的是自定義分享卡片
auth () {
let url = ''
if (window.location.href.indexOf('?') !== -1) {
url = window.location.href.substr(0, window.location.href.indexOf('?'))
} else {
url = window.location.href
}
const data = {
agentId: storage.get('agentId'),
url: url
}
this.$api('user.config', data).then(resCon => {
window.wx.agentConfig({
corpid: storage.get('corpId'), // 必填，企業(yè)微信的corpid，必須與當(dāng)前登錄的企業(yè)一致
agentid: storage.get('agentId'), // 必填，企業(yè)微信的應(yīng)用id （e.g. 1000247）
timestamp: resCon.data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: resCon.data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: resCon.data.signature, // 必填，簽名，見(jiàn)附錄-JS-SDK使用權(quán)限簽名算法
jsApiList: ['shareAppMessage',
'navigateToAddCustomer',
'getLocation', 'sendChatMessage', 'launchMiniprogram', 'openEnterpriseChat', 'shareWechatMessage'], // 必填，傳入需要使用的接口名稱
success: function (res) {
console.log('api注入成功')
storage.set('agentConfig', true)
},
fail: function (res) {
if (res.errMsg.indexOf('function not exist') > -1) {
alert('版本過(guò)低請(qǐng)升級(jí)')
}
console.log('api注入失敗', res)
}
})
})
},步驟二：企微的權(quán)限注入成功以后就可以調(diào)用企微的分享接口??企微分享接口?這里有兩種情況，企微 ==> 企微? ? 企微 ==> 微信 調(diào)用了不同的接口, 分享的鏈接可以傳遞參數(shù)，供H5頁(yè)面進(jìn)行二次處理
toQW (item) {
console.log(item)
if (item.giftId) {
this.$api('push.sendGift', { giftId: item.giftId })
.then(res => {
console.log(res)
if (res && res.success) {
window.wx.invoke('shareAppMessage', {
title: item.name, // 分享標(biāo)題
desc: item.name, // 分享描述
link: `${process.env.VUE_APP_COPONS_URL}/loanwechat/middlePage?recommendId=${res.data.recommendId}`, // 分享鏈接
imgUrl: item.img // 分享封面
}, function (res) {
if (res.err_msg === 'shareAppMessage:ok') {
console.log('企業(yè)微信分享成功', res) // 正確處理
} else {
console.log('企業(yè)微信分享失敗', res) // 錯(cuò)誤處理
}
})
}
})
.catch(err => {
console.log(err)
})
}
},
toWX (item) {
if (item.giftId) {
this.$api('push.sendGift', { giftId: item.giftId })
.then(res => {
if (res && res.success) {
window.wx.invoke('shareWechatMessage', {
title: item.name, // 分享標(biāo)題
desc: item.name, // 分享描述
link: `${process.env.VUE_APP_COPONS_URL}/loanwechat/middlePage?recommendId=${res.data.recommendId}`, // 分享鏈接
imgUrl: item.img // 分享封面
}, function (res) {
if (res.err_msg === 'shareWechatMessage:ok') {
console.log('微信分享成功', res) // 正確處理
} else {
console.log('微信分享失敗', res) // 錯(cuò)誤處理
}
})
}
})
.catch(err => {
console.log(err)
})
}
}分享成功后，點(diǎn)擊卡片就可以跳轉(zhuǎn)對(duì)應(yīng)的H5頁(yè)面，再進(jìn)行跳轉(zhuǎn)小程序
步驟三：H5跳轉(zhuǎn)小程序，使用開(kāi)放性標(biāo)簽 wx-open-launch-weapp 跳轉(zhuǎn)? ?這里是重點(diǎn)
在上代碼前需要交代一些要點(diǎn)，否則可能會(huì)導(dǎo)致開(kāi)放性標(biāo)簽加載失敗，按鈕不顯示
1、要確認(rèn)你的 appid 是不是正確的
2、確認(rèn)你的 url 地址是不是正確的，注入權(quán)限時(shí)的url應(yīng)該時(shí)本頁(yè)面的url
3、開(kāi)放性標(biāo)簽的樣式問(wèn)題，如果加了position：absolute，會(huì)顯示，不加的話可能不顯示，有的文章說(shuō)不用加，我感覺(jué)應(yīng)該是具體情況具體分析吧，你可以都試試，只要顯示出來(lái)按鈕就可以了
4、在注入權(quán)限的時(shí)候??jsApiList: [ ],里面不可以為空，你可以填寫(xiě)任意的接口，一般是chooseImage、previewImage這兩個(gè)接口
5、最重要的，可別忘記注入開(kāi)放性標(biāo)簽? openTagList: ['wx-open-launch-weapp']? 沒(méi)有這個(gè)開(kāi)放性標(biāo)簽就不會(huì)加載出來(lái)、更別說(shuō)跳轉(zhuǎn)小程序了
代碼順序：先引入微信公眾號(hào)的文件?http://res2.wx.qq.com/open/js/jweixin-1.6.0.js? ? ? ? ? ? ? ? ? ? ? 再通過(guò)JS-SDK?注入微信權(quán)限，這里的appid一定要寫(xiě)對(duì)，別問(wèn)我為啥、問(wèn)就是不顯示按鈕
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
下邊是?wx-open-launch-weapp 標(biāo)簽代碼
<wx-open-launch-weapp
id="launch-btn"
:path="'pages/Activity/index?recommendId=' + recommendId" // 要跳轉(zhuǎn)小程序的路徑可帶參數(shù)
username="原始appid" // 這是小程序的原始appid gh開(kāi)頭的
env-version="trial" // 這是跳轉(zhuǎn)先程序版本的 trial：體驗(yàn)版 release：正式版
style="width: 100vw;height: 100vh;position: absolute;"
@error="handleErrorFn" // 跳轉(zhuǎn)失敗事件
@launch="handleLaunchFn" // 跳轉(zhuǎn)成功事件
>
<script type="text/wxtag-template">
<style type="text/css">img { position: absolute;left: 20%;bottom: 10%;width: 240px;height: 80px;}</style>
<img src="https://zjgxwtest.zrcbank.com/images/loanback_1683358540588.png" alt="" class="btn">
</script>
</wx-open-launch-weapp>下邊的代碼是注入權(quán)限的代碼，
init () {
this.$api('share.config', {
appId: 'appid', // 正式
url: window.location.href // 當(dāng)前頁(yè)面的url，也就是從點(diǎn)擊企微分享卡片的地址路徑
}).then(res => {
console.log('config', res)
wx.config({
// debug: true,
appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: res.data.signature, // 必填，簽名
jsApiList: [
'chooseWXPay',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'chooseImage',
'previewImage'
], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp']
})
wx.ready(function () {
console.log('準(zhǔn)備成功')
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法
})
wx.error(function (resErr) {
console.log('準(zhǔn)備失敗', resErr)
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)
})
})
},注入成功以后，就可以出現(xiàn)按鈕了，點(diǎn)擊按鈕，提示即將打開(kāi)“某某某”小程序
步驟四：H5跳轉(zhuǎn)的小程序? 參數(shù)只能在 onload 中獲取，如果你有其他方法獲取，教教老弟，我也想知道一下。
onLoad (options) {
var obj = wx.getLaunchOptionsSync()
if (obj.query && obj.query.recommendId) {
const recommendId = obj.query.recommendId
wx.setStorageSync('recommendId', recommendId)
}
}獲取到參數(shù)以后，可以將參數(shù)保存本地 wx.setStorageSync('recommendId', recommendId)，等用過(guò)之后，再刪除一下wx.removeStorageSync('recommendId', recommendId)? 最后可以美美的測(cè)試你的功能了。
以上就是最近工作總遇到的問(wèn)題，如有錯(cuò)誤，還請(qǐng)指出。
代碼有用的話，給俺個(gè)贊吧，謝謝文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-521465.html
歡迎各位留言發(fā)表意見(jiàn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-521465.html
到了這里，關(guān)于H5跳轉(zhuǎn)小程序 (wx-open-launch-weapp開(kāi)放性標(biāo)簽跳轉(zhuǎn))的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
