Day005 UniApp 开发前的准备

1. 常用组件

a. uni-ui ：官方提供的。
b. uView：比较权威，也很好用的组件库。
c. uCharts：非常好用的图表库。
d. weapp-cookie：小程序支持cookie的库。
e. ThorUI：这个UI库一般般，免费的不太好用、会员版要收150元。

2. 目录结构

1. api：请求API用的。
2. common：通用文件夹，比如页面路径、宏定义之类的。
3. components：外部组件文件夹，自定义组件，需要修改的那种。
4. env：环境文件夹，开发、测试、演示和生产等环境文件。
5. node_modules：npm组件。
6. pages和pages_XXX：页面包，其中pages是主包、pages_XXX
7. static：静态文件夹。
8. uni_modules：uni-app的组件文件夹。
9. unpackage：打包文件夹。
10. util：工具包文件夹。
11. App.vue：Vue入口文件。
12. index.html：HTML入口文件。
13. main.js：JS入口文件。
14. uni.scss：SCSS主题样式入口文件。
15. pages.json：页面配置文件。
16. manifest.json：uni-api项目配置文件。
17. profiles：各种证书的文件夹。

3. UniApp开发步骤

1. 画页面和拆组件。
2. 添加API接口。
3. 联调测试。
4. 打包发布。

4. 微信小程序开发步骤

4.1 申请一个小程序并完成认证：注意主体和类别。

4.2 获取小程序app_id和app_secret。

4.3 设置后端开发、测试、演示和生产等环境的服务域名。

4.4 生成小程序代码上传密钥。

4.5 关联微信支付商户号。

4.6 设置微信订阅消息。

4.7 添加体验版成员和开发成员。

4.8 发包提审并发布。

5. 准备UniApp的项目

5.1 新建项目

默认目录如下：

├── App.vue
├── index.html
├── main.js
├── manifest.json
├── pages
│   └── index
│       └── index.vue
├── pages.json
├── static
│   └── logo.png
└── uni.scss

5.2 安装依赖

5.2.1 weapp-cookie

npm install weapp-cookie --save

图片.png

5.2.1 uni-ui

图片.png

5.2.2 uView

图片.png

5.2.3 uView

图片.png

5.2.4 luckyui

博主把常用的SDK和组件集合成一个UI库。在开源项目源码里面获取。

5.3 添加手脚架目录和文件

博主基于多年多个项目的开发经验，整理了一套非常适合UniApp快速开发的功能手脚架。在开源项目源码里面获取。

5.3.1 common 通用文件夹

1. app_define.js：放宏定义的。
2. app_pages.js：放页面路径定义的。
3. app_res_map.js：放请求返回code表的。

在main.js引入

import app_pages from 'common/app_pages.js'
import app_define from 'common/app_define.js'

Vue.prototype.$app_pages = app_pages
Vue.prototype.$app_define = app_define

5.3.2 util 工具文件夹

1. request.js：请求接口的封装。

5.3.3 api 接口文件夹

1. index.js：入口文件

在main.js引入

import app_api from 'api/index.js'

Vue.prototype.$app_api = app_api

5.3.4 components 组件文件夹

参考开源项目工程

5.3.5 env 环境文件夹

1. index.js：入口文件。
2. dev.js：开发环境。
3. test.js：测试环境。
4. demo.js：演示环境。
5. prod.js：生产环境。

环境文件配置：

// 主节点
const main_host = 'http://127.0.0.1:8000'
// 分支节点
const dep_host = 'http://127.0.0.1:8000'
// 中心节点
const cen_host = 'http://127.0.0.1:8000'

const env_title = '开发环境'

export default {
    main_host,
    env_title,
    cen_host,
    dep_host
}