一、uni app介绍、部署、目录结构
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。
了解下什么是 uni-app
快速上手
二、uni的样式和布局
- 可以在根目录app.vue定义全局样式，子页面可以单独定义单页样式
- 基准宽度为750px，建议设计宽度为750px ，
- 导入外联样式和使用内联样式
- 选择器 .class #id element
三、 uni配置相关
pages.json 可以进行页面配置
- pages 进行每个页面的声明
- globalStyle 全局页面样式设置。也可以在每个页面进行单独页面样式设置
- tabBar 页面菜单项设置
- condition 开发期间生效，编译模式，测试模拟页面使用
- 其它配置可以在编辑器内查看
四、生命周期
五、模版语法和数据绑定
- 模版和变量关系
<template>
<view>{{title}}---{{age}}</view>
</template>
data(){
return {
title: 'you age：',
age:'19',
}}
- 列表渲染 v-for
- 判断渲染 v-if
六、class 和 style 的使用
class 支持的语法:
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
style 支持的语法:
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
七、uni事件处理
几乎全支持 Vue官方文档：事件处理器
// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
{
click: 'tap', 点击时
touchstart: 'touchstart', 触摸时
touchmove: 'touchmove', 触摸移动时
touchcancel: 'touchcancel', 停止跟踪触摸时
touchend: 'touchend', 触摸移出时
tap: 'tap', 按下时
longtap: 'longtap', 长按时
input: 'input', 输入时
change: 'change', 选择时
submit: 'submit', 表单提交时
blur: 'blur', 失去焦点时
focus: 'focus', 获得焦点时
reset: 'reset', 表单重置时
confirm: 'confirm', 显示消息提示时
columnchange: 'columnchange', 字段变化时
linechange: 'linechange', 行变化时
error: 'error', 错误时
scrolltoupper: 'scrolltoupper', 滚动到顶部时
scrolltolower: 'scrolltolower', 滚动到底部时
scroll: 'scroll' 滚动时
}
- 事件修饰符 stop
- 事件绑定 @click="事件函数名"
- 事件监听、传参
八、基础组件使用
image.png
九、表单组件使用
image.png
十、导航，跳转页面 navigator
navigator
两种跳转方式
<navigator url="/pages/index/index">
<button type="primary">back</button>
</navigator>
<button type="default" @click="skip()">back</button>
skip(){
uni.navigateTo({
url: '/pages/index/index'
});
}
十一、媒体组件
image
image.png
十二、网络请求
uni.request(OBJECT)
示例
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';
}
});
十三、照片选择及预览
uni.chooseImage(OBJECT)
示例
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
十四、文件上传和下载
uni.saveFile(OBJECT)
示例代码：
uni.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths;
uni.saveFile({
tempFilePath: tempFilePaths[0],
success: function (res) {
var savedFilePath = res.savedFilePath;
}
});
}
});
十五、本地数据存储
uni.setStorage(OBJECT)
示例
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
十六、设备相关
image.png
十七、界面》设置导航条
uni.setNavigationBarTitle(OBJECT)
十八、下拉刷新
onPullDownRefresh
十九、上拉加载
二十、跨端兼容方案
条件编译
条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
<!-- #ifdef %MP-WEIXIN% -->
微信特有的组件
<!-- #endif -->
二十一、交互反馈
uni.showToast(OBJECT)
uni.showToast({
title: '标题',
duration: 2000
});
uni.showLoading(OBJECT)
uni.showLoading({
title: '加载中'
});
uni.hideLoading()
uni.showLoading({
title: '加载中'
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
uni.showModal(OBJECT)
uni.showActionSheet(OBJECT)
二十二、第三方登录详解
- mainifest.json 配置
-
uni.login(OBJECT)
二十二、分享接口
uni.share(OBJECT)
二十三、字体图标
字体图标
示例：
<template>
<view>
<view>
<text class="test"></text>
<text class="test"></text>
<text class="test"></text>
</view>
</view>
</template>
<style>
@font-face {
font-family: 'iconfont';
src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
}
.test {
font-family: iconfont;
margin-left: 20upx;
}
</style>
二十五、打包及课程推荐
打包为原生App（离线）
二十六、新闻列表、详情小实战
跳过。https://www.bilibili.com/video/av48272338/?p=26
二十七——二十九、在uni-app中使用vue
- 加载数据
- 公共模块使用
- 绑定class和style
- v-for
三十、自定义组件和使用
视频教程
待具体实践加深
