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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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+MySQL修改记录的方法
2015/01/21 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
高考考python编程是真的吗
2020/07/20 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
军训拉歌口号
2014/06/13 职场文书
机电专业求职信
2014/06/14 职场文书
励志演讲稿300字
2014/08/21 职场文书
政工例会汇报材料
2014/08/26 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
会议通知范文
2015/04/15 职场文书
高三数学教学反思
2016/02/18 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Java版 单机五子棋
2022/05/04 Java/Android