Uniapp框架使用说明
目录
- 开发工具
- 新建项目
- 项目结构
- 页面结构
- 项目开始
- 接口配置地址
- 接口请求
- 页面跳转
- 回调传参
- 使用Vuex，定义全局变量
- 使用自定义素材（iconfont图标）
- 运行环境判断
- 兼容小程序分包
开发工具
HBuilderX：官方IDE下载地址，下载App开发版（280M左右那个）
是的，你没有看错，只需要这一个工具就可以啦，当然如果需要开发微信小程序的话还需要下载微信开发者工具，快捷传送门
新建项目
使用HBuilderX新建项目：
- 填写项目名称
- 填写项目目录地址
- 选择项目模板，我一般使用自带uni组件的项目模板，根据开发需求也可以使用其他模板
项目结构
一个uni-app工程，默认包含如下目录及文件：
┌─components uni-app组件目录（官方组件或者第三方插件放置目录）
│ └─comp-a.vue 可复用的a组件（对应的组件。无需引入，直接使用）
│
┌─common 放置公共js文件，图标文件等
│
├─hybrid 存放本地网页的目录
│
├─platforms 存放各平台专用页面的目录
│
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
│
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│
├─wxcomponents 存放小程序组件的目录
│
├─main.js Vue初始化入口文件
│
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
│
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
│
└─pages.json 配置页面路由、导航条、选项卡等页面类信息
页面结构
页面文件遵循Vue 单文件组件 (SFC) 规范
每个 .vue文件包含三种类型的顶级语言块 、模块内引入定义的接口请求方法：
<script>
import api from '../../common/api/api.js';
export default {
...
};
</script>
- 接口请求方法：
let self = this;//在接口结果处理是需要使用self，不能使用this
let param = {
//参数
};
api.request({
requestUrl: this.$RequestUrl,//接口地址
url: '/login',//接口名称
method: 'POST',//请求方式 POST或者GET
data: param,//参数
header: {
'content-type': 'application/x-www-form-urlencoded' },//请求头
success: res => {
if (res.data.errno == self.$successCode) {
//成功的处理
self.data=res.data.data;
} else {
//失败的处理
}
},
fail() {
//失败的处理
},
complete() {
//完成的处理
}
});
注意：接口请求目前封装了一般请求方式和单文件上传，如需更多可以到common/api中根据需求自行封装。
页面跳转
- 页面跳转
uni.navigateTo(OBJECT)
//在起始页面跳转到test.vue页面并传递参数
let param = {
id: '1'
};
let paramStr = JSON.stringify(param); // 这里转换成 字符串
uni.navigateTo({
url: '../../pages/test?paramStr=' + encodeURIComponent(paramStr)
});
//test.vue的onLoad方法中接收数据
onLoad: function(e) {
var data = JSON.parse(decodeURIComponent(e.paramStr)); // 字符串转对象
this.id= data.id;
},
- 重定向uni.redirectTo(OBJECT)，关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({
url: 'test?id=1'
});
- uni.reLaunch(OBJECT)，关闭所有页面，打开到应用内的某个页面。
uni.reLaunch({
url: 'test?id=1'
});
- uni.switchTab(OBJECT)，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '/pages/index/index'
});
- uni.navigateBack(OBJECT)，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
uni.navigateTo({
url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
url: 'C?id=1'
});
// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
delta: 2
});
回调传参
使用uni.$on，uni.$emit，uni.$off的方式进行页面通讯
// 接收信息的页面
// $on(eventName, callback)
uni.$on('page-popup', (data) => {
console.log('标题：' + data.title)
console.log('内容：' + data.content)
})
// 发送信息的页面
// $emit(eventName, data)
uni.$emit('page-popup', {
title: '我是title',
content: '我是content'
});
//结束监听
// $off(eventName, data)
uni.$off('page-popup',(data) => {
console.log('标题：' + data.title)
console.log('内容：' + data.content)
});
使用Vuex，定义全局变量
- 在工程目录下新建
store/index.js，state中添加变量值，mutations添加变量修改方法。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
hasLogin: false,//是否登录
nickname: "", // 昵称
signature: "", // 签名
avatar: "", // 头像
},
mutations: {
login(state, val) {
state.hasLogin = true;
state.nickname = val.nickName; // 昵称
state.signature = val.signature // 签名
state.avatar = val.avatarUrl; // 头像
},
logout(state) {
state.hasLogin = false;
state.nickname = "";
state.signature= "";
state.avatar = "/static/logo.png";
}
},
actions: {
}
})
export default store
- 在页面