目錄
一、注意事項
二、使用步驟?
?三、調(diào)整樣式
一、注意事項
- 微信版本要求為：7.0.12及以上
- 系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上
- 已認證的服務(wù)號，服務(wù)號綁定“JS接口安全域名”下的網(wǎng)頁可使用此標簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
- 已認證的非個人主體的小程序，使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁，可以使用此標簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
- 對于有 CSP 要求的頁面，需要添加白名單
frame-src https://*.qq.com webcompt: -
引入的版本是1.6.0，如（http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）或者http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）或者下載的版本"weixin-js-sdk": "^1.6.0"） - <script type="text/wxtag-template"></script> 標簽中的內(nèi)容在瀏覽器及開發(fā)工具中都無法顯示，需要真機調(diào)試才有效
二、使用步驟?
1、下載或者引入插件
????????因為我用的是uniapp編寫的h5，我是直接npm下載了插件weixin-js-sdk
????????npm i?weixin-js-sdk（一定要下載1.6.0版本）
? ? ? ? uniapp需要在main.js中引入：Vue.config.ignoredElements.push('wx-open-launch-weapp')
2、引入請求
? ? ? ? uniapp 在 script 標簽里引入 import wx from 'weixin-js-sdk'
3、請求wx.config
? ? ? ? 此處是后端返回給我的簽名認證，appID填寫自己的公眾號的appID
wx.config({
// debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '填寫自己的的公眾號ID', // 必填，企業(yè)號的唯一標識，此處填寫企業(yè)號corpid
timestamp: res.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.noncestr, // 必填，生成簽名的隨機串
signature: res.signature, // 必填，簽名
jsApiList: ['wx-open-launch-weapp'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp']
}),
wx.ready(() => {
console.log('成功')
});
wx.error(function(res1) {
console.log('出錯', res1, res1.errMsg)
});注意：簽名一定要返回ok，如果簽名報錯是不會成功的
?4、在頁面中使用
? ? ? ? 如果是使用vue框架，如uniapp，為避免沖突wx-open-launch-weapp標簽內(nèi)用script（需要真機調(diào)試才有效）
? ? ? ? ?普通的直接用template即可
<wx-open-launch-weapp
id="launch-btn"
username="所需跳轉(zhuǎn)的小程序原始id，即小程序?qū)?yīng)的以gh_開頭的id(gh_xxxxxxxx)"
path="所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打開小程序</button>
</script>
</wx-open-launch-weapp>到這里頁面中就會顯示出打開小程序的按鈕啦，點擊就可以跳轉(zhuǎn)了
?三、調(diào)整樣式
相信很多小伙伴需要其他的樣式或者圖片，這時候我們可以將wx-open-launch-weapp標簽跟樣式定位，設(shè)置透明?
?外面的盒子和里面自己的樣式可以定義class
<!-- 給最外面的盒子定義你需要的寬高 相對定位 -->
<view style="width: 200px; height: 200px; position: relative;">
<!-- 你自己的樣式，可以添加圖片和其他樣式，只要絕對定位到位置就好了 -->
<view style="width: 200px; height: 200px;position: absolute;top:0px;left: 0px;"></view>
<!-- 給標簽里的內(nèi)容都絕對定位，寬高100% -->
<!-- 不放心可以設(shè)置層級z-index:;需要調(diào)試的話可以在style里面添加背景顏色background: 'red'; opacity: 0.3;-->
<wx-open-launch-weapp id="launch-btn" username="所需跳轉(zhuǎn)的小程序原始id，即小程序?qū)?yīng)的以gh_開頭的id(gh_xxxxxxxx)"
path="所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑"
style="position: absolute; top: 0; left: 0; width: 100%; height:100% ; opacity: 0;">
<script type="text/wxtag-template">
<style></style>
<view style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0;">
</view>
</script>
</wx-open-launch-weapp>
</view>到這里就結(jié)束啦
如果對樣式還是有疑問的話，可以看這篇文章https://www.jianshu.com/p/262658b8d19c文章來源：http://www.zghlxwxcb.cn/news/detail-785996.html
對于一些細節(jié)也可以查看官方文檔
微信官方文檔https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html文章來源地址http://www.zghlxwxcb.cn/news/detail-785996.html
到了這里，關(guān)于uniapp h5跳轉(zhuǎn)微信小程序（wx-open-launch-weapp）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
