微信小程序(20)-- 小程序與H5如何互相跳轉


小程序跳轉H5

需要用到小程序的web-view,https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

web-view是承載網頁的容器,會自動鋪滿整個小程序頁面。

<view class="page-body">
    <web-view src="https://xxx.com/h5.html"></web-view>
</view>

H5跳轉小程序

因為外部h5無法跳轉到小程序,因此需要把h5內嵌到小程序的web-view中。

1、首頁小程序內嵌h5網頁,內嵌這一步就相當於上面的小程序跳轉h5:

<view class="page-body">
    <web-view src="https://xxx.com/h5.html"></web-view>
</view>

2、然后在內嵌的網頁里引入js,調用wx.miniProgram.navigateTo跳轉小程序方法,可在url后拼接要傳的參數:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>h5跳轉小程序</title>
    </head>
    <body>
        <div align="center">正在跳轉到小程序...</div>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
        <script>
                wx.miniProgram.navigateTo({url: '/index/index?id=78657'})
        </script>
    </body>
</html>

3、小程序接收參數的頁面:

Page({
  data: {
    id:''
  },

  onLoad: function (options) {
    var that = this;
    /*獲取參數*/
    var id = options.id
    that.setData({
      id: id,
    })
  }
})

 


免責聲明!

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



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