HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020-06-20 11:47
162 查看
需求催动此篇博客的诞生
项目背景
之前也没写过小程序但是看过之后都是现成的api 简单易懂 唯一就是会有很多坑要去踩 以为要写原生小程序 但是 是我想多了 公司是要节约开发成本 那么就衍生了H5嵌入小程序这个操作
必须的
1、要去申请一个小程序测试号要配置域名用
2、然后准备一套自己写的项目 测试用
代码部分
index.wxml文件
<web-view src="{{url}}#wechat_redirect"> </web-view>
#wechat_redirect 在ios页面出现空白页面的问题加一个这个
index.js文件
data:{ url: 'http://s2g6uk.natappfree.cc/#/home', }, onShow: function () { this.setData({ url: `http://s2g6uk.natappfree.cc/#/home?flag=${Math.random()}` }) }
在onShow地址重新给赋值一个随机数 保持加载最新的页面
vue 页面
页面的所有的跳转页面都要用到小程序 web-view 开放的跳转
web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面
在页面引入这个js文件
// 微信跳转下一个页面 goNextPage (pageName) { wx.miniProgram.navigateTo({ url: `/pages/webview/webview?weburl=${window.location.origin}/#/${pageName}` }) }
这样写就完全ok的 小程序编辑器 跳转之后返回是会有点问题 但是可以真机调试一下 在真机是完全没问题的
我本地调试是本地起了一个项目 然后用natapp 生成了一个域名 配置上去
总结
到此这篇关于HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题的文章就介绍到这了,更多相关html5 嵌入小程序没有返回按钮页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 小程序中跳到webview页面没有返回按钮?已解决
- 小程序webview跳转页面后没有返回按钮完美解决方案
- 解决微信返回按钮到上一页页面不刷新的问题
- 程序在Debug、Release下运行及单独运行Debug下的exe文件时没有问题;可是单独运行Release所生成的exe文件时,点击某一个按钮时,程序崩溃
- js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序
- 奇葩的问题 程序在三星手机上面跑起来每次打开页面都会FC,但是日志里面什么都没有
- Android之解决toolbar里面显示返回按钮图片太大和没有水平居中的问题
- js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序
- vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
- 在Fragment中点击退出按钮,退出到登录界面后(按返回键退出程序开始的时候,退出到登录界面按返回键无法退出程序,而是返回到上一个Activity,网上说是没有finish掉上一个Activity)
- 你的程序404页面没有返回404头部?一句PHP即可帮你返回404状态码
- action返回了success但是页面也没有局部刷新问题
- IDEA 编译Android代码发现的一个问题,编译运行后真机按home键,再点图标返回程序,老是重启而没有返回按home键时的Activity
- tomcat问题,jsp页面无法编译,web页面一片空白,log显示空指针,在tomacat的work文件夹下没有生成相应的Java文件
- ionic back 返回按钮不正常显示&&二级路由点击返回按钮失效无法返回到上一级页面的问题
- 详解解决小程序中webview页面多层history返回问题
- 微信小程序,开发者工具调试没有问题,真机调试找不到页面的问题
- springmvc+mybatis+maven项目集成的时候遇到一个问题,项目搭起来以后,http请求怎么都进不到controller中,页面直接返回404错误,控制台没有报任何错误,请大神帮我看看
- android4.2 高用zing拍照后,返回其它页面操作时,主线程关掉或程序退出的问题解决
- 使用bootstrap返回空白页面问题