uniapp--HBuilderx编辑器

一、使用HBuilderx编辑器创建vue3项目

1、下载路径：HBuilderX-高效极客技巧

2、创建项目可以根据文档的说明来创建

3、创建完之后，点击"运行"-->选择运行到内置浏览器-->则会在右边打开一个浏览器，点击预览可以看见效果

4、配置外部浏览器和小程序浏览器用来打开项目

5、下载开发者工具（微信开发者工具，抖音开发者工具）

微信开发者工具下载：下载

HBuilderx中点击"运行"-->选择"运行到小程序模拟器"-->

在"运行设置"中粘贴下载的微信开发者工具的安装路径

其他的开发者工具也是一样的配置。

二、利用uniapp,创建自定义模板，快速创建vue3页面：

在打开的项目根目录中右键选择"新建页面"-->选择"自定义模板"-->然后会打开一个文件夹，新建一个以.vue为后缀的文件-->然后打开该文件-->打开文件后，书写vue3的结构，并保存-->这样之后，在"新增页面"时，就可以选择自己定义的模板来搭建结构了

三、uniapp中引入组件的方式

新建文件夹components，用于存放组件

然后要使用组件的时候，就直接在当前页面中，利用<组件名></>使用即可。

四、页面生命周期

onLoad():常用于接收从其他页面跳转来时携带的参数；以及调用当前页面中封装好的用于调用接口，发送请求的函数

eg:

scss 复制代码

//封装的用于调用接口，发送请求获取数据的函数
const getList=async()=>{}

onLoad((e)=>{
  //e中包含从其他页面跳转来时携带的参数
  //也用于调用函数，发送请求获取数据
  getList()
})

onReady():常用于操作DOM对象

onShow():常用于实现当前页面显示时才有的数据更新，或者页面刷新，用户信息获取，数据统计等，在首次进入页面或者从其他页面切换到当前页面或者从后台进入前台时自动触发

onHide():常用于销毁页面数据，在离开页面时自动触发

onUnload():常用于实现页面卸载，只有在当前页面被彻底关闭后才会触发。

onPageScroll():在当前页面发生滚动时，自动触发。（监听页面滚动现象）

uni.showToast(),uni.showModal的语法在官网中可以找到。

onPullDownRefresh():在当前页面发生下拉刷新动作时，自动触发。（监听页面下拉刷新操作）

onReachBottom():当页面发生触底现象时自动触发。（监听页面是否发生触底现象）

五、页面下拉刷新：

eg:点击按钮，开启页面自动下拉刷新：（利用uni.startPullDownRefresh()）

1、需要先在pages.json文件中找到要进行下拉刷新的页面，给它添加上：

2、再到页面中引入onPullDownRefresh()生命周期函数（监听页面下拉刷新操作）

即：用户点击"按钮"，然后自动开启页面下拉刷新，触发onPullDownRefresh函数，执行相关操作

scss 复制代码

<button @click="getNews" />
const getNews=()=>{
  uni.startPullDownRefresh()
 }
 
 onPullDownRefresh(()=>{
   ...
  })

六、利用uni.request()发送请求，获取数据

javascript 复制代码

uni.request({
  url:"接口地址",
  data:{
    //请求参数
   }，
  header:{
    //请求头信息
   }，
   success:(res)=>{
     //成功请求后执行的回调
   }，
   fail:(err)=>{
     //请求失败后执行的回调
   }
})

七、previewImage图片预览

点击图片，可以实现图片预览效果：

利用uni.previewImage()

php 复制代码

uni.previewImage({
   current:"当前要预览的图片的索引值",
   urls:"想要预览的图片列表数组"
 })

八、pageScrollTo滚动到顶部

利用uni.pageScrollTop()

点击按钮，页面返回到顶部：

ini 复制代码

<button @click="onTop" />
const onTop=()=>{
  uni.pageScrollTop({
      scrollTop:0
    })
  }