HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题


Posted in HTML / CSS onMay 28, 2020

需求催动此篇博客的诞生

项目背景

之前也没写过小程序但是看过之后都是现成的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 嵌入小程序没有返回按钮页面空白内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 #HTML / CSS
html5拖拽应用记录及注意点
May 27 #HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 #HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 #HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 #HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 #HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 #HTML / CSS
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
python 中xpath爬虫实例详解
2019/08/26 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python 实现性别识别
2020/11/21 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
servlet面试题
2012/08/20 面试题
物业保安岗位职责
2014/07/02 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
财务工作个人总结
2015/02/27 职场文书
政工师工作总结2015
2015/05/26 职场文书
个人更名证明
2015/06/23 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫