- 微信定义的这套语法，wxml、wxs，以及wx:if等语法，私有化太强。
- uni-app支持跨端多平台编译，多端开发成本低。
- 基于通用的前端技术栈，采用vue语法+微信小程序api，没有额外的学习成本。
uni-app官方推荐的开发工具为HBuilderX，不过由于本人习惯使用vscode，因此介绍如何在vscode中使用uni-app。
1.CLI工程
全局安装 vue-cli 3.x（如已安装请跳过此步骤）
通过CLI创建uni-app项目
此时，会提示选择项目模板，初次体验建议选择 项目模板，如下所示：
我这里选择默认模板。
2.安装vue语法提示插件vetur
<img src=https://developers.weixin.qq.com/community/develop/article/doc/“https://img-cdn-tc.dcloud.net.cn/uploads/article/20190827/f98722b481a8f8bdb29163a4d248926a.png” alt=“img” style=“zoom:67%;” />
3.目录结构
一个uni-app工程，默认包含如下目录及文件：
1.页面结构
页面结构和一般的vue一样，既有vue的生命周期，也有小程序的生命周期，如下所示：
2.tabbar和路由跳转
（1）tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。
（2）路由跳转
3.生命周期
uni-app支持vue以及小程序原生语法的生命周期。
4.全局变量
（1）通过Storage来设置
设置缓存：uni.setStorageSync(key, value)
获取缓存：uni.getStorageSync(key)
删除缓存：uni.removeStorageSync(key)
（2）getApp()
需要在app.vue里设置变量 globalData
设置变量：getApp().globalData.key = xxx
获取变量：let key = getApp().globalData.key
（3）vuex
uni-app 内置了vuex
什么时候需要用vuex？
- 当一个组件需要多次派发事件时。例如购物车数量加减。
- 跨组件共享数据、跨页面共享数据。例如订单状态更新。
- 需要持久化的数据。例如登录后用户的信息。
- 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。
5.分包
分包加载配置，此配置为小程序的分包加载机制。
因小程序有体积和资源加载限制，小程序平台提供了分包方式，优化小程序的下载和启动速度。
所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。
使用方法：
假设支持分包的 目录结构如下：
则需要在 pages.json 中填写
运行项目
发布项目