0、HX编辑器 项目创建

[ 文件 ] -> [ 新建 ] -> [ 项目 ]
选 uni-app 默认项目

1、新页面

1.1 页面文件

在pages目录下新建模块test，再创建test.vue页面

1.2 注册页面

在pages.json文件里，注册新页面
path即路由

2、引入element-ui组件

2.1 安装element-ui

npm i element-ui -S

2.2 全局声明

在main.js中加入，如图

// element-ui引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2.3 使用

在 element-ui官网 查找所需组件，在页面文件直接引用组件即可

效果如图

3、MD5加密引入

3.1 安装

npm install --save js-md5

3.2 引入

3.2.1 单个文件引入

import md5 from 'js-md5'

然后javascript里就可以如下进行加密

md5("string")  // 默认全小写
md5("string").toUpperCase()  // 全大写

3.2.2 全局引入

在main.js中

// md5加密
import md5 from 'js-md5'
Vue.prototype.$md5 = md5

在需要使用的页面文件里，如下进行使用

this.$md5("string")  // 全小写
this.$md5("string").toUpperCase()  // 全大写

4、前后端交互

4.1 后端api统一管理

4.1.1 api统一管理文件

创建config目录，再创建api.js用于管理api，如图，命名看个人喜好

在该文件内进行 api 管理
使用 module.exports 将命名后的 api 暴露出来，使可以在其他文件里调用到，如图

4.1.2 api获取

在需要的文件内通过require获取

const API = require("../../config/api")  // 相对路径定位前面的管理文件
如 API.getIdentState 即可获取

4.2 api调用

使用uni.request进行，例：

	let header = { "Content-Type": "application/x-www-form-urlencoded" }
	let data = { key1: value1, key2: value2, ... }  // 封装数据
	uni.request({
		url: API.getIdentState,  // 前文管理的 api url
		data: data,  // 前面封装的数据
		method: "POST",  // 指定提交方式 GET/POST
		header: header,  // 前面创建的请求头
		success: res => {  // 请求成功后的动作
			if (res.statusCode == 200) {  // 获取状态码
				console.log(res.data)
				...
			}
		}
	}),
	fail:res =>{  // 请求失败后的回调动作
		...
    }