使用web-view实现小程序内嵌h5页面 h5跳转回小程序 详情步骤
实现线上的h5通过小程序配置业务域名,web-view组件实现内嵌h5页面 再跳转回小程序
·
简介
实现线上的h5通过小程序配置业务域名,web-view组件实现内嵌h5页面,h5跳转回小程序
一. h5项目放入效验文件传到线上
登录微信公众平台下载效验文件 开发管理——>开发设置——>业务域名——>下载效验文件
然后把效验文件放在 npm run build打包后的h5项目根目录里 部署上传到线上 注意一定要打包后放入根目录里也就是dist文件包 内
二. 小程序配置业务域名
配置业务域名 由上图可以看出 要注意两点
1.h5的项目域名必须是https的
2.项目链接不能由/api的 正确格式www.baidu.com
三. 通过组件web-view进行传参跳转
我这边 是使用 click点击事件跳转到webview页面 在通过web-view组件跳转到h5项目
1. 创建webview页面 pages.json文件内 "pages"
{
"path" : "pages/webview/webview",
"style" :
{
// "navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
2. 创建click点击事件函数
goH5Edit(){
// 需要携带的参数
const nav={
token:'125456',
id:'24556',
dis:'no'
}
路由动态跳转到webview页面
uni.navigateTo({
url:'/pages/webview/webview?nav='+JSON.stringify(nav)
})
}
},
3. 在webview页面中接收参数 创建web-view组件进行跳转到h5 代码如下
<template>
<!-- 创建web-view组件 src路径是你将要跳转的h5路径 -->
<web-view src="https://255555555555552555?nav=${nav}"></web-view>
</template>
<script>
export default {
data() {
return {
nav:''
};
},
updated(e) {
// 接收路由传参 赋值传到H5中
this.nav=e
}
}
</script>
这时已经可以跳转到h5页面了,那边通过this.$route.query接参即可
二。h5 携带参数跳转到小程序界面
1.vue2 项目 在html中全局引入uni包
注 微信和支付宝的包要放在uni包上面
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
2.代码中使用uni-app的api
uni.redirectTo({
url: '/a/a/a?images='+JSON.stringify(this.images)
});
更多推荐
已为社区贡献1条内容
所有评论(0)