目录
页面基本配置
backgroundColor | 下拉刷新的背景色,下拉刷新的部分才是背景 |
backgroundTextStyle | 小程序的背景文本样式 只有light浅色和dark深色两个值 |
navigationBarBackgroundColor | 导航条的背景色 |
navigationBarTitleText | 导航条的标题文本 |
navigationBarTextStyle | 导航条的文本颜色 只有black黑色和white白色两个值 |
onReachBottomDistance | 触发触底方法的距离 单位是px |
enablePullDownRefresh | 开启下拉刷新功能 默认值是false |
tabBar的设置
在uni-app中的 pages.json中进行配置
"tabBar": {
"color": "#000000",
"selectedColor": "#d00",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"position": "bottom",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/icon/shouye.png",
"selectedIconPath": "static/icon/pitch-icon/shouye.png"
}
// 此处进行配置第二个tabBar页面
]
}
注意事项
1 tabBar最少两个,最多五个
2 下面的字体图标需要两种颜色,未选中与被选中,建议下载好之后,当做图片使用
3 当tabBar设置为顶部的时候,将不在有图标,只会有文字
uni-app引入vantUi
1 内置终端npm安装vant小程序版本
2 新建wxcomponents文件夹,复制@vant里的dist文件夹。并粘贴改名为vant
3 可以删除因为引入vant生成的文件夹
4 正常引入vant所需,但是文件路径为“/wxcomponents/vant/.....”
5 在pages.json中修改配置。让其可以使用vant和npm配置,具体代码如下
设置动态的顶部文字
pages.json中,在新建文件时,会自动增加对应数据,可以在这里设置头部文字,也可以引入vant的样式
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表",
"enablePullDownRefresh": false,
"usingComponents": {
"van-icon": "/wxcomponents/vant/icon/index",
}
}
封装axios请求
创建utils文件夹,在文件夹中添加http.js文件
function axios({
url,
method = "get",
data = {}
}) {
uni.showLoading({
title: '拼命加载中...',
mask: true
})
return new Promise((resolve, reject) => {
uni.request({
url: "https://www.uinav.com/api/public/v1" + url,
method,
data,
success(res) {
resolve(res.data)
uni.hideLoading()
},
fail(err) {
reject(err)
uni.hideLoading()
uni.showToast({
title: "请求失败"
})
}
})
})
}
export default axios
在页面使用时
引入
import axios from '../../utils/http.js'
使用方法
axios({ url: '/home/swiperdata'}).then(res => {
console.log(res)
})
小程序的生命周期函数 uni-app同时兼容
onLoad | 页面加载时触发 相当于vue的created生命周期 |
onReady | 页面初次渲染完成时触发 相当于vue的mounted生命周期 |
onShow | 页面显示/切入前台时触发 相当于vue的 activited |
onHide | 页面隐藏/切入后台时触发 相当于vue的deActivited |
onUnload | 页面卸载时触发 相当于vue的destroyed生命周期 |
onPullDownRefresh | 下拉刷新的钩子函数 |
onReachBottom | 上拉到底加载的钩子函数 |
开启关闭下拉刷新
uni.startPullDownRefresh() // 开启下拉刷新功能
uni.stopPullDownRefresh() // 停止下拉刷新的方法
而在微信小程序中,则是wx.startPullDownRefresh()
自定义小程序导航栏
1 在要使用的页面的pages里定义 "navigationStyle":"custom"
2 定义一个子组件,这个子组件就是自定义的头部导航栏,这个组件里没有onLode,可以使用mounted
uni.getSystemInfo({}) 可以获取手机基础信息
statusBarHeight为手机导航栏高度
3 使用的页面引入该组件,可以正常使用父子组件传值
注意:如果点击事件在该组件里不生效,可以尝试子传父传入事件触发
uni-app的分包
1 pages是小程序用来放页面的位置,在跟它同级的位置,创建分包文件夹,创建对应文件,格式如下
2 在 pages.json 中,配置分包
"subPackages": [{
"root": "packageOne",
"pages": [
{
"path": "search/search",
"style": {
"navigationBarTitleText": "商品搜索",
"enablePullDownRefresh": true,
"backgroundColor": "#d00",
"onReachBottomDistance": 260
}
}
//在此处添加另一个页面,{path:....,style....}
] }]
root属性是分包的那个文件夹名称,pages数组中,放置分包的页面,其余和pages文件夹的页面配置一致
uni-app的路由 微信小程序除前缀不同外其余一致
标签跳转
标签名
<navigator url="/pages/home/home" open-type="navigate"></navigator>
open-type参数
navigate | 会隐藏当前页面 进入新页面 页面栈最多十层 |
redirect | 会销毁(关闭)当前页面 进入新页面 |
switchTab | 专门用来跳转tabbar页面 他会销毁所有的非tabbar页面 |
navigateBack | 关闭 当前页面,返回上一级或多级 |
reLaunch | 可跳转tabbar页面,会关闭所有的页面 进入新页面 |
逻辑跳转
uni.navigateTo(OBJECT) | 保留当前页面,跳转到应用内的某个页面 |
uni.redirectTo(OBJECT) | 关闭当前页面,跳转到应用内的某个页面 |
uni.reLaunch(OBJECT) | 关闭所有页面,打开到应用内的某个页面。 |
uni.switchTab(OBJECT) | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 |
uni.navigateBack(OBJECT) | 关闭当前页面,返回上一页面或多级页面 可通过 |
uni.preloadPage(OBJECT) | 预加载页面,是一种性能优化技术 |
路由传参和接收参数
注意:switchTab不能传递参数
传参:wx.redirectTo({ url: '/pages/home/home?id='+id })
接收:在监听页面加载的onLoad函数形参options对象里解构
图片的预览
// 图片预览
preview(img) { //点击的图片的网址
//接受一个数组或字符串,里面的内容是要预览的图片的网址的集合
let image = this.dataAll.pics.map(item => item.pics_mid_url)
uni.previewImage({ //开启预览的api
current: img, //当前点击的图片
urls: image //图片的集合
})
},
uni-app的自带弹框
弹出框
uni.showToast({
title: '添加成功',
icon: 'checkbox',
mask: true
})
loading
uni.showLoading({
title: '拼命加载中...',
mask: true
})
添加收货地址
addSite() { //事件
//uni-app获取用户收货地址的api
uni.chooseAddress({
success(res) { //成功时的回调
console.log(res)
}
})
}
checkbox组件的使用
因为它是封装好的组件,v-model 是不起作用的,设置其是否被勾选的值为 checked,可以通过 @click 来设置其点击事件,在事件中修改 checked 值 , 如果是循环的数据 ,在事件中传递 下标 来更改对应数据