uni-app初使用

关于样式

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素；

nvue：native vue的缩写

nvue开发与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

巴特西

uni-app初使用

最新文章

热门文章