uni-app初使用
关于样式
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素;
nvue:native vue的缩写
- nvue支持的全部css
- nvue的盒模型默认为boder-box;在IOS中,nvue支持overflow:hidden和overflow:visible,默认overflow:visible;Android只支持overflow:hidden;
- nvue只支持flex布局,默认方向是column。仅支持属性justify-content,align-items,flex-direction,flex-wrap,flex{number};查阅manifest应用配置文档,可以在app-plus对象下修改flex-direction为row(仅在 uni-app 模式下生效)。
- 布局不能使用百分比、没有媒体查询。
- nvue 切换横竖屏时可能导致样式出现问题,建议有 nvue 的页面锁定手机方向。
- nvue 页面控制显隐只可以使用
v-if
不可以使用v-show。
- nvue编译为H5、小程序时,会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。
- 文字内容,必须、只能在
<text>
组件下。只有text
标签可以设置字体大小,字体颜色。 - 不支持背景图。但可以使用
image
组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。 - 使用
image
标签,支持使用base64,不支持svg格式图。 - css选择器支持的比较少,只能使用 class 选择器。如上关于样式的记录:样式暂不支持通用选择符 *。
class
进行绑定时只支持数组语法。- nvue 的各组件在Android端默认是透明的,如果不设置
background-color
,可能会导致出现重影的问题。 - Android端在一个页面内使用大量圆角边框会造成性能问题,尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
- nvue页面没有
bounce
回弹效果,只有几个列表组件有bounce
效果,包括list
、recycle-list
、waterfall
。(????) - 原生开发没有页面滚动的概念,页面内容高过屏幕高度并不会自动滚动,只有部分组件可滚动(
list
、waterfall
、scroll-view/scroller
),要滚的内容需要套在可滚动组件下。这不符合前端开发的习惯,所以在 nvue 编译为 uni-app模式时,给页面外层自动套了一个scroller
,页面内容过高会自动滚动。(组件不会套,页面有recycle-list
时也不会套)。后续会提供配置,可以设置不自动套。(????) - 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。
globalData
和vuex
是生效的。 - App.vue 中定义的全局css,对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持,编译时控制台会报警,建议把这些不支持的css包裹在条件编译里,
APP-PLUS-NVUE
- 不能在
style
中引入字体文件,nvue 中字体图标的使用参考:加载自定义字体。如果是本地字体,可以用plus.io
的API转换路径。 - 目前不支持在 nvue 页面使用
typescript/ts。(20221119记录)
- nvue 页面关闭原生导航栏时,想要模拟状态栏,可以参考文章。但是,仍然强烈建议在nvue页面使用原生导航栏。nvue的渲染速度再快,也没有原生导航栏快。原生排版引擎解析
json
绘制原生导航栏耗时很少,而解析nvue的js绘制整个页面的耗时要大的多,尤其在新页面进入动画期间,对于复杂页面,没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。 -
iOS 平台默认情况下滚动容器组件(如
list
、waterfall
组件)内容不足时,由于没有撑满容器的可视区域会导致无法上下滚动,此时无法操作下拉刷新功能,无法触发refresh
组件的@refresh
、@pullingdown
事件。 此时可在容器组件中配置alwaysScrollableVertical
属性值为true
来设置支持上下滚动,支持下拉刷新操作。
运行小程序端
运行npm run dev:mp-weixin,成功后在微信开发者工具中打开dist/dev/map-weixin,点击“编译”;
官方文档:
uni-app 中可使用的 UI 框架:https://ask.dcloud.net.cn/article/35489
uni-app 导航栏开发指南: https://ask.dcloud.net.cn/article/34921
uni-app 实现全局变量: https://ask.dcloud.net.cn/article/35021
uni-app 引用 npm 第三方库: https://ask.dcloud.net.cn/article/19727
uni-app 中使用微信小程序第三方 SDK 及资源汇总:https://ask.dcloud.net.cn/article/35070
原生控件层级过高无法覆盖的解决方案:https://uniapp.dcloud.io/component/native-component
国际化/多语言/i18n方案:https://ask.dcloud.net.cn/article/35872
本地存储详解:https://ask.dcloud.net.cn/article/166
uni-app 各环节(HBuilderX、cli、自定义基座、本地sdk、云打包引擎)版本兼容性说明:https://ask.dcloud.net.cn/article/35845
uni-app App整包升级检测: https://ask.dcloud.net.cn/article/34972
uni-app App资源热更新: https://ask.dcloud.net.cn/article/35667
App全面屏、安全区、刘海屏适配:https://ask.dcloud.net.cn/article/35564
App权限状态判断及引导:https://ext.dcloud.net.cn/plugin?id=594
Android平台上架要求的隐私政策提示配置方法:https://ask.dcloud.net.cn/article/36937
Android平台应用启动时读写手机存储、访问设备信息(如IMEI)等权限策略及提示信息:https://ask.dcloud.net.cn/article/36549
App打包前端代码进行加密:https://ask.dcloud.net.cn/article/36437
Android App字体跟随Rom默认字体/系统字体详见
uni-app 中使用 5+ 的原生界面控件(包括map、video、livepusher、barcode、nview):https://ask.dcloud.net.cn/article/35036
App分享到微信时分享为小程序:使用plus.share,设置分享类型为miniProgram。注意uni-app不需要plus ready,将plus ready里的代码写到页面的onLoad生命周期即可
App启动微信小程序:使用plus.share的launchMiniProgram。注意uni-app不需要plus ready,将plus ready里的代码写到页面的onLoad生命周期即可
App初期启动的引导轮播: 因为是App专用,为了更好的性能,推荐使用nvue制作。参考插件市场已经封装的插件https://ext.dcloud.net.cn/plugin?id=676
双向https认证: TLS 双向认证 详情
iOS平台适配暗黑模式(DarkMode):https://ask.dcloud.net.cn/article/36995
原生App和uni-app混合开发: 详见
uni-app 的 H5 版使用注意事项:https://ask.dcloud.net.cn/article/35232
开发微信公众号(H5)JSSDK 的使用方式:https://ask.dcloud.net.cn/article/35380