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效果,包括 listrecycle-listwaterfall。(????)
  • 原生开发没有页面滚动的概念,页面内容高过屏幕高度并不会自动滚动,只有部分组件可滚动(listwaterfallscroll-view/scroller),要滚的内容需要套在可滚动组件下。这不符合前端开发的习惯,所以在 nvue 编译为 uni-app模式时,给页面外层自动套了一个 scroller,页面内容过高会自动滚动。(组件不会套,页面有recycle-list时也不会套)。后续会提供配置,可以设置不自动套。(????)
  • 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalDatavuex是生效的。
  • 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 平台默认情况下滚动容器组件(如listwaterfall组件)内容不足时,由于没有撑满容器的可视区域会导致无法上下滚动,此时无法操作下拉刷新功能,无法触发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

posted @ 2022-11-19 20:10  Merrys  阅读(308)  评论(0编辑  收藏  举报