uniapp入门
uniapp是在vue和小程序的基础上构建的框架，因此只记录和vue以及小程序 使用不同的地方
1， hbuilder x 使用微信小程序开发工具， 需要开启小程序开发工具的端口号才行；
小程序工具->设置->通用设置->安全-> 开启端口
2， 如果联动微信小程序失败的话， 需要手动用微信开发工具的小程序开启uniapp项目 /dist/mp-vue项目
3， 设置页面中h5下的下拉刷新样式的代码为如下， （如果要设置一个具体特殊位置的样式会比较深）
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",//设置页面标题文字
"enablePullDownRefresh":true,//开启下拉刷新,
"backgroundColor": "#007AFF",
"h5":{
"pullToRefresh":{
"color":"red"
}
}
}
}
],4，样式
app.vue 是全局样式
其他的页面组件是局部样式 ，局部样式会覆盖全局同名样式
5，下拉刷新 和上拉加载更多
一般分为全局配置和局部配置，一般推荐局部配置
下拉刷新 ：
开启有两种方式：
前提通过pages的style属性点来配置界面开启下拉刷新
1， 手动触发
{
"path": "pages/message/message",
"style":{
"enablePullDownRefresh": true
}
},
vue文件
onPullDownRefresh(){
this.list = [...this.list, 6,7];
// 关闭下拉刷新
setTimeout(()=>{
uni.stopPullDownRefresh();
},1000)
}
2，在手动的基础上我们也可以选择事件触发
vue文件
methods:{
pull(){
// uni.startPullDownRefresh({
// success:()=>{this.list = [...this.list, 6,7]; console.log(1)},
// fail(){ console.log(2)},
// complete(){ console.log(3)}
// })
uni.startPullDownRefresh()
}
}
**********************
uni.startPullDownRefresh() 和 uni.stopPullDownRefresh() 是一对api 上拉加载更多
1， 通过style的onReachBottomDistance配置触底触发事件的距离
{
"path": "pages/message/message",
"style":{
"enablePullDownRefresh": true,
"onReachBottomDistance": 500
}
},
2， 定义该函数 onReachBottom
onReachBottom() {
this.list = [...this.list, 6,7,8,9,10];
console.log('loading')
},6，缓存
缓存这里有6个api，对应 h5的localstrorage 以及小程序的storage ，
注意 这里存储的是一个对象， 并且会自动存储 对象的；类型
例如 data: 100 存到会h5 的页面里是 {"type":"number","data":100}
上代码
getStorage(){
uni.getStorage({
'key':'score',
success(){
console.log('获取缓存成功，异步')
}
})
},
setStorage(){
uni.setStorage({
'data': 100,
'key':'score',
success(){
console.log('设置缓存成功，异步')
}
})
},
removeStorage(){
uni.removeStorage({
'key':'score',
success(){
console.log('移除缓存成功，异步')
}
})
},
getStorageAsync(){
uni.getStorageAsync({
'key':'score',
success(){
console.log('获取缓存成功，同步')
}
})
},
setStorageAsync(){
uni.setStorageAsync({
'key':'score',
'data':100,
success(){
console.log('设置缓存成功，同步')
}
})
},
removeStorageAsync(){
uni.removeStorageAsync({
'key':'score',
success(){
console.log('移除缓存成功，同步')
}
})
},7， 上传图片
8，条件注释
条件 分为三种情况
主要的开闭合标签关键字为 #ifdef 终端标识 #endif
以h5 和 小程序 为例
1，template
h5
条件注释h5
小程序
条件注释小程序
2，js //
h5
// #ifdef H5
console.log('H5')
// #endif
小程序
// #ifdef MP-WEIXIN
console.log("小程序")
// #endif
3，css /* */
h5
/* #ifdef H5 */
.case{
color:red
}
/* #endif */
小程序
/* #ifdef MP-WEIXIN */
.case{
color:blue
}
/* #endif */9，导航方式
声明式导航
1， 直接 到某个地址
detail
2， 杀死 前面几个页面， 重新打开新的页面（在小程序中有home按钮）
detail-redirect
3， 到tab页面 ， 到达tab页面没有返回页面 （tab页面没有返回按钮）
switchTab
命令式导航
1， 直接 到某个地址
goDetail(){
uni.navigateTo({
url:'/pages/detail/detail'
})
},
2， 杀死 前面几个页面， 重新打开新的页面（在小程序中有home按钮）
goDetailRedirect(){
uni.redirectTo({
url:'/pages/detail/detail'
})
},
3， 到tab页面 ， 到达tab页面没有返回页面 （tab页面没有返回按钮）
goswitchTab(){
uni.switchTab({
url:'/pages/message/message'
})
}
10， 使用 uni-app ui ，插件机制
1. 在网页注册账号， 登陆， 选择插件点击 下载到hbx ， 然后在component就可以看到了
2，在局部引入使用
开启
export default {
methods: {
show() {
this.$refs.picker.show()
},
confirm(e) {
console.log(e)
}
}
}11， 封装请求
请求的封装 都一样 这里有个选择是挂载到vue实例是下面 ，例如这么做：
import fetchData from '@/utils/fetchData '
Vue.prototype.$fetch = this.fetchData ；
*******
async await的await 虽然是await promise 但是没有必要.then ,直接可以取到 promise的实际值 ，此时await 后面不能是函数体直接执行 ，必须是函数执行，否则会返回一个promise
let request = ()=> new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove(2222)
},1000)
})
let getResult = async()=>{
let result = await request()
console.log(result)
return result;
}
getResult()
12 , map , rich-text 组件
map
注意： 图标要选小点