uni-app心得

uni-app是一个跨平台的应用开发框架，它基于Vue.js，并使用了一套代码编写多端运行的技术。

通过uni-app，我们可以使用一套代码开发同时运行在多个平台（包括iOS、Android、Web等）的应用程序，这样可以大大减少开发工作量。uni-app允许开发者使用一种统一的开发语言和代码库，在多个平台上开发应用，这样可以节省时间和精力。uni-app还可以通过将源码转换为原生组件，以及一些优化措施，可以实现接近原生应用的性能表现。而且还拥有活跃的开发者社区和丰富的生态系统支持。我们可以从社区中获取帮助、分享经验，并使用各种插件和扩展来丰富应用的功能。uni-app使用了一套统一的开发语言和框架，我们可以更高效地编写和管理代码。此外，uni-app还提供了可视化的开发工具，使得开发过程更加便捷。

对于Vue.js熟悉的我们来说，Uni-app的学习曲线并不陡峭。它采用的是Vue.js的编程模式，让我们写起来非常自然。同时，Uni-app也提供了完善的文档和教程，我们可以根据自己的需要进行学习，掌握技能。它的拓展性也很强，Uni-app可以方便地扩展不同的插件和扩展库，以满足我们的具体业务需求。同时，Uni-app也提供了完善的插件市场，我们可以方便地集成市场上的插件，免去了自己单独撰写代码的过程。使用uni-app，我学会了很多，从以前的不知道从何下手，到现在可以看懂是什么语句。Uniapp的开发环境和工具是非常重要的，因为它们能够帮助开发者更加高效地开发Uniapp应用程序。Uniapp的开发环境包括开发工具、开发框架和开发语言等，其中最常用的开发工具是HBuilderX，它提供了丰富的插件和调试工具，而开发框架则包括Vue.js、React等。同时，Uniapp还支持多种开发语言，如JavaScript、TypeScript等，以满足不同开发者的需求。总之，Uniapp的开发环境和工具为开发者提供了便利和支持，使得Uniapp应用程序的开发更加简单和高效。

Uniapp 中的事件处理与 Vue.js 中的类似，包括以下几种：

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

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

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

7.基本路由跳转

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

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

8.网络请求

// 发送 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、请求方法、请求参数等。在请求成功或失败时，分别执行对应的回调函数。

9.数据缓存

// 存储数据到本地缓存
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 方法从本地缓存中获取数据。可以指定缓存的键名，在获取成功或失败时，分别执行对应的回调函数。

10.打包

使用 HBuilderX 软件进行打包操作。
打包前需要先配置项目的打包设置，如应用名称、应用图标、应用启动页等。在 HBuilderX 软件中，可以通过菜单栏的「发行」-「原生App-云打包」或「发行」-「原生App-本地打包」来进行打包操作。
在打包过程中，可以选择打包平台、打包类型、签名方式等。打包完成后，会生成对应平台的安装包文件。

11.发布

使用各大应用商店进行发布操作。
在打包完成后，需要将生成的安装包文件上传到各大应用商店进行发布。在发布前需要先注册开发者账号，并进行应用信息的填写和审核。
常见的应用商店有：App Store、华为应用市场、小米应用商店、OPPO应用商店、VIVO应用商店等。在各大应用商店中，可以按照提示进行应用信息的填写和审核，审核通过后即可发布应用。
需要注意的是，不同应用商店的审核标准和要求可能存在差异，需要根据实际情况进行调整。
12.Uniapp的调试和优化技巧

使用 HBuilderX 软件进行调试操作。
在 HBuilderX 软件中，可以通过菜单栏的「运行」-「运行到手机或模拟器」或「运行」-「运行到网页」来进行调试操作。在调试过程中，可以通过开发者工具查看控制台输出、调试代码等。
在代码中，可以使用 console.log 方法输出日志信息，方便调试
console.log('这是一条日志信息')
13.优化

减少页面加载时间：可以使用 uni.showLoading 方法在页面加载时显示加载提示，使用 uni.hideLoading 方法在页面加载完成后隐藏加载提示。

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

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

https://www.rstk.cn/news/9320.html?action=onClick，这是更为详细的uni-app学习方法。