Uni-app

初识uni-app

2018-12-26  本文已影响11人  w_wx_x

官方文档: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

上一篇 下一篇

猜你喜欢

热点阅读