Uni-app 学习笔记

javaGHui

已于 2024-03-14 10:42:55 修改

阅读量1.3k

点赞数 21

分类专栏： Uni-app 文章标签： uni-app 学习笔记

于 2024-02-05 12:34:07 首次发布

本文链接：https://blog.csdn.net/jiayou2020527/article/details/135665579

版权

Uni-app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

H5访问页面跳转：

直接在浏览器输入页面如： http://localhost:5174/#/pages/request/request

小程序访问页面跳转 pages.json中：

 "condition": { //模式配置，仅开发期间生效
  	"current": 0, //当前激活的模式（list 的索引项）
  	"list": [{
  			"name": "请求页面", //模式名称
  			"path": "pages/request/request", //启动页面，必选
  			//"query": "id=4000&name=zs" //启动参数，在页面的onLoad函数里面得到。
  		}
  	]
  }

下拉刷新：

API:onPullDownRefresh | uni-app官网 (dcloud.net.cn)

<template>
  <view>
    <view class="">下拉刷新Demo</view>
    <view v-for="(item,index) in list" :key="index">
      {{item}}
    </view>
    <button type="default" @click="onPull">下拉刷新</button>
  </view>
</template>

<script>  
  export default {  
    data() {  
      return {  
        list: ["java", 'php', "Ai", "大数据"]  
      }  
    }, onPullDownRefresh() {  
        console.log("触发了下拉事件")  
        //设置停止  
        setTimeout(() => {  
          //修改数据  
          this.list = ["大数据1", "java1", "php1", "Ai1"]  
          //停止下拉刷新  
          uni.stopPullDownRefresh()  
        }, 2000)  
      },
    methods: {  
      //方法2 触发下拉刷新  
      onPull() {  
         console.log("通过按钮点击事件，触发下拉事件")  
        uni.startPullDownRefresh()  
        //设置停止  延迟2秒
        setTimeout(() => {  
          //修改数据  
          this.list = ["大数据2", "java2", "php2", "Ai2"]  
          //停止下拉刷新  
          uni.stopPullDownRefresh()  
        }, 1000)  
      }  
    }  
  }  
</script>

<style>

</style>

上拉加载

页面 | uni-app官网 (dcloud.net.cn)

<template>
  <view>
    <view class="">下拉刷新Demo</view>
    <view  class="box-item" v-for="(item,index) in list" :key="index">
      {{item}}
    </view>
    <button type="default" @click="onPull">下拉刷新</button>
  </view>
</template>

<script>  
  export default {  
    data() {  
      return {  
        list: ["java", 'php', "Ai", "大数据","java", 'php', "Ai", "大数据","java", 'php', "Ai", "大数据"]  
      }  
    },/* onPullDownRefresh() {  
        console.log("触发了下拉事件")  
        //设置停止  
        setTimeout(() => {  
          //修改数据  
          this.list = ["大数据1", "java1", "php1", "Ai1"]  
          //停止下拉刷新  
          uni.stopPullDownRefresh()  
        }, 2000)  
      },*/
      //上拉滑动到底部默认距离50px 触发
      //可在pages.json里定义具体页面底部的触发距离onReachBottomDistance
      onReachBottom(){
          console.log("触发了快到底部了 默认50px onReachBottom事件")  
          //数组扩容
          this.list=[...this.list,...["新数据1","新数据2","滴滴..."]]
      }, 
    methods: {  
      //方法2 触发下拉刷新  
      onPull() {  
         console.log("通过按钮点击事件，触发下拉事件")  
        uni.startPullDownRefresh()  
        //设置停止  延迟2秒
        setTimeout(() => {  
          //修改数据  
          this.list = ["大数据2", "java2", "php2", "Ai2"]  
          //停止下拉刷新  
          uni.stopPullDownRefresh()  
        }, 1000)  
      }  
    }  
  }  
</script>

<style>
.box-item{
  height: 200rpx;
}
</style>

发送请求：

Api: uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)

跨域：http://t.csdnimg.cn/1Xox0

<template>
  <view>
    <view>request请求测试</view>
    <button type="default" @click="getstart">发生请求</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      getstart(){
        uni.request({
          url:"http://www.csdn.com:8080/api/getTestData.jspx",
          success(res) {
            console.log(res)
          }
        })
      }
    }
  }
</script>

<style>

</style>

数据缓存：

查看缓存：小程序：在调试器中找到 Storage
H5 : 在 Application -> Stroage -> Loacal Storage

Api: uni.setStorage(OBJECT) @setstorage | uni-app官网 (dcloud.net.cn)

<template>
  <view>
    <view>缓存数据测试</view>
    <view>
      <button type="warn" @click="setStorage">点击缓存数据</button>
    </view>
    <view>
      <button type="primary" @click="getStorageData">获取缓存数据</button>
      <button type="primary" @click="removeStorageDataByKey">删除缓存数据</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      setStorage(){
        //异步缓存
       /* uni.setStorage({
          //id
        	key: 'key1',
        	data: {
            id:"10",
            name:"张三",
            age:20
          },
        	success() {
        		console.log("缓存成功！");
        	}
        }) */
        //同步缓存
        uni.setStorageSync('storage_key', 'hello');
      },
      //获取缓存数据
      getStorageData(){
          //异步
/*        uni.getStorage({
        	key: 'key1',
        	success(res) {
        		console.log("获取缓存数据",res.data);
        	}
        }) */
        //同步
        const value = uni.getStorageSync('storage_key');
          console.log("获取缓存数据",value);
      },
      //删除缓存数据
      removeStorageDataByKey(){
          //异步
/*        uni.removeStorage({
        	key: 'key1',
        	success(res) {
        		console.log('删除缓存数据成功！');
        	}
        }) */
        //同步
        uni.removeStorageSync('storage_key');
      }
    }
  }
</script>

<style>

</style>

图片上传预览:

Api: uni.chooseImage(OBJECT) | uni-app官网 (dcloud.net.cn)

<template>
  <view>
    <view>图片测试</view>
    <button type="warn" @click="uploadImage">上传图片</button>
  </view>
  <view>
   <image v-for="(item,index) in imagPath" :src="item" @click="showImage"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imagPath:[]
      }
    },
      //上传图片
      uploadImage(){
        uni.chooseImage({
          count:5,//默认9
          //成功则返回图片的本地文件路径列表 tempFilePaths
          success:res => {
            console.log(res.tempFilePaths)
            this.imagPath = res.tempFilePaths
            console.log("图片地址：",this.imagPath)
          }
        })
    }
     ,showImage(){
       //console.log("数组图片路径：",this.imagPath)
       // 预览图片
       		uni.previewImage({
       			urls: this.imagPath,
            loop:true,
            showmenu:true
       		})
     },
    }
  }
</script>

<style>

</style>

条件编译夸端兼容

Api: 条件编译处理多端差异 | uni-app官网 (dcloud.net.cn)

<template>
  <view>
    <!-- #ifdef H5-->
    <view>只在H5 页面显示</view>
    <!-- #endif -->
    <!-- #ifdef APP||APP-PLUS-->
    <view>只在APP 端显示</view>
     <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
    <view>只在小程序 端显示</view>
     <!-- #endif -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },onLoad() {
      //ifndef .. 不在哪个平台显示
      
      // #ifdef H5
       console.log("只在H5 页面显示")
      // #endif
     // #ifdef MP-WEIXIN 
     console.log("只在小程序 端显示")
     // #endif
     // #ifdef APP||APP-PLUS
       console.log("只在APP 端显示")
     // #endif
      
    },
    methods: {
      
    }
  }
</script>

<style>
/*H5 中的样式*/
/* #ifdef H5*/
view{
  color: red;
}
/* #endif */

/*小程序 中的样式*/
/* #ifdef MP-WEIXIN*/
view{
  color: blue;
}
/* #endif */
</style>

页面跳转和参数传递：

Api: navigator | uni-app官网 (dcloud.net.cn)

Api: uni.navigateTo(OBJECT) | uni-app官网 (dcloud.net.cn)

<template>
  <view>
    <view> 页面跳转</view>
    <view>
      <navigator url="/pages/request/request?id=5&name=admin">跳转普通页面</navigator>
      <navigator url="/pages/index/index" open-type="switchTab">跳转tabBar页面</navigator>
      <navigator url="/pages/request/request" open-type="redirect">跳转页面 redirect 会销毁跳转之前的页面</navigator>
    </view>
    <button type="primary" @click="goPage">跳转普通页面</button>
    <button type="warn" @click="goPagetabBar">跳转tabBar页面</button>
     <button type="warn" @click="goPagetabBar2">跳转tabBar2页面</button>
    <button type="default" @click="goPage2">跳转页面 redirect 会销毁跳转之前的页面</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    onUnload() {
      console.log("onUnload页面卸载了");
    },
    methods: {
      //方法页面跳转
      goPage(){
        //保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
        uni.navigateTo({
          //参数传递
          url:"/pages/request/request?id=100&age=18"
        })
      },
      goPagetabBar(){
        uni.switchTab({
          url:"/pages/index/index"
        })
      },
      goPagetabBar2(){
        //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
        uni.switchTab({
           url:"/pages/index/index"
        })
      },
      goPage2(){
        //关闭当前页面，跳转到应用内的某个页面。
        uni.redirectTo({
         url:"/pages/request/request"
        })
      },
    }
  }
</script>

<style>

</style>

接收数据：在跳转的页面 
 //页面加载完成
    onLoad(data) {
      console.log("接收到数据",data);
    }

组件的创建使用和组件生命周期：

Api:组件创建 uni-app官网 (dcloud.net.cn)

Api: 组件生命周期页面 | uni-app官网 (dcloud.net.cn)

//创建 components 目录，创建的组件 testA.vue
<template>
  <view class="viewS" id="testId">
    自定义testA组件{{num}}
  </view>
</template>

<script>
  export default {
    name:"testA",
    data() {
      return {
        num:10,
        intId:null
      }
    },
    beforeCreate(){
      console.log("beforeCreate在实例初始化之前被调用");
      console.log("beforeCreate可以拿到数据吗",this.num);//拿不到
    },
    //可以用于数据初始化
    created(){
      console.log("created在实例创建完成后被立即调用");
        console.log("created可以拿到数据吗",this.num);//可以
        //创建定时器
        this.intId = setInterval(() =>{
          console.log("执行定时器");
        },1000)
    },
    beforeMount(){
      console.log("beforeMount在挂载开始之前被调用");
      console.log("beforeMount可以拿到数据吗",this.num);//可以
      console.log("beforeMount可以拿到Dom吗",document.getElementById("testId"));//不行
    },
    //可以操作Dom元素
    mounted(){
      console.log("mounted挂载到实例上去之后调用");
      console.log("mounted可以拿到数据吗",this.num);//可以
      console.log("mounted可以拿到Dom吗",document.getElementById("testId"));//可以
    },
    destroyed(){
      //在销毁的时候清除定时器 不执行不知道怎么回事？？
      clearInterval(this.intId)
      console.log("destroyed组件销毁了");
      console.log("destroyed组件销毁了可以拿到数据吗",this.num);//?
      console.log("destroyed组件销毁了可以拿到Dom吗",document.getElementById("testId"));//?
    }
  }
</script>

<style>
.viewS{
  color: red;
}
</style>

使用组件：

<template>
    
 <view>
      <!--3. 使用组件-->
      <!--  v-if true显示，false销毁组件 -->
      <test v-if="flag"></test>
      <button type="primary" @click="destruction">销毁组件</button>
    </view>

</template>

<script>
  //1.导入组件
  import test from "../../components/testA.vue"
  
	export default {
		data() {
			return {
            flag:true
			}
		}, 
    //2.注册组件
    components:{
      test
    },
		onLoad() {

		},
		methods: {
          destruction(){
            this.flag = !this.flag
          }
		}
	}
</script>

<style>

</style>

组件之间通讯

Api:

获取父组件中的数据：props uni-app官网 (dcloud.net.cn)

子组件传递数据方式：页面 | uni-app官网 (dcloud.net.cn)

Vue3:父组件获取子组件数据

Vue3:子组件获取父组件数据

1.父组件给子组件传递数据：

<template>
  <view>
    <!--3. 使用组件-->
    <!--  v-if true显示，false销毁组件 -->
     <!--    父组件数据  传递数据      :key = value-->
    <test v-if="flag" :chuand="nameData" :chuand2="age"></test>
    <button type="primary" @click="destruction">销毁组件</button>
    

   </view>
</template>

<script>
  //1.导入组件 我是父组件
  import test from "../../components/testA.vue"
  
  export default {
    data() {
      return {
         flag:true,
         //传递参数
         // nameData:"",
         age:18
      }
    },
    //2.注册组件
    components:{
      test
    },
 
    methods: {
    destruction(){
            this.flag = !this.flag
          }
    }
  }
</script>

<style>
</style>

1.子组件接收数据 props：

<template>
  	<!-- 我是子组件 -->
  <view class="viewS">
    自定义组件testA:{{num}}
    <view>
    父组件传过来的数据:{{chuand2}}
    </view>
    <view>
    父组件传过来的数据-不给值:{{chuand}}
    </view>
  </view>
  
</template>

<script>
  export default {
    name:"testA",
    data() {
      return {
        num:10,
      }
    },
    //获取传递的数据 
    // props: ['chuand'],
    props:{
      //key
      chuand:{
          type:String,//数据类型 检测类型 会检查一个 prop 是否是给定的类型，否则抛出警告
          default:"默认值"// 默认值
      },
      chuand2:{
        type:Number,//数据类型
        default:100// 默认值
      }
    }
  }
</script>

<style>
.viewS{
  color: red;
}
</style>

2.子组件给父组件传递数据：

<template>
  	<!-- 我是子组件 -->
  <view class="viewS">
    <button @click="sendHandle">子组件向父组件传递数据</button>
  </view>
  
</template>

<script>
  export default {
    name:"testA",
    data() {
      return {
        //向父组件传递的数据
        content:"内容",
        numb:999
      }
    },
   
    methods:{
            sendHandle(){
              console.log("子组件向父组件传递数据");
                 // $emit(eventName: string, param?: any): void;
                // .$emit 往父组件传递数据
                //this.$emit("onEvent",[this.content,this.numb])  vue3
                uni.$emit("onEvent",[this.content,this.numb])

            }
        }
  }
</script>

<style>
.viewS{
  color: red;
}
</style>

2.父组件接收数据：

<template>
  <view>
 <!-- 我是父组件 -->
    <!--3. 使用组件-->
     <!-- 自定义事件 @onEvent getHandle方法 -->
    <test  @onEvent="getHandle"></test>
    这是子组件传递过来的数据{{shuju}}
   </view>
</template>

<script>
  //1.导入组件 我是父组件
  import test from "../../components/testA.vue"
  
  export default {
    data() {
      return {
         //接收子组件传递过来的数据
         shuju:[]
      }
    },
    //2.注册组件
    components:{
      test
    },
 
    methods: {
      getHandle(data){
        console.log("父组件中获取到子组件的数据：",data);
        this.shuju = data
      }
    }
  }
</script>

<style>
</style>

3.兄弟组件传递数据：

A组件：

<template>
  <view>
    我是A组件
    <button @click="addNumb">我要修改B组件数据</button>
  </view>
</template>

<script>
  export default {
    name:"a",
    data() {
      return {
        
      };
    },
    methods:{
      addNumb(){
        //触发全局事件
        //  $emit(eventName: string, param?: any): void;
        uni.$emit("updataNumb",20)
      }
    }
  }
</script>

<style>

</style>

B组件：

<template>
  <view>
    我是B组件数据-> {{numb}}
  </view>
</template>

<script>
  export default {
    name:"b",
    data() {
      return {
        numb:0
      };
    },
    //生命周期方法 组件创建完成
    created() {
      //注册一个全局事件
      //uni.$on(eventName,callback)
      //$on(eventName: string, callback: (result: any) => void): void;
      uni.$on("updataNumb",num =>{
        console.log("值：",num)
        this.numb += num
      })
    }
  }
</script>

<style>

</style>

使用A 、B组件：

<template>
  <view>
    <!--3. 使用组件-->
    <test-A></test-A>
    <test-B></test-B>
   </view>
</template>

<script>
  //1.导入组件 我是父组件

  import testA from "../../components/a.vue"
  import testB from "../../components/b.vue"
  
  export default {
    data() {
      return {
        
      }
    },
    //2.注册组件
    components:{
      "test-A":testA,
      "test-B":testB
    },
 
    methods: {
     
    }
  }
</script>

<style>
</style>

Uni-ui组件使用：

ui组件库Api: uni-app官网 (dcloud.net.cn)

下载后直接使用即可...

uni-calendar 日历 - DCloud 插件市场

如日历：

<template>

    <view>
        <uni-calendar 
        :insert="true"
        :lunar="true" 
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="change"
         />
    </view>

</template>

<script>

</script>

<style>
</style>