温斯顿吴的博客 模仿、熟练、超越

小程序H5简单交互

2018-07-12

需求

  • 在小程序中打开一个H5页,完成一系列的操作(图片合成);
  • 小程序要能传参给H5;
  • H5能获取小程序的传参;
  • H5中操作完成后,返回小程序指定页面;
  • H5返回小程序时,能传递参数给小程序;
  • 小程序能获取H5的传参;

配置

  • 小程序管理后台新增业务域名:
    https://miniapp-test.xxx.com
    
  • 下载校验文件,并放在业务域名的根目录下;

注意事项

  • 实际开发中,参数需要使用base64编码,因为参数中会带有中文、符号等;
  • 使用encodeURI,encodeURLComment,escape等编码,web-view可能会白屏;

小程序跳转页-用于打开H5页面

<!--h5.wxml-->
<view class="container">
  <block>
      <text>小程序H5交互-跳转</text>
  </block>
  <block>
    <web-view src="https://miniapp-test.wemeshops.com/miniapp-jump.html?p="></web-view>
  </block>
</view>

// h5.js
const app = getApp()

Page({
  data: {
    p:"abc",
  },
})

小程序落地页-用于从H5调回小程序后接收落地参数

<!--ret.wxml-->
<view class="container">
  <block>
      <text>小程序H5交互-返回</text>
  </block>
  <block>
    <text></text>
  </block>
</view>

// ret.js
const app = getApp()

Page({
  data: {
    ret:"empty"
  },

  onLoad: function (e) {
    console.log(e) 
    this.setData({
      ret: "来自H5的参数:"+e.ret
    })
  },
})

H5页面

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>

<h1>H5网页</h1>

<input type="button" name="button" style="width:100%;" value="返回并传值" onclick="javascript:butOnclick();"/>

<label id="p"></label>

<script>
    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 p = getQueryString("p");

    // https://miniapp-test.wemeshops.com/miniapp-jump.html?p=123
    document.getElementById("p").innerText = "来自小程序的参数:"+p;

    function butOnclick() {
        wx.miniProgram.navigateTo({url: '/pages/h5/ret?ret=123'});
//        wx.miniProgram.getEnv(function (res) {
//            console.log(res.miniprogram) // true })
//        });
    }
</script>

</body>
</html>

下一篇 5G

文章目录