demo 地址: https://github.com/iotjin/jh-uniapp-demo
本地数据存储：uni-app - 网络请求和数据存储工具类
自定义navbar：uni-app - 基于uView的base-navbar实现
全局常量和变量设置：uni-app - 全局常量和变量
scss的配置及使用：uni-app - 使用scss动态配置宫格布局
uni-app官网
uni-app插件市场
uni-app论坛
HBuilderX下载地址
官网介绍：
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
uni-app开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
博主觉得
uni-app较适合有多端开发需求或者支持多个小程序的项目，了解h5和Vue即可快速上手，懂小程序更佳，基本可以直接上手。推荐使用官方编译器HBuilderX进行开发。
如果要支持多端尽量选择多端兼容较好的插件，否则之后会遇坑不断
本项目使用的通用插件：uni-ui和uView UI
小程序端用的vant weapp
uni-app的页面结构、数据绑定及事件处理类似vue，只不过标签由div换成了view
组件、生命周期、api调用方法类似小程序
组件内部生命周期同vue
一些vue的方法在移动端可能不支持
1、项目结构
├── common
│ ├── configs
│ ├── libs
│ ├── style
│ └── utils
├── components
├── dataManager
│ └── userDataManager.js
├── http
│ ├── apiConfig.js
│ └── httpUtils.js
├── hybrid
│ └── html
├── node_modules
│ └── uview-ui
├── pages
│ ├── index
│ ├── login
│ ├── module1
│ ├── module2
│ ├── module3
│ └── module4
├── platforms
│ └── app-plus
├── static
│ ├── fonts
│ ├── images
├── uni_modules
├── unpackage
├── wxcomponents
│ └── vant
├── App.vue
├── main.js
├── manifest.json
├── package-lock.json
├── package.json
├── pages.json
├── uni.scss
2、创建uni-app项目
在点击工具栏里的文件 -> 新建 -> 项目
生成一个包含 uni ui的项目模板，下图是默认的项目结构
然后1、项目结构进行扩充
3、安装uView UI
3.1、安装
进入uView UI 官网>npm安装，按文档操作
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
3.2、npm配置
进入uView UI 官网>npm配置，按文档操作
关于配置easycom组件模式，要注意npm和下载安装的配置不一样
"easycom": {
// npm方式安装的配置
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// 下载安装方式配置
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
},
4、项目结构调整
然后按照
1、项目结构扩充项目结构
其中一级目录下的components、hybrid、platforms、static、uni_modules、
unpackage、wxcomponents文件夹都有特殊意义，尽量不要改文件名称
5、新建页面
在pages>module1文件夹右键>新建页面，依次创建主页面
6、pages.json配置
pages.json 文件介绍
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
6.1、导航条设置
可在pages.json设置导航条名称，也可动态设置
6.2、tabbar设置
主要通过pagePath和页面进行绑定
7、登录页
添加一个登录页，会有一个默认的导航条，在page把导航条背景色改成白色即可
APP启动之后，先判断是否登录，本项目通过判断本地是否存有用户信息，有的话跳转到主页面，没有跳转到登录页
本地数据存储可看：uni-app - 网络请求和数据存储工具类
自定义navbar可看：uni-app - 基于uView的base-navbar实现
全局常量和变量设置可看：uni-app - 全局常量和变量
至此，一个通用项目框架搭建结束