uniapp
1、介绍
是一个使用vue.js开发的跨平台应用的前端框架,编写一套代码可以发布到多个终端平台
借鉴整合了vueJs、mpvue等前端开源框架,为了保证小程序的兼容,还借鉴了微信小程序的组件规范
2、优势
跨端数量更多
一套代码可以发布到IOS、Android、小程序、H5等多个平台
扩展能力较强(平台能力不受限)
可以优雅的为某平台书写个性化的代码,调用专有能力而不影响其它平台
支持原生代码混写和原生sdk集成
性能体验更加流畅
周边的生态较为丰富
支持npm包管理
兼容微信小程序自定义组件及JS-SDK
支持mpvue项目及组件
App端支持和原生混合编码
学习成本低
基于通用前端技术栈,采用vue语法+小程序api,无额外学习成本
开发成本低
3、产品理念
核心是提供跨端开发的最佳方案
(1)提升开发效率
(2)增强开发体验 【借助成熟的前端生态,降低开发者的学习门槛】
4、开发规范
页面文件遵循 【https://vue-loader.vuejs.org/zh/spec.html】
组件标签靠近微信小程序规范 【http://uniapp.dcloud.io/component/README】
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni 【http://uniapp.dcloud.io/api/README】
数据绑定及事件处理靠近 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
5、目录结构

|–components 【组件目录】

|–a.vue

|–pages 【页面文件存放目录】

|–index

|–index.vue

|–list

|–list.vue

|–static 【静态资源目录】

|–main.js 【初始化入口文件】

|–App.vue 【入口配置文件】

|–manifest.json 【配置信息文件】

|–page.json 【配置页面路由、导航、选项卡信息文件】
注意：
<1>.static目录不能解析js文件
<2>.建议css/less等样式文件也不要放到static下
<3>.路由不支持vue-router,需要到page.json里去配置
<4>.路由跳转有两种方式：navigator方式和调用api跳转
6、样式
使用upx作为默认尺寸单位
upx是相对于基准宽度的单位,可以根据屏幕宽度进行自适应
upx规定屏幕的基准宽度为750upx
计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度(就是设计稿按照多少设计的,通常是750)
7、固定值
导航栏高度固定为 44px
tabBar 高度固定为 56px
8、npm支持
uni-app支持使用npm安装第三方包
9、小程序组件支持
https://github.com/dcloudio/uni-app/tree/master/examples/wxcomponents-template
小程序组件需要放在项目根目录下的wxcomponents文件夹
10、新增和受限
uniapp借鉴了mpvue的实现,鉴于跨平台及App的特殊需求,相比web平台,vueJs在uniapp中的使用会存在一些差异
新增：除了vue实例的生命周期外,还支持应用启动、页面显示等生命周期
受限：比如v-html指令是不可用的;不支持部分复杂的 JavaScript 渲染表达式;不支持过滤器;命名不能采用小程序和vue的关键字和保留字
11、生命周期
vue生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
应用生命周期 【该类型的生命周期仅可以在App.vue中监听,其余页面监听无效】
onLaunch 【当uniapp初始化完成时触发(全局只触发一次)】
onShow
onHide
页面生命周期
onLoad() 【监听页面加载,参数为上个页面传递的数据，参数类型为Object（用于页面传参）】
onShow() 【监听页面显示】
onReady() 【监听页面初次渲染完成】
onHide() 【监听页面隐藏】
onUnload 【监听页面卸载】
onPullDownRefresh 【监听用户下拉动作，一般用于下拉刷新】
onReachBottom 【页面上拉触底事件的处理函数】
onShareAppMessage 【用户点击右上角分享】
onPageScroll 【监听页面滚动，参数为Object】
onNavigationBarButtonTap【监听原生标题栏按钮点击事件，参数为Object】
onBackPress 【监听页面返回】
注意：
<1>.先触发 uni-app 的 onReady ，后触发 vue 的 mounted
<2>.建议使用 uni-app 的 onLoad 代替 vue 的 created
12、全局组件

import Vue from ‘vue’

import pageHead from ‘./components/page-head.vue’

Vue.component(‘page-head’,pageHead)