# 开发手册-小程序端（uni-app）

# 1、开发说明

# 1.1 代码下载

# 1.2 技术清单

运行环境：HBuilder + 微信开发者工具
项目框架：uni-app (opens new window)
UI框架：uview-ui (opens new window)
全局状态：Vuex

# 1.3 目录结构

├─ apis  请求服务端的接口文件存放目录                                       
│  └─ base.js                                   
├─ common  通用的文件                                     
│  ├─ common.js                                 
│  ├─ config.js                                 
│  └─ index.js                                  
├─ pages 业务页面文件存放的目录                               
│  ├─ index                                     
│  │  └─ index.vue                              
│  ├─ login                                     
│  │  └─ login.vue                              
│  └─ user                                      
│     └─ user.vue                               
├─ static  存放应用引用静态资源                                                             
├─ store  状态管理目录                                      
│  └─ index.js                                  
├─ uni_modules                                  
│  └─ uview-ui                                  
│  
├─ unpackage                                    
│  └─ dist                                      
│     └─ dev                                    
│        └─ mp-weixin                                 
├─ utils 存放的一些工具类                                       
│  └─ request.js                                
├─ App.vue 应用配置，用来配置App全局样式以及监听应用生命周期              
├─ index.html                                   
├─ main.js                                      
├─ manifest.json  配置应用名称、appid、logo、版本等打包信息                              
├─ package.json                                 
├─ pages.json  配置页面路由、导航条、选项卡等页面类信息                                 
├─ README.md                                    
└─ uni.scss

# 2、快速开始

# 2.1 安装 ide

1、下载开发工具 HBuilderX (opens new window)

HBuilderX是通用的前端开发工具，但为uni-app制成特别强化。

2、下载微信开发者工具 (opens new window)
使用HBuilderX导入项目

（1）下载的小程序源码 framework-uniapp

（2）HBuilderX导入项目

# 2.2 运行项目

进入framework-uniapp项目，点击工具栏的运行->运行到小程序模拟器->微信开发者工具，即可在微信开发者工具里面体验framework-uniapp项目

输入账号密码：3htest/123 即可登录

注意：如果是第一次使用，需要先配置小程序ide的相关路径（见下图），才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径复制到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可以看到实时的效果。

# 2.3 配置接口地址

此处配置后端的接口地址，此处以建协云后台接口为例，当然你也可以根据需求添加自己的业务接口

# 2.4 配置用户中心登录接口

在vuex中配置ucLoginUrl，该接口为产线自己开发

# 3、编写一个页面

# 3.1 创建vue页面

在pages目录下，创建vue页面

随便写点什么

运行到微信开发者工具

# 3.2 发送请求

/**
 * @param {String} url 接口
 * @param {Object} param  请求参数
 * @param {String} method: 请求方法,大写，默认 POST
 */
this.$request( url, param, method ).then(res=>{
  // do sth...
}).catch(err => {
	uni.$u.toast(err.msg)
})