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
uni-app初使用的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- hybrid app初体验,和react-native一起飞
第一次启动了react-native的示例,今天主要把其中遇到的坑与解决的办法分享给大家.如有疏漏.错误还望指正. 首先还是要从hybrid app这个概念说起(如果对于这个过程不感兴趣的同学,可以直 ...
- uni app以及小程序 --环境搭建以及编辑器
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...
- uni app canvas 不生效
canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...
- uni app 零基础小白到项目实战2
<template> <scroll-view v-for="(card, index) in list" :key="index"> ...
- uni app 零基础小白到项目实战
$emit 子组件传给父组件 $ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http' const now = Date.now ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- 5G到来,App的未来,是JavaScript,Flutter还是Native ?
Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发.与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Nativ ...
- Vue接口日常学习
最近使用uni.app 进行app的开发 页面搭完之后,发现不会调接口,今天学习了下 各个程序运行时,都会发起网络请求,网络相关的API在使用之前都会在使用前配置域名白名单 首先 现在中间件上一 ...
随机推荐
- 聊一聊HTTPS双向认证的简单应用
目录 背景 准备工作 ASP.NET Core nginx 反向代理 IIS 部署 总结 参考资料 背景 在三方接口对接中,偶尔会遇到需要传递证书的情况,这种方式其实是在SSL握手过程中会同时验证客户 ...
- React Hooks的理解,React Hooks有哪些,解决了什么问题
一.是什么 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使 ...
- 【TS】枚举
ts中,枚举类型就是,枚举里面的每个数据值都可以叫做元素,每个元素都有自己的编号,编号是从0开始的,依次递增加1 , 语法: enum 枚举名 {} 此处定义一个枚举类型,例如: enum Color ...
- WinUI 剪裁发布中的一个小坑
WinUI 3 (以下简称 WinUI)框架发布后的二进制文件过大的问题存在了很长时间,我在这篇文章中有过详细的讨论,好在 Windows App SDK v1.2 就已经支持剪裁发布,但是我却一直没 ...
- 【KAWAKO】python查看内存空间占用情况
目录 查看变量的内存占用 查看运行内存占用 查看变量的内存占用 import sys c = 1145.114 print(sys.getsizeof(c)) 查看运行内存占用 import psut ...
- [NOI Online 提高组]冒泡排序
题目 洛谷等许多 \(OJ\) 都有 思路 考试题,今日无意又做了一次 然后发现自己读错题了······ 其实询问时只要 \(k\) 轮排序后的逆序对个数并不需要真的对序列进行更改 很显然 \(k\) ...
- 权限维持之:SID History 域控权限维持
目录 1 SID 作用 2 利用 SID History 操作过程 3 SID History 权限维持的防御 1 SID 作用 每个用户都有自己的SID,SID的作用主要是跟踪安全主体控制用户连 ...
- CCRD_TOC_2008年第4期
中信国健临床通讯 2008年第4期 目 录 类风湿关节炎 1. 大型系统评价分析:生物制剂与传统DMARD联用是MTX难治性RA患者的最佳治疗策略 Donahue KE, et al ...
- 第三周作业-N67044-张铭扬
1. 图文并茂说明raid0,raid1, raid10, raid01, raid5等原理. "RAID"是指独立硬盘冗余阵列(RAID, Redundant Array of ...
- 3.2 删除XxxControler中各方法中的response
3.2.1 EmpController代码 package com.hy.controller; import javax.servlet.http.HttpServletRequest; impor ...