需求催动此篇博客的诞生
项目背景
之前也没写过小程序但是看过之后都是现成的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 嵌入小程序没有返回按钮页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
格式编码 1、页面宽度请设定在600到800px以内,长度1024px以内。 2、HTML编码请...
如题:高度已知,左右栏宽度300px,中间自适应: 弹性盒子本身就是并排的,我们...
纯css图切换 练习 教程来自snwebsite 1 2 3 [Ctrl+A 全选 注: 引入外部Js需再刷...
先看页面效果。下面四个按钮分别表示开始、结束、暂停、继续 下面是帧动画图片素...
性能真的很重要吗? 性能很重要,这个大家都知道。为什么我们还要做出速度很慢的...
XLink是一种基于属性的语法,用来在XML文档中添加链接。XLink链接可以是单向的,...
前言 刚参加工作时被面试官一连串居中问题虐的体无完肤得场景历历在目。你是如何...
Dreamweaver CS3设计网页的时候, 我们经常能泳道表格,它以简洁明了和高效快捷...
演示图如下: HTML代码片段: !DOCTYPE HTMLhtml head title404/title meta char...
记录下一个疑问,最近在重新看canvas做点Demo这样,时间是写在2019年11月5日,以...