1. 樣式
跳轉小程序的開放標簽：wx-open-launch-weapp分兩個部分
- 開放標簽
開放標簽都能像普通的HTML標簽一樣在頁面中直接使用，我們可以為其添加class、id等全局屬性節(jié)點诚啃，并且可以設置其樣式恢氯。但是需要特別注意的是開放標簽不是插槽模版中節(jié)點的包含塊搜立。
例如：
<wx-open-launch-weapp
id="launch-btn"
username="原始ID"
path="pages/index/index"
>
<script type="text/wxtag-template">
<style>.btn { width: 100%; height: 100% }</style>
<div class="btn">test2</div>
</script>
</wx-open-launch-weapp>
#launch-btn {
width: 100px;
height: 100px
}
結果：插槽模版中.btn節(jié)點寬高設置100%無效
另外，用戶無法只通過點擊開放標簽來跳轉小程序月匣，需要點擊插槽模版中節(jié)點捐川。
- 插槽模版中節(jié)點
插槽中模版的樣式是和頁面隔離的脓鹃，也就是說無法在掛載dom元素后動態(tài)修改其樣式。這就造成插槽模版中節(jié)點無法自適應屏幕古沥。
不過我們可以通過在開放標簽中設置overflow: hidden;瘸右，然后給插槽模版中節(jié)點適當增加大小來實現(xiàn)布局要求，例如
<div class="box">
<wx-open-launch-weapp
id="launch-btn"
username="原始ID"
path="views/index/service-center/service-center"
>
<script type="text/wxtag-template">
<style>.btn { width: 1000px; height: 1000px }</style>
<div class="btn">test2</div>
</script>
</wx-open-launch-weapp>
</div>
.box {
position: relative;
width: 100px;
height: 100px;
}
#launch-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
overflow: hidden;
}
2. 引入 JS-SDK
Jssdk 的使用渐白，點擊微信網(wǎng)頁開發(fā)文檔
3. 細節(jié)
文檔看完尊浓，大家可能有點懵，具體到代碼中纯衍，就是開放標簽不顯示栋齿，你可以排查下下面幾個問題：
是否配置安全域名
是否是服務號
通過config接口注入權限驗證配置時，url是否正確襟诸、jsApiList必填瓦堵，即便是沒有也要寫成
sApiList: ['']小心 iOS !!!
4. vue中使用技巧
不管是hash模式還是history模式，你僅僅需要這么做：
// main.js
import wx from 'weixin-js-sdk';
import axios from 'axios';
(async function() {
// 接口中入?yún)⒂幸粋€url歌亲，直接取location.href.split('#')[0]
const { data: wxData } = await axios.post('你們后端提供的接口');
wx.config({
appId: wxData.appid, // 必填菇用，公眾號的唯一標識
timestamp: wxData.timestamp, // 必填，生成簽名的時間戳
nonceStr: wxData.nonce, // 必填陷揪，生成簽名的隨機串
signature: wxData.signature,// 必填惋鸥，簽名
jsApiList: [''],
openTagList: ['wx-open-launch-weapp']
});
})();
然后就可以在每個單文件組件中使用了杂穷，對，就是這么神奇Ｘ孕濉Ｄ土俊！滤港！
5. vue3
在vue3中廊蜒，不能在 <template></template> 中寫 <script></script> <style></style> ，然后你需要用到特殊attribute is 溅漾，但是vue-eslint-plugin會報錯山叮，需要用vue3.0新增指令 v-is ，但是 vue3.1棄用了添履，這就矛盾了屁倔，但是試了 v-is 還是可以的：
<wx-open-launch-weapp username="原始ID" path="pages/index/index">
<div v-is="'script'" type='text/wxtag-template'>
<div v-is="'style'">
.btn {
color: red;
}
</div>
<button class="btn">打開小程序</button>
</div>
</wx-open-launch-weapp>
