目录
双向数据绑定
1 普通的数据绑定是没有响应式的
<input value="{
{value}}" />
使数据具有响应式
// 使用setData赋值，使其拥有响应式，达到双向数据绑定的效果
this.setData({
dataAll: this.data.dataAll,
})2 使用 model: 前缀来使数据绑定具有响应式
<input model:value="{
{value}}" />
父子组件传值
定义子组件
创建compontents文件夹，新建对应子组件
引入子组件
json文件里
"usingComponents": {
"header":"../../components/header"
},父传子
子组件里的 properties 就是 props ,用来接受父传子数据
格式一 text:String
格式二 text :{ type:String , value : '' ,} // value是默认值
子传父
父组件中的自定义事件
bind:自定义事件名= " "
子组件中的调用
//作用与emit相似，建议用对象传值
this.triggerEvent('aaa', {k:v}) 本地存储
异步
存 wx.setStorage({ key: "名称", data: JSON.stringify( 数据 ) })
取 wx.getStorage({ key: "名称", success:(res)=>{ 成功时 res就是对应数据 } })
同步
存 wx.setStorageSync('名称', JSON.stringify(数据))
取 wx.getStorageSync('名称')
组件生命周期函数
-
created()：组件实例刚刚被创建好时触发。
-
attached()：进入页面节点树后触发
-
detached() 组件离开页面节点树后触发
获取用户信息
启用button组件
<button type="primary" open-type="getUserInfo"
bindgetuserinfo="handleGetUserInfo">
登陆
</button>open-type="getUserInfo" 设置按钮功能为获取用户信息
bindgetuserinfo 是点击后的调用 自带的形参中，就有用户信息
handleGetUserInfo(e) {
console.log(e)
const { userInfo } = e.detail;
}页面的基本配置
| backgroundColor |
下拉刷新的背景色,下拉刷新的部分才是背景 |
| backgroundTextStyle |
小程序的背景文本样式 只有light浅色和dark深色两个值 |
| navigationBarBackgroundColor |
导航条的背景色 |
| navigationBarTitleText |
导航条的标题文本 |
| navigationBarTextStyle |
导航条的文本颜色 只有black黑色和white白色两个值 |
| enablePullDownRefresh |
开启下拉刷新功能 默认值是false |
| onReachBottomDistance |
触发触底方法的距离 单位是px |
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页面,会关闭所有的页面 进入新页面 |
逻辑跳转
| 保留当前页面，跳转到应用内的某个页面 | |
| 关闭当前页面，跳转到应用内的某个页面 | |
| 关闭所有页面，打开到应用内的某个页面。 | |
| 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 | |
| 关闭当前页面，返回上一页面或多级页面 可通过 |
|
| 预加载页面，是一种性能优化技术 |
路由传参和接收参数
注意：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 值 , 如果是循环的数据 ，在事件中传递 下标 来更改对应数据
分享
分享的按钮
<button open-type="share">分享</button>对应逻辑
onShareAppMessage 是分享的函数，有参数 options, 可以return出几个数据
onShareAppMessage(
return {
title: " ", //标题
path: '/pages/index/index', //分享的页面
imageUrl: '/images/chiken.webp' //分享的主题图片
}
)扫码
wx.scanCode({ //扫码事件函数
onlyFromCamera: false, //是否只能摄像头扫码，要关闭
scanType: ['barCode', 'qrCode'], //扫描的类型，条形码，二维码
success: (result) => {}, //成功的回调
fail: (res) => {}, //失败的回调
complete: (res) => {}
})获取个人信息
1 书写一个 button 组件
<button type="primary" open-type="getUserInfo"
@click="add" v-if="!isWarrant">
登录</button>2 使用 uni.getUserProfile 拉取用户授权， success 是点击确定按钮时触发，res 参数是获取成功时返出的个人信息
add() {
uni.getUserProfile({
desc: '用于获取个人资料', // 这里的desc在微信开发文档中要求必须填写的
success: (res) => {
this.isWarrant = true
this.userInfo = res.userInfo
console.log(res.userInfo)
}
})
}