微信小程序與內嵌webview之間來回跳轉的幾點總結,以及二維碼的使用


截止到發稿小程序支持的功能,后續如果小程序更新在完善文稿。

1. 小程序可以內嵌組件跳轉到h5頁面,前提是在小程序后台配置相應的業務域名。新打開的h5頁面會替代小程序組件內的其它組件,即為h5不能與小程序組件共存顯示在屏幕上。

<web-view src="{{content}}"></web-view>

2. 打開的h5頁面可以通過觸發某事件可以跳轉到本小程序(不能是其它小程序)的任意頁面,並且可以攜帶參數。前提是在h5頁面引入相應jssdk。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
</head>

<body>
    <p id="app">點我跳轉此小程序</p>
    <script>
        var app = document.getElementById('app');
        app.onclick = function () {
            wx.miniProgram.redirectTo({url:'/pages/index/index?id=111'});
        };
    </script>
</body>
</html>

3. 本小程序可以跳轉到其它小程序,前提要知道對方APPID。並且要在app.json文件配置下,這里也可以通過path跳轉到其它子頁面,不填默認主頁。

詳情參考小程序文檔:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

//小程序代碼
<navigator target="miniProgram" open-type="navigate" app-id="對方APPID必填" path="" extra-data="" version="release" hover-class="none"></navigator>

4. 如果想要在webview內嵌的h5頁面,跳轉到其它小程序的實現途徑。

  a. 內嵌h5是不支持跳轉到其它外部小程序,即便用上面2里面的觸發事件也不能。

  b. 實現方法只能是在內嵌的h5頁面里面插入要跳轉的小程序的二維碼,可以通過長按識別的方法跳轉過去。(

     小程序只識別嵌入h5里面的其它的小程序的二維碼,不會識別其它二維碼,這個二維嗎還必須是菊花碼

  c. 菊花二維碼可以通過微信小程序后台生成,可以生成子頁面的菊花二維碼,也可以用外部工具來實現這個菊花二維碼的生成。

     草料二維碼可以實現實現菊花二維碼,並且可以有參數:https://cli.im/mina/home

  d. 小程序二維碼只能有一個參數,如果設置了多個參數就會被拼接。如果想要傳多個參數,需要自定義分割符,以及獲取。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM