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 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 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中使用全局变量的几种方法
2013/06/24 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
php开启openssl的方法
2014/05/15 PHP
php无序树实现方法
2015/07/28 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
js DOM的学习笔记
2011/12/22 Javascript
js倒计时小程序
2013/11/05 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
VSCode搭建React Native环境
2020/05/07 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python短信轰炸的代码
2020/03/25 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
开会迟到检讨书
2014/02/03 职场文书
安全生产实施方案
2014/02/23 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
旗帜观后感
2015/06/08 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
nginx共享内存的机制详解
2022/03/21 Servers