• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序(20)-- 小程序与H5如何互相跳转

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序跳转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,
    })
  }
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信 小程序跳转到的H5页面,再跳转回跳小程序发布时间:2022-07-18
下一篇:
微信小程序实现跳转的几种方式发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap