uniapp知识点总结

2023-04-10 本文已影响0人木火应

Uniapp是什么，它的优势和特点
Uniapp是一种跨平台开发框架，可以同时开发出iOS、Android、H5等多个应用程序，具有以下优势和特点：

省时省力：Uniapp采用一份代码多端适配的方式，只需编写一次代码即可在多个平台上运行，大大减少了开发者的开发时间和成本。
易学易用：Uniapp使用Vue.js作为其开发语言，Vue.js的语法简单易懂，上手难度较低，适合新手入门。
性能优越：Uniapp采用了自研的渲染引擎和性能优化策略，能够保证应用程序的流畅度和稳定性。
以下是Uniapp的示例代码：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Uniapp!'
    }
  }
}
</script>

Uniapp的开发环境和工具
Uniapp的开发环境和工具是非常重要的，因为它们能够帮助开发者更加高效地开发Uniapp应用程序。Uniapp的开发环境包括开发工具、开发框架和开发语言等，其中最常用的开发工具是HBuilderX，它提供了丰富的插件和调试工具，而开发框架则包括Vue.js、React等。同时，Uniapp还支持多种开发语言，如JavaScript、TypeScript等，以满足不同开发者的需求。总之，Uniapp的开发环境和工具为开发者提供了便利和支持，使得Uniapp应用程序的开发更加简单和高效。
Uniapp的基本语法和组件
Uniapp是一个跨平台的开发框架，用于快速构建多端应用程序。以下是Uniapp的基本语法和组件的示例代码：

基本语法

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Uniapp!'
    }
  }
}
</script>

组件

<template>
  <view>
    <button @click="showModal">显示弹窗</button>
    <modal v-model="show" title="提示" @confirm="onConfirm">
      确定要删除吗？
    </modal>
  </view>
</template>

<script>
import { Modal } from '@uni/components'

export default {
  components: {
    Modal
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    showModal() {
      this.show = true
    },
    onConfirm() {
      // 处理确认事件
      this.show = false
    }
  }
}
</script>

Uniapp的生命周期和事件处理

生命周期
以下为各个生命周期函数的示例demo:

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  onLoad() {
    console.log('页面加载完成')
  },
  onReady() {
    console.log('页面初次渲染完成')
  },
  onShow() {
    console.log('页面显示')
  },
  onHide() {
    console.log('页面隐藏')
  },
  onUnload() {
    console.log('页面卸载')
  },
  onPullDownRefresh() {
    console.log('下拉刷新')
  },
  onReachBottom() {
    console.log('上拉触底')
  },
  onShareAppMessage() {
    console.log('分享')
  }
}
</script>

<style scoped>
/* 样式 */
</style>

事件处理
Uniapp 中的事件处理与 Vue.js 中的类似，包括以下几种：
1. 事件绑定：使用 @ 或 v-on: 指令绑定事件，如 @click 或 v-on:click。
2. 事件修饰符：使用 .stop、.prevent、.capture、.self、.once 等修饰符控制事件的行为。
3. 自定义事件：通过 $emit 方法触发自定义事件，并在父组件中使用 @ 或 v-on: 指令监听。
4. 事件对象：事件处理函数中可以访问事件对象，如 $event.target、$ event.type 等。
5. 此外，Uniapp 还提供了一些平台特有的事件处理方式，如小程序中的 catchtap、catchtouchmove 等。具体使用方式可以参考官方文档。

以下为相关的示例demo:

事件绑定:

  <template>
  <view>
    <button @click="handleClick">点击按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

事件修饰符:

<template>
  <view>
    <button @click.stop="handleClick">点击按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

上述代码中，使用了 @click.stop 修饰符，表示阻止事件冒泡。

自定义事件:
子组件:

<template>
  <view>
    <button @click="handleClick">点击按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', '自定义事件触发')
    }
  }
}
</script>

父组件:

<template>
  <view>
    <child-component @my-event="handleChildEvent"></child-component>
  </view>
</template>

<script>
import ChildComponent from '@/components/ChildComponent'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log(data) // 输出：自定义事件触发
    }
  }
}
</script>

上述代码中，子组件通过 $emit 方法触发了一个自定义事件，并传递了一个参数。父组件中使用 @my-event 监听该事件，并在事件处理函数中获取传递的参数。

事件对象:

<template>
  <view>
    <button @click="handleClick($event)">点击按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target) // 输出：按钮元素
      console.log(event.type) // 输出：click
    }
  }
}
</script>

上述代码中，事件处理函数中传递了 $event 参数，表示事件对象。在事件处理函数中可以访问事件对象的属性，如 target 和 type。

平台特有的事件处理方式：

<template>
  <view>
    <button catchtap="handleTap">点击按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      console.log('按钮被点击了')
    }
  }
}
</script>

Uniapp的数据绑定和状态管理

数据绑定

<template>
  <view>
    <button @click="count++">点击按钮</button>
    <text>{{ message }}</text>
    <text>{{ count }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Uniapp!',
      count: 0
    }
  }
}
</script>

上述代码中，使用了 data 函数定义了组件的数据，包括 message 和 count 两个属性。在模板中，使用双大括号语法 {{ }} 绑定数据到视图中。

状态管理:

<template>
  <view>
    <button @click="increment">点击按钮</button>
    <text>{{ count }}</text>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

上述代码中，使用了 vuex 状态管理库。在 computed 中使用了 mapState 辅助函数将 count 属性映射到组件的计算属性中，然后在模板中绑定到视图中。在 methods 中使用了 mapMutations 辅助函数将 increment 方法映射到组件的方法中，用于更新 count 属性的值。
在 store 目录下创建 index.js 文件，定义了 count 状态和 increment 方法：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

上述代码中，使用了 Vuex 库创建了一个 store 对象，其中包含了 count 状态和 increment 方法。在组件中使用 mapState 和 mapMutations 辅助函数将状态和方法映射到组件中。

Uniapp的路由和页面跳转

基本路由跳转

<template>
  <view>
    <button @click="navigateTo">跳转到详情页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo() {
      uni.navigateTo({
        url: '/pages/detail/detail'
      })
    }
  }
}
</script>

上述代码中，使用 uni.navigateTo 方法跳转到 /pages/detail/detail 页面。在目标页面中，可以通过 onLoad 生命周期函数获取跳转时传递的参数。

带参数的路由跳转

<template>
  <view>
    <button @click="navigateTo">跳转到详情页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo() {
      uni.navigateTo({
        url: '/pages/detail/detail?id=123&name=uniapp'
      })
    }
  }
}
</script>

上述代码中，在跳转时通过查询参数的方式传递了 id 和 name 两个参数。在目标页面中，可以通过 this.$route.query 获取传递的参数。

TabBar 路由跳转

<template>
  <view>
    <button @click="switchTab">切换到我的页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab() {
      uni.switchTab({
        url: '/pages/mine/mine'
      })
    }
  }
}
</script>

上述代码中，使用 uni.switchTab 方法切换到 /pages/mine/mine 页面。在目标页面中，需要在 pages.json 配置文件中将该页面添加到 tabBar 中。

重定向路由跳转

<template>
  <view>
    <button @click="redirectTo">重定向到登录页</button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectTo() {
      uni.redirectTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

上述代码中，使用 uni.redirectTo 方法重定向到 /pages/login/login 页面。在目标页面中，无法通过 onLoad 生命周期函数获取跳转时传递的参数。

<template>
  <view>
    <button @click="navigateBack">返回上一页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

上述代码中，使用 uni.navigateBack 方法返回上一页。在目标页面中，可以通过 onUnload 生命周期函数获取返回时传递的参数。

Uniapp的网络请求和数据缓存

网络请求

// 发送 GET 请求
uni.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

// 发送 POST 请求
uni.request({
  url: 'https://example.com/api/data',
  method: 'POST',
  data: {
    name: 'uniapp',
    age: 3
  },
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

上述代码中，使用 uni.request 方法发送网络请求。可以指定请求的 URL、请求方法、请求参数等。在请求成功或失败时，分别执行对应的回调函数。

数据缓存

// 存储数据到本地缓存
uni.setStorage({
  key: 'userInfo',
  data: {
    name: 'uniapp',
    age: 3
  },
  success: () => {
    console.log('数据存储成功')
  },
  fail: err => {
    console.error(err)
  }
})

// 从本地缓存中获取数据
uni.getStorage({
  key: 'userInfo',
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

上述代码中，使用 uni.setStorage 方法将数据存储到本地缓存中。可以指定缓存的键名和数据对象。在存储成功或失败时，分别执行对应的回调函数。
使用 uni.getStorage 方法从本地缓存中获取数据。可以指定缓存的键名，在获取成功或失败时，分别执行对应的回调函数。

Uniapp的打包和发布

打包
使用 HBuilderX 软件进行打包操作。
打包前需要先配置项目的打包设置，如应用名称、应用图标、应用启动页等。在 HBuilderX 软件中，可以通过菜单栏的「发行」-「原生App-云打包」或「发行」-「原生App-本地打包」来进行打包操作。
在打包过程中，可以选择打包平台、打包类型、签名方式等。打包完成后，会生成对应平台的安装包文件。
发布
使用各大应用商店进行发布操作。
在打包完成后，需要将生成的安装包文件上传到各大应用商店进行发布。在发布前需要先注册开发者账号，并进行应用信息的填写和审核。
常见的应用商店有：App Store、华为应用市场、小米应用商店、OPPO应用商店、VIVO应用商店等。在各大应用商店中，可以按照提示进行应用信息的填写和审核，审核通过后即可发布应用。
需要注意的是，不同应用商店的审核标准和要求可能存在差异，需要根据实际情况进行调整。

Uniapp的调试和优化技巧
9.1 调试
使用 HBuilderX 软件进行调试操作。
在 HBuilderX 软件中，可以通过菜单栏的「运行」-「运行到手机或模拟器」或「运行」-「运行到网页」来进行调试操作。在调试过程中，可以通过开发者工具查看控制台输出、调试代码等。
在代码中，可以使用 console.log 方法输出日志信息，方便调试
console.log('这是一条日志信息')
9.2 优化
9.2.1 减少页面加载时间：可以使用 uni.showLoading 方法在页面加载时显示加载提示，使用 uni.hideLoading 方法在页面加载完成后隐藏加载提示。

// 显示加载提示
uni.showLoading({
  title: '加载中...'
})

// 隐藏加载提示
uni.hideLoading()

9.2.2 减少资源占用：可以使用 uni.createIntersectionObserver 方法创建一个交叉观察器，监听页面元素的可见性，减少不必要的资源占用。

// 创建交叉观察器
const intersectionObserver = uni.createIntersectionObserver()

// 监听元素可见性
intersectionObserver.relativeToViewport().observe('.element', res => 
{
  console.log(res.intersectionRatio)
})

9.2.3. 优化渲染性能：可以使用 uni.createCanvasContext 方法创建一个画布上下文对象，使用 draw 方法绘制图形，减少 DOM 元素的渲染次数。

Uniapp的常见问题和解决方案

10.1 问题1：Uniapp 页面跳转时，出现白屏或黑屏
可能是因为页面加载时间过长导致的，可以通过以下方式进行优化：
10.1.1 减少页面资源的加载量，如图片、视频等；
10.1.2 减少页面的渲染次数，如使用 canvas 绘制图形，减少 DOM 元素的渲染次数；
10.1.3 使用 uni.showLoading 方法在页面加载时显示加载提示，使用 uni.hideLoading 方法在页面加载完成后隐藏加载提示。

10.2 问题2: Uniapp 应用在 iOS 系统下无法使用
可能是因为应用没有通过苹果的审核导致的，需要按照苹果的审核标准进行调整。具体可以参考苹果的审核指南进行调整。

10.3 问题3: Uniapp 应用在 Android 系统下出现兼容性问题
可能是因为应用没有适配 Android 系统导致的，可以通过以下方式进行适配：
10.3.1 使用 flex 布局代替传统布局方式；
10.3.2 使用 vw 和 vh 代替传统的像素单位；
10.3.3 使用 uni.requireNativePlugin 方法调用原生插件。

10.4 问题4: Uniapp 应用在微信小程序中出现兼容性问题
可能是因为微信小程序与 Uniapp 的兼容性存在问题导致的，可以通过以下方式进行调整：
10.4.1 使用微信小程序原生组件代替 Uniapp 组件；
10.4.2 使用 wx.navigateTo 方法代替 uni.navigateTo 方法；
10.4.3 使用 wx.request 方法代替 uni.request 方法。

10.5 问题5: Uniapp 应用在 H5 端出现兼容性问题
可能是因为 H5 浏览器与 Uniapp 的兼容性存在问题导致的，可以通过以下方式进行调整：
10.5.1 使用 flex 布局代替传统布局方式；
10.5.2 使用 vw 和 vh 代替传统的像素单位；
10.5.3 使用 babel-polyfill 库解决 ES6 语法兼容性问题。

uniapp知识点总结

猜你喜欢

热点阅读