小程序和web之間相互跳轉並且支持傳參實現筆記


首先小程序想要使用web-view就需要企業類型才可以使用。

微信官方的說明:web-view 組件是一個可以用來承載網頁的容器,會自動鋪滿整個小程序頁面。個人類型與海外類型的小程序暫不支持使用。

首先在小程序首頁的wxml中添加web-view組件,代碼如下

<web-view src="https://www.test.com/miniprogram.html?id=123"></web-view>

接着在自己的網站中添加一個html頁面,名字為miniprogram.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="application/javascript">
$(function () {
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    var id = getQueryString("id");
    console.log('id='.id);
    $('#button').click(function () {
       wx.miniProgram.redirectTo({
           url: '/pages/back/back?id=456',
       });
   });
});
</script>
<body>
<input id="button" type="button" value="打開小程序">
</body>
</html>

接着寫一個小程序頁面接收參數

小程序wxml代碼如下

<button bindtap='buttonClick'>id:{{id}}</button>

小程序js代碼如下

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    id:null
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
      id: options.id
    })
  }
})

完成了。。


免責聲明!

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



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