uni-app 新手入门到精通1 https://blog.csdn.net/renxiaoxing55/article/details/109073564
uni-app 新手入门到精通3 https://blog.csdn.net/renxiaoxing55/article/details/109103310
uni-app 新手入门到精通完结 https://blog.csdn.net/renxiaoxing55/article/details/109117750
1, uni 基本的数据绑定 v-bind v-for 注册事件和传递函数 和vue 基本是一样的,这里我就不多说了
2, 生命周期 API=>基础=>生命周期
主要作用的话,大家去官网看文档吧
https://uniapp.dcloud.io/api/lifecycle
分为两部分
其一,应用生命周期 在App.vue 运行的时候的控制台可以直接看到打印结果
其二, 页面生命周期 用的比较多的是onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参)
onShow和onHide用途和应用生命周期是样的
点击隐藏这个的时候会触发onHide
3,下拉刷新 API=>界面=>下拉刷新
首先要在需要下拉刷新页面设置可刷新的属性 pages.json
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
},
<template>
<view>
<view class="box-item" v-for="item in list">
{
{
item}}
</view>
</view>
</template>
<script>
export default{
data(){
return {
list: ['张三','李四','王五','小美','张三丰','李二','王八']
}
},
onPullDownRefresh () {
//下拉刷新的监听事件 触发下拉刷新
console.log('触发了下拉刷新')
setTimeout(()=>{
this.list = ['张三','李四'] //下拉刷新之后,页面重新渲染
uni.stopPullDownRefresh() //停止下拉刷新,设置了计时器,两秒后停止刷新
},2000)
},
}
</script>
4, 上拉加载
首先要设置下 上拉加载 的属性 pages.json
onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位只支持px
{
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "商品",
"onReachBottomDistance": 200
}
},
onReachBottom() {
console.log('页面触底了')
this.list = [...this.list,...['射手','双子','天蝎','双鱼']] //距离底部200后,射手双子这些内容会渲染到页面上
},
5,发送get请求
uni.request API=>网络=>发起请求
get () {
uni.request({
url: "http://**************",
success (res) {
console.log(res)
}
})
},
6,图片的上传和预览 API=>媒体 =>图片
<template>
<view>
<button type="primary" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
</view>
</template>
<script>
export default {
data() {
return {
imgArr: []
}
},
methods: {
chooseImg() {
uni.chooseImage({
//图片上传的API
count: 5, //count 最多可以选择的图片张数，默认9
success: res => {
this.imgArr = res.tempFilePaths
}
})
},
previewImg(current) {
uni.previewImage({
//图片预览API current 点击哪个预览哪张图片 所以在图片的点击事件需要传一个参数item
current:current,
urls: this.imgArr,
loop: true,
indicator: 'default'
})
}
}
}
</script>
7,条件编译跨端兼容
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾
<!-- #ifdef H5 -->
<view>我希望只在h5页面中看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我希望只在微信小程序页面中看见</view>
<!-- #endif -->
<style>
/* h5中的样式 */
/* #ifdef H5 */
view{
color: hotpink;
}
/* #endif */
/* 微信小程序中的样式 */
/* #ifdef MP-WEIXIN */
view{
color: #0000FF;
}
/* #endif */
</style>
<script>
onLoad () {
// #ifdef H5
console.log('我希望h5中打印')
// #endif
// #ifdef MP-WEIXIN
console.log('我希望微信小程序中打印')
// #endif
}
<script>
8,两种方式导航跳转与传参
第一种
<navigator url="/pages/detail/detail?id=80&age=19">跳转至详情页</navigator>
<navigator url="/pages/message/message" open-type="switchTab">跳转至信息页</navigator>
<navigator url="/pages/detail/detail" open-type="redirect">跳转至详情页</navigator>
open-type="redirect" 把当前页面关闭跳转到另一个页面 可以触发onUnload事件(属于监听事件)
open-type="switchTab" 正常跳转
第二种
<template>
<view>
<view>导航跳转的学习</view>
<button @click="goDetail">跳转之详情页</button>
<button @click="goMessage">跳转至信息页</button>
<button type="primary" @click="redirectDetail()">跳转到详情页并关闭当前页面</button>
</view>
</template>
<script>
export default {
onUnload() {
console.log('导航页面卸载了')
},
methods: {
goDetail () {
uni.navigateTo({
url: '/pages/detail/detail?id=80&age=19'//向跳转页面传递参数id=80和age=19
})
},
goMessage () {
uni.switchTab({
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
url: '/pages/message/message'
})
},
redirectDetail () {
uni.redirectTo({
//关闭当前页面，跳转到应用内的某个页面。
url: '/pages/detail/detail'
});
},
}
}
</script>
<style>
</style>
向跳转页面detail 传递参数id=80和age=19
