小程序与H5互相跳转

由于小程序官方没有提供外部H5网页直接跳转到小程序的api，所以目前只支持小程序内嵌H5，并且只有内嵌的H5才能跳回小程序

小程序跳转H5

需要用到小程序的web-view，官方文档链接

web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。写法如下：

<view class="page-body"><web-view src="https://xxx.com/test.html"></web-view>
</view>

注：当在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时，需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”

无标题.png

H5跳转小程序

因为外部h5无法跳转到小程序，因此需要把h5内嵌到小程序的web-view中。
一：首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5：

<view class="page-body"><web-view src="https://xxx.com/test.html"></web-view>
</view>

二：然后在内嵌的网页里引入js，调用wx.miniProgram.navigateTo跳转小程序方法，可在url后拼接要传的参数：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>h5跳转小程序</title></head><body><h3 align="center">正在跳转到小程序...</h3><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?phone=18012121212'})</script></body>
</html>

三：小程序接受参数的页面：
index.wxml:

<view class="page-body">
{{phone}}
</view>

index.js

Page({data: {phone:''},onLoad: function (options) {var that = this;/*获取参数*/var phone = options.phonethat.setData({phone: phone,})}
})

这样就从h5跳到小程序指定的页面并且可以拿到我们想要传的参数

关于web-view相关的接口：

官方js调用方法示例：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({data: 'foo'})
wx.miniProgram.postMessage({data: {foo: 'bar'}})
wx.miniProgram.getEnv(function (res) { console.log(res.miniprogram) })

小程序与H5互相跳转相关推荐

微信小程序与H5相互跳转和传递数据
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 这是小程序和web-vew的H5相互传参,H5使用小程序的微信支付的代码 H5部分 <!DOCTYPE ...
公众号客服消息如何跳转小程序和h5
例如上图,公众号回复的消息可以设置跳转小程序和H5. 跳转小程序(注:跳转前需公众号后台关联相应的小程序) <a data-miniprogram-appid="小程序appId&qu ...
h5跳转小程序页面url_web-view h5跳转到小程序页面，无法跳转？
web-view h5跳转到小程序页面,无法跳转?web-view h5 jumps to the applet page, can't jump?web-view h5跳转到小程序页面,无法跳转? ...
app能不能跳转外部h5_轻羽微信小程序和H5的区别在哪里？主要有三点
随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消 ...
微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...
微信小程序和H5之间相互跳转的几种情况
小程序跳转H5 直接通过web-view内嵌的方式,有且只有这一种方式. <web-view :src="url"></web-view> H5跳转小程序 ...
h5打开app_移动端产品比较分析：APP、小程序、H5
本文笔者从实际工作经验出发,结合参考相关文章,对移动端产品(APP.小程序.H5)从13个方面进行了比较分析,与大家分享. 移动端产品包括小程序(本文特指微信小程序).APP(安卓.IOS).H5页面 ...
省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究使用uniapp技术,提供学习使用不可商业适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
小程序与H5及混合应用测试
小程序.H5以及APP混合测试一.为什么要学小程序测试主流应用形态:1.原生APP(nativeAPP).应用市场,包括Android.IOS 2.小程序 3.H5 -- 相比上面2种形态真实使用 ...

小程序与H5互相跳转

小程序跳转H5

H5跳转小程序

小程序与H5互相跳转相关推荐

最新文章

热门文章