小程序和web之间相互跳转并且支持传参实现笔记-优快云博客

本文详细介绍了如何在企业类型的小程序中使用WebView组件加载外部网页，并通过示例代码展示了参数传递和页面跳转的方法。

首先小程序想要使用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
    })
  }
})

完成了。。

转载于:https://www.cnblogs.com/romicLord/p/10509686.html