基本知识
.目录分析
1.基本目录如下
┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录，详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录 详见
| └─ios iOS原生资源目录 详见
├─hybrid App端存放本地html文件的目录，详见
├─wxcomponents 存放小程序组件的目录，详见
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─Info.plist iOS原生应用配置文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss 这里是uni-app内置的常用样式变量
2.补充说明
1.manifest.json 各种配置和打包信息
1.含窗口模式 和 代码模式 [最后一项 源码视图]
3.pages.json
1.新建页面后 选择 创建同名目录 和 在 pages.json 中注册 就可以将新建的 页面添加的 配置里面
2.app 启动后的 第一个页面 默认是 配置项的第一个 为了测试页面 可以随意移动
3.tabBar
1.可以通过 "iconfontSrc": "/static/font/iconfont.ttf", 引入 字体
1.在 list 单个 里面设置 iconfont 对象 各项
1.注意 只要用 iconfont 外部的 颜色属性不生效 只有 list 里面 设置的颜色才生效
2.另外 从 iconfont 库复制出来的字体默认是 十进制的 ๢ 但是 设置的时候 需要去掉 十进制 用 \uxe62
"tabBar": {
"color": "#085555",
"selectedColor": "#8E360D",
"fontSize": "20px",
"iconfontSrc": "/static/font/iconfont.ttf",
"list": [{
"pagePath": "pages/index/index",
"iconfont": {
"text": "\ue62a",
"selectedText": "\ue62a",
"color": "#085555",
"selectedColor": "#8E360D"
}
}, {
"pagePath": "pages/list/list",
"text": "列表"
},
{
"pagePath": "pages/about/about",
"iconPath": "/static/0007.jpg",
"selectedIconPath": "/static/logo.png",
"text": "关于"
}
]
}
1.注意事项
1.path 不用加根路径 加上反而找不到
2.iconPath selectedIconPath 需要加根路径 不加找不到 加相对路径 ./static/0007.jpg 也找不到
1.到底相对于谁参照的?
.杂项
1.H5 支持 html 的标签 比如 i strong 之类的 但是微信小程序不支持 所以为了 代码的打包的平台扩展性 避免使用
1.所谓不支持 是指 原本有的样式丢了 不是不显示
2.这是不是反而更好的 完全用css控制 避免原生标签效果的影响
图标库 iconfont.cn
1.查找 线性对应面性 图标过程
1.搜索后 查找某个图标 点击下载 点击所属图标库 就可以看到了 里面有这个对应类型的图标库
关于单位
1.rpx 响应式单位 整个屏幕宽度 750rpx 你设置 20rpx 无论换到任何的设备 屏幕如何变化 都会按照响应的比例 来算出来
1.真实的屏幕分辨率 133.4 * 750 [这个不重要 了解而已]
常见标签
1.view [block]
1.所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件
2.它类似于传统html中的div，用于包裹各种元素内容
3.有关属性
hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，
1.App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒
2.icon [inline-block]
1.<icon :type="value" size="26"/>
2.value 的 值有:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
1.types:["success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"]
3.可以通过 css 设置 width height 只能控制占位 无法控制 图标大小 图标大小需要用 属性 size 来控制
4.可以设置默认的颜色
type String icon的类型
size Number 23 icon的大小，单位px
color Color icon的颜色，同css的color
3.text [inline]
1.selectable Boolean false 文本是否可选
2.类似span
4.scroll-view [block]
1.属性
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
2.当作为父元素 子元素超出 父元素 是否允许滚动
5.swiper [block] 轮播图
<swiper class="out" circular duration="500" autoplay interval="1000" current="0" indicator-dots indicator-color="rgba(255,0,0,.5)" indicator-active-color="purple">
<swiper-item class="son">1</swiper-item>
<swiper-item class="son" style="background-color: yellow;">2</swiper-item>
<swiper-item class="son" style="background-color:aqua">3</swiper-item>
</swiper>
6.image [block]
1.最主要的 mode 参数
缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
1.会留白边 因为 依长边完全显示为主 短边只能以空白补充 才能保证缩放比例不变
缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。
1.也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
2.以短边为主 完全显示 为了比例不变 长边只能做出牺牲 裁剪
缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
缩放 heightFix 高度不变，宽度自动变化，保持原图宽高比不变
1.App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
裁剪 top 不缩放图片，只显示图片的顶部区域
裁剪 bottom 不缩放图片，只显示图片的底部区域
裁剪 center 不缩放图片，只显示图片的中间区域
裁剪 left 不缩放图片，只显示图片的左边区域
裁剪 right 不缩放图片，只显示图片的右边区域
裁剪 top left 不缩放图片，只显示图片的左上边区域
裁剪 top right 不缩放图片，只显示图片的右上边区域
裁剪 bottom left 不缩放图片，只显示图片的左下边区域
裁剪 bottom right 不缩放图片，只显示图片的右下边区域
7.video [inline-block]
1.autoplay 必须在 muted 为 true 才生效
8.input [block]
9.label [inline]
10.picker [block]
<picker @change="bindPickerChange" :value="index" :range="types">
<view class="uni-input">{{types[index]}}</view>
</picker>
2.picker 在下面选择后 qi
11.slider [block]
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
12.switch [inline-block]
<switch checked />
13.navigator
1.该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册
2.部分属性
1.url
1.应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
2.open-type
1.navigator 默认值 对应 uni.navigateTo 的功能
1.有历史记录 可以返回
2.无法跳到 tabBar 的 页面
2.redirect 对应 uni.redirectTo 的功能
1.没有历史记录 无法返回
2.无法跳到 tabBar 的 页面
3.switchTab 对应 uni.switchTab 的功能
1.可以带参数
2.可以跳到 tabBar 的 页面 不可以带参数
4.reLaunch 对应 uni.reLaunch 的功能 抖音小程序与飞书小程序不支持
1.不可以带参数
2.可以跳到 tabBar 的 页面 还可以带参数
5.navigateBack 对应 uni.navigateBack 的功能
1.返回上一页
6.exit 退出小程序，target="miniProgram"时生效 微信2.1.0+、百度2.5.2+、QQ1.4.7+
3.navigator 可包裹 标签 比如图片 <navigator><image src=""></navigator> 点击图片跳转
14.form [block]
1.常见的 form 标签组件
1.button checkbox input lable picker radio slider switch textarea editor picker-view form
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
<view class="title">switch</view>
<view>
<switch name="switch" value="I am switch"/>
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">radio</view>
<radio-group name="radio">
<label>
<radio value="radio1" /><text>选项一</text>
</label>
<label>
<radio value="radio2" /><text>选项二</text>
</label>
</radio-group>
</view>
<picker @change="bindPickerChange" :range="types" name="picker">
<view class="uni-input">{{types[index]}}</view>
</picker>
<view class="uni-form-item uni-column">
<view class="title">checkbox</view>
<checkbox-group name="checkbox">
<label>
<checkbox value="checkbox1" /><text>选项一</text>
</label>
<label>
<checkbox value="checkbox2" /><text>选项二</text>
</label>
</checkbox-group>
</view>
<view class="uni-form-item uni-column">
<view class="title">slider</view>
<slider value="50" name="slider" show-value></slider>
</view>
<view class="uni-form-item uni-column">
<view class="title">input</view>
<input class="uni-input" name="input" placeholder="这是一个输入框" />
</view>
<view class="uni-btn-v">
<button form-type="submit">Submit</button>
<button type="default" form-type="reset">Reset</button>
</view>
</form>
2.提交结果
1.{"switch":true,"radio":"radio2","checkbox":["checkbox1","checkbox2"],"slider":65,"input":"1111"}
3.from 绑定的两个事件
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
var formdata = e.detail.value
uni.showModal({
content: '表单数据内容：' + JSON.stringify(formdata),
showCancel: false
});
},
formReset: function(e) {
console.log('清空数据')
}
4.uni-app form 组件标签 比 Vue 增加了 radio-group checkbox-group 不用为每个加 name
5.注意事项
1.每个组件绑定的事件里面 如果没有传参 第一个参数会传过来一个 e e.detail.value 就是当前的 值 的索引
2.如果传参了 第一个就是参数 想获取当前组件的值 可以 直接应用 event 事件
3.这里的this当然 仍是 vc
15.rich-text 富文本 自动解析 html 标签
1.<rich-text :nodes = "detail.content"></rich-text>
组件
1.uni-app 组件时自动引入的 不像 vue 先 import ，然后 components 注册 最后页面 引入
1.只要按约定在 根目录下建立 components 文件夹 把组件放这里面 就可以自动引入 只要你建了这个文件夹 右键 有新建组件 其他文件夹无
2.组件的自动引入 靠的是 路径和文件名 和 组件定义的名字无关
生命周期
1.除了vue的生命周期 自己独有的
1.onLaunch
1.创建后
2.onShow
1.显示
3.onHide
1.隐藏
2.执行顺序如下
created
App Launch
App Show
mounted
3.经常用的事件
1.onLoad 在这里处理初始化的事情 更靠谱
2.onPullDownRefresh 触顶 更新
1.页面上面 触顶 会触发 需要 手动取消 否则一直转圈圈
2.uni.stopPullDownRefresh() 处理完数据后 调用 该api
3.onReachBottom 触底 更新
onReachBottom(){
console.log("到底部了")
if(this.loading==2){
return;
}
this.currentPage++;
this.loading=1;
this.getNews();
},
常见Api
1. uni.showModal
uni.showModal({
content: '表单数据内容：' + JSON.stringify(formdata),
showCancel: false
});
2.跳转类
1.uni.navigateTo({}) 无法跳转到 tabBar 有历史
2.uni.redirectTo(OBJECT) 无法跳转到 tabBar 无历史
3.ni.reLaunch(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 路径后 可以 带参数
4.uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 路径后 无法 带参数
4.uni.navigateBack({delta:1}) 如果历史记录没有 也就是说 返回的 历史层次大于 现有的历史层级 就返回到主页
1.好像实测是 返回到 当前页 不是主页
2.等于刷新本页面
3.可以用 getCurrentPages() 来获取当前的历史层级
1.当前的页面栈 是一个 数组[vc,vc]
5.凡是 以 路由跳转过去的 从 this.$route 可以访问到路由的 各种信息 地址 参数 等等
onLoad(e) {
this.$route // 可以拿到
console.log(e) //{key: 'hello'}
}
3.界面类
1.uni.showToast() 显示提示
1.uni.showToast({title:"hello",icon:"success"})
uni.showToast({
title: '标题',
icon: "error",
duration: 4000,
mask: true,
success: () => {
//立即调用 并不会等到 toast 消失
console.log("showTotas success")
},
fail: () => {
//如果失败 立即调用 并不会等到 toast 消失
console.log("showTotas fail")
},
complete: () => {
//如果失败 成功 都 立即调用 并不会等到 toast 消失
console.log("showTotas completed")
},
});
2.uni.hideToast() 隐藏
3.uni.showLoading 显示加载中 没有时间限制 唯一的必须 uni.hideLoading() 执行 才取消
uni.showLoading({
title: '加载中',
mask:true,
success(){
console.log("success")
}
});
4.uni.showModal(OBJECT)
uni.showModal({
title: '提示',
content: '下定离手 各安天命',
showCancel:true,
cancelText:"还是算了吧",
cancelColor:"#FF0000",
confirmText:"梭哈",
confirmColor:"#007aff",
editable:true,
placeholderText:"place holder",
success: function(res) {
console.log(res)
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
5.uni.showActionSheet 类似 picker
uni.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function(res) {
console.log(res.errMsg);
}
});
6. 导航头类
1.uni.setNavigationBarTitle 设置导航头文本
uni.setNavigationBarTitle({
title: '新的标题'
})
2.uni.setNavigationBarColor 设置导航头颜色
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor:"#007aff"
})
3.uni.showNavigationBarLoading 头部加载状态 uni.hideNavigationBarLoading 取消头部加载状态
uni.showNavigationBarLoading()
setTimeout(()=>{
uni.hideNavigationBarLoading()
},2000)
7.导航底部 tabBar
1.uni.setTabBarItem(OBJECT) 设置 底部导航 页就是再 pages.json 里面胚子和的选项
1.注意如果想设置的 icon 必须在 pages.json 里面已经设置过 否则会出错
uni.setTabBarItem({
index: 1,
text: 'text',
"iconfont": {
text: "\ue62a",
"selectedText": "\ue62a",
"fontSize": "20px",
"color": "#085555",
"selectedColor": "#8E360D"
}
})
2.uni.setTabBarStyle(OBJECT) 设置 底部 的样式
uni.setTabBarStyle({
color: '#FF0000',
selectedColor: '#00FF00',
backgroundColor: '#0000FF',
borderStyle: 'white'
})
3.uni.hideTabBar(OBJECT) 隐藏底部导航栏
4.uni.showTabBar(OBJECT) 显示底部导航栏
5.uni.setTabBarBadge 设置消息
uni.setTabBarBadge({
index: 2,
text: '3'
})
6.uni.removeTabBarBadge 移除消息
uni.removeTabBarBadge({
index:0
})
7.uni.showTabBarRedDot/uni.hideTabBarRedDot 显示/隐藏 红点
uni.showTabBarRedDot({
index:1
})
8.uni.request 网络请求
uni.request({
url: 'http://192.168.0.11', //仅为示例，并非真实接口地址。
// GET POST PUT DELETE CONNECT HEAD OPTIONS TRACE 支持方法很多
method:"get",
data: {
action: 'get_knowledge',
skip_knowledge:1,
limit_knowledge:20
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
//res 数据结构如下
// data Object/String/ArrayBuffer 开发者服务器返回的数据
// statusCode Number 开发者服务器返回的 HTTP 状态码
// header Object 开发者服务器返回的 HTTP Response Header
// cookies Array.<string> 开发者服务器返回的 cookies，格式为字符串数组
console.log("ok,ok")
console.log(res);
this.text = 'request success';
},
fail(error) {
console.log("fail ok",error)
},
timeout:5000,
complete(res) {
//不管成功与失败都会执行
//这里的 res 分别对应 fail 里面的 error 和 success 里面的 res
//完全一样 等于是结果的备份
console.log("complete ok",res)
}
});
9.uni.getStorage
1.获取 storage 数据 uni 内部做了 字符串转化 直接 存储 取 对象 数组 不用再 JSON 去转
2.如果 初次 取这个key 没有的话 会报错 所以 如果失败 直接存进入一个 空的
uni.getStorage({
key: 'qnb_history',
success: (res) => {
//[{detail},{detail}]
console.log(res)
this.newsList = res.data || []
},
fail() {
uni.setStorageSync('qnb_history', [])
},
complete() {
uni.hideLoading()
}
});
3.例子 2
saveHistory(){
uni.getStorage({
key: 'qnb_history',
success: (res) => {
//[{detail},{detail}]
console.log(222,res)
let tmpHistory =res.data || []
//当前的历史 记录里面 有重复 需要更新 浏览时间
let {cid,id} = this.detail
let flagIndex = tmpHistory.findIndex((item)=>{
if(id === item.id && cid === item.cid){
return true;
}
})
if(flagIndex !== -1){
//如果找到 删除
tmpHistory.splice(flagIndex,1)
}
tmpHistory.unshift({...this.detail,seeTime:Date.now()})
uni.setStorage({
key: 'qnb_history',
data: tmpHistory,
success: function () {
console.log('set storage success');
}
});
},
fail(error) {
console.log(11111,error)
let tmpHistory = []
tmpHistory.push({...this.detail,seeTime:Date.now()})
uni.setStorage({
key: 'qnb_history',
data: tmpHistory,
success: function () {
console.log('set storage success');
}
});
},
complete() {
uni.hideLoading()
}
});
},
8.剪切板操作
uni.setClipboardData({
data: tmp,
success: function () {
console.log('复制成功');
}
});
uni.getClipboardData({
success: function (res) {
//获取剪切板内容
console.log(res.data);
}
});
常见错误
1.appid 不存在，请在 manifest.json 中重新获取
1.点击 manifest.json 基本配置 获取即可
ani-app 发布
1.h5 发布
1.点 发行-->网址pc或H5
1.首先 点击 manifest.json --> web配置
1.路由配置 hash
2.运行的基础路径 ./ [填相对路径 放到任何网站下 访问 目录 直接可以访问]
2.如果遇到 appid 不存在，请在 manifest.json 中重新获取 的错误提示
1.点击 manifest.json 基本配置 获取即可
2.app 发布
1.原生app云打包
2.App常用配其他置 里面
1.有支持的 cpu 类型
2.使用广告标识 IDFA
3.app图标配置
1.设置第一个图标后 点击自动生成所有图标并替换 就会生效 并且生成 各个 类型版本的 图标
常见组件 CSS注入 和 计算
1.sroll-view 不要滚动条
//让scroll-view 不显示滚动条 但是可以滚动
/deep/ ::-webkit-scrollbar {
width: 4px !important;
height: 1px !important;
overflow: auto !important;
background: transparent !important;
-webkit-appearance: auto !important;
display: block;
}
2.顶部导航栏高度 计算
.content {
margin-top: calc(var(--window-top) + 30rpx);
3.多行省略号
.title {
color: #333;
width: 100%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 这里是超出几行省略 */
overflow: hidden;
}
}
