1. 常用组件
a. uni-ui ：官方提供的。
b. uView：比较权威，也很好用的组件库。
c. uCharts：非常好用的图表库。
d. weapp-cookie：小程序支持cookie的库。
e. ThorUI：这个UI库一般般，免费的不太好用、会员版要收150元。
2. 目录结构
-
api：请求API用的。 -
common：通用文件夹，比如页面路径、宏定义之类的。 -
components：外部组件文件夹，自定义组件，需要修改的那种。 -
env：环境文件夹，开发、测试、演示和生产等环境文件。 -
node_modules：npm组件。 -
pages和pages_XXX：页面包，其中pages是主包、pages_XXX -
static：静态文件夹。 -
uni_modules：uni-app的组件文件夹。 -
unpackage：打包文件夹。 -
util：工具包文件夹。 -
App.vue：Vue入口文件。 -
index.html：HTML入口文件。 -
main.js：JS入口文件。 -
uni.scss：SCSS主题样式入口文件。 -
pages.json：页面配置文件。 -
manifest.json：uni-api项目配置文件。 -
profiles：各种证书的文件夹。
3. UniApp开发步骤
- 画页面和拆组件。
- 添加API接口。
- 联调测试。
- 打包发布。
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 通用文件夹
-
app_define.js：放宏定义的。 -
app_pages.js：放页面路径定义的。 -
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 工具文件夹
-
request.js：请求接口的封装。
5.3.3 api 接口文件夹
-
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 环境文件夹
-
index.js：入口文件。 -
dev.js：开发环境。 -
test.js：测试环境。 -
demo.js：演示环境。 -
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
}
