uniapp-通用项目框架搭建

洋漾 2021-09-26 PM 2181℃ 0条

> uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app [官网]( https://uniapp.dcloud.io "官网")
uni-app [插件市场](https://ext.dcloud.net.cn "插件市场")
uni-app [论坛]( https://ask.dcloud.net.cn/explore/ "论坛")
HBuilderX [下载地址](https://www.dcloud.io/hbuilderx.html "下载地址")

### [gitlab demo地址](https://gitlab.com/YIOIY/uni-app-demo "demo地址")
### 实现一些常用效果、封装通用组件和工具类
### 项目结构
```
├── common  				//公共文件
│   ├── style	  			//公共样式
│   └── utils	 		    //工具
├── components  		//自定义组件
├── configs					
│   ├── apiConfig.js   		//接口配置
│   └── projectConfig.js 	//项目配置
├── hybrid							//各平台静态页面（待添加）
│   └── html 
├── pages 					//前端页面
│   ├── index
│   ├── login
│   ├── module1
│   ├── module2
│   ├── module3
│   └── module4
├── platforms				//各平台文件（待添加）
│   └── app-plus
├── static 					//静态文件
│   ├── fonts
│   ├── images
├── uni_modules				//uni-app 插件
├── unpackage				//打包文件
├── wxcomponents			//微信运行文件
│   └── vant
├── App.vue					//主组件,页面入口
├── main.js					//uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。
├── manifest.json			//应用的配置文件，用于指定应用的名称、图标、权限等
├── package.json			//支持依赖
├── pages.json				//文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
├── uni.scss				//方便整体控制应用的风格。比如按钮颜色、边框风格
```
### 实现的一些效果
- 三方通用组件：`uni`组件（在 uni_modules 文件夹）和`uView`组件([uView官网](https://www.uviewui.com/))，刷新使用的`mescroll-uni`，`vant` 只在小程序使用
- ListView 相关
- GridView 相关
- uni 网络请求封装和 api 配置
- AES、RSA加解密，SHA256、MD5加密，base64编码解码
- 数据缓存
- 全局常量、变量
- 公共样式
- 基类组件: base-navbar、base-refresh-view
- 网络监听，设备类型和刘海屏判断
- 时间格式转换、正则校验、
- 封装一些组件(在 `components` 文件夹)和工具类(在 `utils` 文件夹)

### 请求优化
*  请求时长小于300ms 不显示loading
*  使用async await 网络请求失败增加重试机制

``` 
const request = (url, method, params, loadingText) => {
	getHeader()
	var timeoutID = setTimeout(() => {
		showLoading(true, loadingText)
	}, 100);
	return new Promise((resolve, reject) => {
		uni.request({
			url: url,
			method: method,
			data: handleSendData(params),
			header: _header,
			success(res) {
				resolve(handleReturnData(res.data))
			},
			fail(error) {
				let content = ""
				if (error.errMsg == "request:fail ") {
					content = "连接服务器失败, 点击重试";
				}
				if (error.errMsg == "request:fail timeout") {
					content = "请求超时, 点击重试";
				}
				
				if(content != ""){
					uni.showModal({
						title: "提示",
						content: "请求超时, 点击重试",
						showCancel: false,
						confirmText: "重试",
						success: async function() {
							let result = await request(url, method, params,loadingText);
							if (result) {
								resolve(result)
							} else {
								reject(result)
							}
						}
					})
					return
				}
				reject(handleReturnErrorData(error.errMsg))
			},
			complete() {
				showLoading(false)
				clearTimeout(timeoutID);
			}
		})
	});
}
```
### 部署
只需要把gitlab上项目下载下来，拖到HBuilderX上就可以了。
### 运行
![](https://blog.cnccy.com/usr/uploads/2021/09/1401120940.png)

### uniapp注意的点
- 尺寸单位：rpx(根据页面屏幕宽度缩放), 设计师按750px屏宽出图，程序员直接按rpx写代码即可。[详见](https://uniapp.dcloud.io/adapt?id=_3-%e5%86%85%e5%ae%b9%e7%bc%a9%e6%94%be%e6%8b%89%e4%bc%b8%e7%9a%84%e5%a4%84%e7%90%86)
- [开发环境和生产环境](https://uniapp.dcloud.net.cn/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83)
- [判断平台](https://uniapp.dcloud.net.cn/frame?id=%e5%88%a4%e6%96%ad%e5%b9%b3%e5%8f%b0)

标签: uniapp

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://blog.cnccy.com/89.html

上一篇 Ngrok内网穿透使用

下一篇 GitKraKen安装&破解

评论啦~

做难事必有所得，别让平淡杀灭你的志气2021年11月20日 23:05:39
专注、自省、简单朴实、自律、艰苦奋斗、坚韧、舍得放权、淡泊名利、居安思危、终身学习2021年07月06日 10:47:00
懂得越多，越发觉懂得越少。2021年02月05日 19:58:59
小米即时消息mimc很赞，文档链接：https://admin.mimc.chat.xiaomi.net/docs/2020年04月05日 20:59:00

uniapp-通用项目框架搭建

评论啦~

广而告之

栏目分类

博主动态 ~

标签云

uniapp-通用项目框架搭建

 评论啦~

广而告之

 栏目分类

博主动态 ~

标签云

评论啦~

广而告之

栏目分类

博主动态 ~

标签云