官方文档:https://uniapp.dcloud.io/README
什么是uni-app
使用 Vue.js 开发 跨平台 应用的前端框架
编写一套代码,可编译到多个平台【iOS,安卓,小程序(微信,支付宝,百度),H5】
快速上手
方式一:通过 HBuilderX 创建项目(https://uniapp.dcloud.io/quickstart?id=%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE)
方式二:通过 vue-cli 命令行创建项目(https://uniapp.dcloud.io/quickstart?id=%E9%80%9A%E8%BF%87vue-cli%E5%91%BD%E4%BB%A4%E8%A1%8C)
注:cli脚手架仅支持编译为H5网站、支付宝小程序、百度小程序,若需要运行到微信小程序或APP,则将根目录下的src文件夹拖至HBuilderX中,点击 '运行' 菜单执行
开发规范
页面文件 遵循Vue单文件组件规范(https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B)
组件标签 靠近微信小程序规范(不能使用标准的HTML标签,也不能用js对dom进行操作)(https://uniapp.dcloud.io/component/README)
接口能力 靠近微信小程序规范,需要将wx前缀改为uni(https://uniapp.dcloud.io/api/README)
数据绑定、事件处理 靠近Vue.js规范,同时补充了App及页面声明周期
建议使用 flex 布局,兼容多端
样式:upx尺寸单位,设计师采用iphone6(375px)作为设计稿,uni-app规定屏幕基准宽度750upx
注:动态绑定style不支持直接使用upx,使用uni.upx2px(Number)进行转换
https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80