uni-app是一个使用Vue.js语法来开发所有前端应用的框架（也称之为全端开发框架） 已经掌握了vue和小程序开发的话，上手uniapp基本很快就能掌握 vue的指令语法 + 小程序的组件和Api
上官网安装一下开发工具
https://www.dcloud.io/hbuilderx.html
然后需要安装微信开发者工具 最好用最新的
如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了 然后用开发工具 创建一个模板
components：uni-app可复用组件目录 pages：页面目录，里面每一个文件夹就是一个页面 static：静态文件的目录，如：图片、字体 App.vue：配置APP全局样式以及监听 main.js：vue初始化的入口 pages.json：页面配置文件 manifest.json：项目配置文件（应用名称、appid、logo、版本等打包信息） uni.css：内置的常用样式变量，可以直接使用
onLaunch：初始化完成时触发一次，全局触发一次 onShow：APP启动或从后台进入前台显示 onHide：APP从前台进入后台 onUniNViewMessage：对nvue页面发送的数据进行监听
onLode：监听页面加载，其参数为上个页面传递的数据 onShow：监听页面显示 onReady：监听页面初次渲染完成 onHide：监听页面隐藏 onUnload：监听页面卸载 onPullDownRefresh：监听用户下拉动作 onReachBottom：页面上拉触底事件的处理函数 onShareAppMessage：用户点击右上角分享（微信小程序） onPageScroll：监听页面滚动，参数为Object onNavigtionBarButtonTap：监听原生标签栏按钮点击事件（5+app） onBackPress：监听页面返回，详细说明及使用（5+app）
uni-app已经内置vuex 不需要再安装了 在根目录下新建store文件 在其目录创建index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { text: 'demo' }, mutations: { SetText(state, v) { state.text = v } }, actions: { setText: function({commit}, v) { commit('SetText', v) } } }) export default store然后在main.js入口文件
import Vue from 'vue' import App from './App' // 这里引入store import store from './store' // 这里是重要的一步 这里不写 app会找不到store Vue.prototype.$store = store const app = new Vue({ store, ...App }) app.$mount()打开manifest.json 这里是可视化的
mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置
如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了
支持微信小程序 H5 APP 其他没有测试
uni.createSelectorQuery() // 官方说自定义组件模式 要这样写 uni.createSelectorQuery().in(this)大家如果写过微信小程序的话都知道swiper是要写一个高度的，而uni-app等于也是一个加强版的小程序，swiper也要写高度，但我们都不太能确定高度，只能用一些办法来确定它的高度
第一种办法就是已知item的高度，在获取数据后，用item的高度*item的数量获得高度
第二种就是用节点获取高度，我自己就用这个办法，亲测app跟微信小程序都ok
<!-- 先在swiper组件写上动态style来获得高度 --> <swiper :style="{height: `${swiperHeight}px`}"> <swiper-item v-for="(item,index) in tabList" :key="index"> <div :class="columnList[index]"></div> </swiper-item> </swiper> // 这里的class 我一开始是用字符串模板来实现`columnList${index}` // 跑是能跑起来 但是会报错 忍不住自己就不用字符串了 // 接着使用fun的办法 但是uni-app不支持这种写法 // 后面想着用tabList的长度来初始化一个columnList （这个办法有点笨，如果有人有更好的办法，请告诉我这个菜鸡） // 书写一个获取节点的方法 get_wxml(className, callback) { uni.createSelectorQuery().select(className).boundingClientRect(callback).exec() } // 在onReady生命周期里面获取高度 onReady() { this.get_wxml(这里写你要获取的节点，我这里是我定义的columnList[index], (rects) => { this.swiperHeight = rects.height }) }多端开发肯定避免不了存在跨端的差异性，uni-app也提供了条件编译功能
#ifdef：if defined 仅在某平台存在 #ifndef：if not defined 除了某平台均存在
写法如下
#ifdef APP-PLUS 需条件编译的代码 #endif
uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异
