uni-app - 通用项目框架搭建及项目结构调整

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 - 全局常量和变量

在这里插入图片描述

至此，一个通用项目框架搭建结束