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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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常用代码
2006/11/23 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
浅谈js中的bind
2019/03/18 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
行政管理专业推荐信
2013/11/02 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
新年联欢会主持词
2014/03/27 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014年导购员工作总结
2014/11/18 职场文书
优秀团员事迹材料
2014/12/25 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL