UNIAPP - H5跳轉微信小程序

准備工作，見傳送門：UNI-APP 開發微信公眾號（H5）JSSDK 的使用方式 - DCloud問答

主要是導入 jweixin 和配置注冊信息 

 

 

1. main.js添加以下代碼

 

 

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

 

2. 示例

 

如果 <script type="text/wxtag-template"> 標簽需要放入圖片，傳統的渲染實現不了 需要用

用微信小程序原生的渲染方式

<img src="{{item.xx}}" />

 

 

<template>
    <view class="content">
        <!-- 樣式類的話貌似只能在style的內聯樣式或行內樣式才生效 -->
        <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError" username="gh_cxxxxx" path="pages/index/index.html">
            <script type="text/wxtag-template">
                 <style> .btn { padding: 12px;opacity:0 } </style>
                <button class="btn">打開小程序</button>
            </script>
        </wx-open-launch-weapp>
    </view>
</template>

<script>
// 這里做個示例，實際上的jweixin sdk是需要你看第一步通過npm或yarn安裝
import wx from 'jweixin-module'; export default { data() { return {}; }, onLoad() { this.getConfig(); }, methods: { // wx api 注冊
 getConfig() { wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                appId: appId, // 必填，公眾號的唯一標識，填自己的！
                timestamp: timestamp, // 必填，生成簽名的時間戳，剛才接口拿到的數據
                nonceStr: nonceStr, // 必填，生成簽名的隨機串
                signature: signature, // 必填，簽名，見附錄1
                jsApiList: ['wx-open-launch-weapp'], openTagList: ['wx-open-launch-weapp'] // 跳轉小程序時必填
 }); wx.ready(res => { console.log(res); this.$nextTick(() => { let btn = document.getElementById('launch-btn'); btn.addEventListener('launch', e => { console.log('success'); }); btn.addEventListener('error', e => { alert('小程序打開失敗'); console.log('fail', e.detail); }); }); }); wx.error(res => { // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名
 console.log(res); }); }, // 監聽跳轉
 handleLaunch() { console.log('跳轉'); }, // 監聽錯誤
 handleError() { console.log('失敗'); } } }; </script>

<style></style>