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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
个人简历自荐信
2013/12/05 职场文书
股份合作协议书范本
2014/04/14 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
数学教研活动总结
2014/07/02 职场文书
安全责任书范文
2014/08/25 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
礼仪培训心得体会
2016/01/22 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
Redis 异步机制
2022/05/15 Redis