zoukankan      html  css  js  c++  java
  • 微信小程序(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,
        })
      }
    })
  • 相关阅读:
    pymysql模块的使用
    MySQL创建用户、授权和备份
    多表查询
    单表查询
    mysql性能优化2
    mysql性能优化1
    穷人的思维
    thinkphp所有参数配置
    似水流年
    memecached常用命令
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/13218254.html
Copyright © 2011-2022 走看看