计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
在 HBuilderX 的 uni-app
项目中,新建页面,弹出界面右上角可以选择是建立vue
页面还是nvue
页面,或者 2 个同时建。
不管是 vue
页面还是 nvue
页面,都需要在pages.json
中进行路由注册。在 HBuilderX 中新建页面是会自动注册的,如果使用其他编辑器,则需要自行在 pages.json
里手工注册。
如果一个页面路由下同时有 vue
页面和 nvue
页面,即出现同名的 vue
和 nvue
文件。那么在 App 端,会仅使用 nvue
页面,同名的 vue
文件将不会被编译到 App 端。而在非 App 端,会优先使用 vue
页面。
如果不同名,只有 nvue
页面,则在非 app 端,只有 uni-app 编译模式的 nvue
文件才会编译。
3.2 开发 nvue 页面
nvue
页面结构同 vue
, 由 template
、style
、script
构成。
- template: 模板写法、数据绑定同 vue。
- style:由于采用原生渲染,并非所有浏览器的 css 均支持,布局模型只支持 flex 布局,虽然不会造成某些界面布局无法实现,但写法要注意。详见:样式
- script:写法同 vue,并支持 3 种 API:
3.3 调试 nvue 页面
HBuilderX 内置了 weex
调试工具的强化版,包括审查界面元素、看 log、debug 打断点,详见 app-debug。
3.4 应用场景
在平时开发过程中,经常会遇到各种层级覆盖和原生界面自定义的问题:
- 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏,比如 popup盖不住tabbar。
- 弹出层内部元素可滚动,
- 在地图、视频等组件上的添加复杂覆盖组件:比如直播视频上覆盖滚动的聊天记录。
通过webview
嵌套H5时,若需要在APP实现弹窗效果,考虑到页面层级问题。此时,可通过subNvue
实现。
subNvue
,是 vue 页面的原生子窗体,把weex
渲染的原生界面当做 vue
页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件,就是一个原生子窗体。
通过获取subNVue
实例的方式来设置子窗体样式。
- 通过 id 获取
nvue
子窗体
const subNVue = uni.getSubNVueById('设置的id')
- 打开
nvue
子窗体
// 第一个参数子窗体动画效果
// 第二个参数持续时间
// 第三个参数修改样式函数
subNVue.show('slide-in-left', 300, () => {
// 修改子窗体样式,同pages.json的style配置
subNvue.setStyle({
top: '0',
right: '0',
width: '100%',
height: '20px'
});
});
- 关闭
nvue
子窗体
subNVue.hide('fade-out', 300)
通过以下方式设置子窗体样式:
subNVue.setStyle({
top: '100px',
left: '20px',
width: '100px',
height = '50px',
})
四、拓展阅读
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法