uniapp简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多端运行。（ios，android，Web, 各种小程序）
优点
- 开发者/案例数量多
- 平台能力不受限
- 性能体验优秀
- 周边生态丰富
- 学习成本低
- 开发成本低
功能框架
image.png
开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定以下规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范，详见uni-app 组件规范
- 接口能力（JS API）靠近微信小程序规范，但需将前缀
wx替换为uni，详见uni-app接口规范 - 数据绑定及事件处理同
Vue.js规范，同时补充了App及页面的生命周期 - 为兼容多端运行，建议使用flex布局进行开发
环境搭建
通过HBuilderX可视化界面搭建
HBuilderX:下载地址
通过cli脚手架搭建
全局安装vue-cli
npm install -g @vue/cli
创建uniapp
vue create -p dcloudio/uni-preset-vue my-project
创建uni-app
这里通过HBuilderX编译器创建
点击文件-》新建-》项目
image.png
选择uni-app类型，输入项目名，选择默认模板
image.png
点击创建，一个uni-app就创建好了。
目录结构
.hbuilderx 启动调试时相关设置
components 符合vue组件规范的uniapp组件
pages 业务页面
static 存放静态资源
uni_modules 存放uni-module规范的插件
unpackage 发布后的文件
App.vue 应用配置，app的全局样式及应用的生命周期
main.js Vue初始化入口文件
manifest.json 应用配置文件，名称，appid，logo等。
pages.json 配置页面路由，导航条，选项卡等。
应用生命周期
| 函数 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
<script>
//只能再App.vue里监听应用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
页面生命周期（常用）
| 函数 | 说明 | 平台差异 |
|---|---|---|
| onInit | 监听页面初始化 | 百度小程序独有 |
| onLoad | 监听页面加载 | |
| onShow | 监听页面显示 | |
| onReady | 监听页面初次渲染完成 | |
| onHide | 页面隐藏 | |
| onUnload | 监听页面卸载 | |
| onResize | 监听尺寸变化 | App,微信小程序 |
| onPullDownRefresh | 监听下拉动作，用于下拉刷新 | |
| onReachBottom | 滚动到底部事件 | |
| onPageScroll | 监听页面滚动 | |
| onBackPress | 监听返回键 |
路由
uni-app 页面路由为框架统一管理，需要再page.json里配置每个路由页面及页面样式
路由跳转
uni.navigateTo 保留当前页面，跳转到新页面
uni.redirectTo 关闭当前页面，跳转到新页面
uni.reLaunch 关闭所有页面，打开应用内的某个页面
uni.switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面
uni.navigateBack 关闭当前页面，返回上一个页面
尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx
推荐使用rpx
uni-app应用，屏幕宽度以750为基准，自适应，页面宽度设置750rpx就恰好为屏幕宽度。
- 注意 在APP端或者H5端，如果屏幕宽度达到960px时，屏幕宽度以375为基准。
页面配置
pages.json 中配置了uni-app的页面路径，窗口样式，原生的导航栏，底部原生的tabbar等。
常用属性
- globalStyle 默认页面样式
- pages 设置页面路径及样式
- tabBar 底部tab样式
网络
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
如果要返回requestTask 对象，需要至少传入success，fail，complete参数中的一个，
如果没传，则会返回Promise对象，如下
// Promise
uni.request({
url: 'https://www.example.com/request'
})
.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
var [error, res] = data;
console.log(res.data);
})
或者
// Await
async function request () {
var [error, res] = await uni.request({
url: 'https://www.example.com/request'
});
console.log(res.data);
}
数据存储
//异步
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
//同步
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
数据获取
//异步
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
//同步
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
判断平台
编译期判断
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
运行期判断
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
全局变量
共用模块
在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的方法。
const now = Date.now || function () {
return new Date().getTime();
};
在其他页面中使用
<script>
import helper from '../../common/helper.js';
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + helper.now());
},
methods: {
}
}
</script>
挂载 Vue.prototype
将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。
在main.js中挂载属性/方法
Vue.prototype.now = Date.now || function () {
return new Date().getTime();
};
在其他页面中使用
<script>
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + this.now());
},
methods: {
}
}
</script>
globalData
小程序中有个globalData概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。
在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。
在App.vue中定义
<script>
export default {
globalData: {
text: 'text'
},
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
在其他页面中使用
赋值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text) // 'test'
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
举例说明：
在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值
const store = new Vuex.Store({
state: {
login: false,
token: '',
avatarUrl: '',
userName: ''
},
mutations: {
login(state, provider) {
console.log(state)
console.log(provider)
state.login = true;
state.token = provider.token;
state.userName = provider.userName;
state.avatarUrl = provider.avatarUrl;
},
logout(state) {
state.login = false;
state.token = '';
state.userName = '';
state.avatarUrl = '';
}
}
})
然后，需要在 main.js 挂载 Vuex
import store from './store'
Vue.prototype.$store = store
最后，在页面中使用
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
...mapMutations(['logout'])
}
}
</script>
网友评论