组件和模板
除了官网本身自带的组件库外，推荐一个uview组件库：
⭐⭐⭐以下来个例子，感受一下组件咋用：
组件的使用方法：
引入组件：在页面的脚本部分（script）中使用import语句引入需要的组件。
注册组件：使用components字段将引入的组件注册到页面中。
在模板中使用组件：在模板部分（template）使用自定义的组件标签，如<my-component></my-component>。
<template> <view> <my-component></my-component> </view> </template> <script> import MyComponent from '@/components/MyComponent.vue'; export default { components: { MyComponent } } </script>
模板的使用方法：
- 在模板部分（template）使用HTML语法定义页面的结构和内容。
- 使用Vue.js的指令和插值表达式实现动态渲染和数据绑定。
- 可以使用UniApp提供的基础组件、自定义组件和原生组件来构建页面的UI元素。
<template> <view> <text>{{ message }}</text> <button @click="handleClick">新增</button> </view> </template> <script> export default { data() { return { message: '你好啊' } }, methods: { handleClick() { this.message = '小猫娃'; } } } </script>
在上面的例子中，模板部分使用了插值表达式{{ message }}来展示数据，同时使用@click指令监听按钮的点击事件。脚本部分定义了数据和方法，当按钮被点击时，数据会被更新，从而实现了动态渲染和交互。
UniApp提供了丰富的基础组件和API，可以在模板中使用它们来构建更复杂的页面。开发者也可以自定义组件，将可复用的功能封装为组件，以实现代码的复用和模块化。
UniApp中组件和模板的使用方法是将组件引入并注册到页面中，在模板中使用组件标签和Vue的指令和插值表达式来实现页面的结构、内容、动态渲染和数据绑定。
简单来说UniApp就是用vue写法和微信小程序的API来开发项目，可能总结的不确切，但大概就这个意思。
数据绑定和事件处理
数据绑定
在Uniapp中也是分单向数据绑定和双向数据绑定的
⭐⭐⭐单向数据绑定：
- 在模板中使用插值表达式：使用
{{ }}的插值表达式将数据绑定到模板中，实现数据的动态渲染。 - 使用指令：UniApp提供了一些指令，如
v-show、v-if、v-for等，可以根据数据的状态来控制元素的显示和隐藏，实现动态渲染。
举个例子：
<template> <view> <text>{{ message }}</text> <button @click="updateMessage">更新</button> </view> </template> <script> export default { data() { return { message: '你好' } }, methods: { updateMessage() { this.message = '开发者'; } } } </script>
例子里的{{ message }}使用插值表达式将message数据绑定到模板中的文本元素，当按钮被点击时，数据message会被更新，从而实现动态渲染。
2.双向数据绑定：
使用v-model指令：UniApp的v-model指令可以实现双向数据绑定，将表单元素的值与数据进行双向绑定
<template> <view> <input v-model="message" /> <text>{{ message }}</text> </view> </template> <script> export default { data() { return { message: '' } } } </script>
这个例子中<input>元素使用v-model指令与message数据进行双向绑定，当用户在输入框中输入内容时，数据message会自动更新，同时<text>元素中的内容也会实时更新。
事件处理
1.组件事件处理：通过在组件中定义事件处理函数，然后在模板中绑定事件触发时调用相应的处理函数。
<template> <view @click="handleClick">点击我触发事件</view> </template> <script> export default { methods: { handleClick() { console.log('点击事件被触发'); } } } </script>
2.全局事件处理：通过在App.vue中的onLaunch、onShow等生命周期函数中注册全局事件处理函数，然后在任意页面中触发相应的事件。
<script> export default { onLaunch() { uni.$on('myEvent', () => { console.log('全局事件被触发'); }); } } </script>
<template> <view @click="triggerEvent">点击我触发事件</view> </template> <script> export default { methods: { triggerEvent() { uni.$emit('myEvent'); } } } </script>
常见的事件类型包括：
点击事件（@click）：当用户点击某个元素时触发。
输入事件（@input）：当用户输入内容时触发。
滚动事件（@scroll）：当页面滚动时触发。
触摸事件（@touchstart、@touchmove、@touchend）：当用户触摸屏幕时触发。
表单事件（@submit、@reset）：当表单提交或重置时触发。
生命周期事件（onLoad、onShow、onHide等）：当页面生命周期发生变化时触发。
路由和导航
路由配置
1.在pages.json文件中配置页面路由信息。在pages.json文件中，可以设置页面路径、页面样式等信息。
{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/detail/detail", "style": { "navigationBarTitleText": "详情页" } } ], "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/detail/detail", "text": "详情页" } ] } }
2.使用uni.navigateTo或uni.redirectTo方法进行页面跳转。uni.navigateTo方法可以保留当前页面，而uni.redirectTo方法会关闭当前页面。
// 在首页点击按钮跳转到详情页，并传递参数 uni.navigateTo({ url: '/pages/detail/detail?id=1&name=cat' });
3.在目标页面中通过this.$route.query获取传递的参数。
export default { onLoad(options) { console.log(options.id); // 输出：1 console.log(options.name); // 输出：cat } }
关于跳转传参，本人之前写过一篇博客，有非常详细的介绍。
这边给一个传送门微信小程序的跨页面传参以及data-方法的相关细节
导航栏和标签栏
1.导航栏的使用：
- 在
pages.json文件中配置导航栏样式。在每个页面的style字段中，可以设置导航栏的样式，包括标题、背景色、文字颜色等。
{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } } ] }
- 在页面中显示导航栏。在页面的模板中，可以使用
navigationBarTitleText字段来显示导航栏标题。
<template> <view> <navigation-bar title="首页"></navigation-bar> <!-- 页面内容 --> </view> </template>
2.标签栏的使用：
- 在
pages.json文件中配置标签栏样式。在pages.json文件的tabBar字段中，可以设置标签栏的样式，包括图标、文字、选中状态等。
{ "tabBar": { "color": "#999999", "selectedColor": "#007aff", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home_selected.png" }, { "pagePath": "pages/detail/detail", "text": "详情", "iconPath": "static/tabbar/detail.png", "selectedIconPath": "static/tabbar/detail_selected.png" } ] } }
- 在页面中显示标签栏。在
App.vue中的模板中，可以使用uni-tab-bar组件来显示标签栏。
<template> <view> <uni-tab-bar :list="tabList" @click="handleTabClick"></uni-tab-bar> <!-- 页面内容 --> </view> </template> <script> export default { data() { return { tabList: [ { pagePath: 'pages/index/index', text: '首页', iconPath: 'static/tabbar/home.png', selectedIconPath: 'static/tabbar/home_selected.png' }, { pagePath: 'pages/detail/detail', text: '详情', iconPath: 'static/tabbar/detail.png', selectedIconPath: 'static/tabbar/detail_selected.png' } ] }; }, methods: { handleTabClick(index) { uni.switchTab({ url: '/' + this.tabList[index].pagePath }); } } } </script>
上面例子中的图片路径需要根据实际情况进行修改，可以将图片放在静态资源目录中。同时，要使用标签栏，需要在App.vue的template中引入uni-tab-bar组件。
数据请求和API调用
数据请求
UniApp中可以使用内置的uni.request方法或第三方库进行数据请求。
1.使用内置的uni.request方法进行数据请求：
uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log(res.data); }, fail: (err) => { console.log(err); } });
2.使用第三方库进行数据请求，如axios：
- 安装
axios库：在项目根目录下运行命令npm install axios安装axios库。 - 在
main.js文件中引入axios库：
import axios from 'axios'; Vue.prototype.$http = axios;
- 在页面中使用
axios进行数据请求
this.$http.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); });
注意：在使用第三方库进行数据请求时，需要先安装并引入相应的库，并在请求时使用相应的方法（如get、post等）。
API调用（以获取地理位置，支付为例）
1.调用设备API：
- 获取设备信息：
uni.getSystemInfo({ success: (res) => { console.log(res.model); // 设备型号 console.log(res.platform); // 设备平台 console.log(res.version); // 微信版本号（如果是微信小程序） }, fail: (err) => { console.log(err); } });
- 获取地理位置：
uni.getLocation({ type: 'wgs84', success: (res) => { console.log(res.latitude); // 纬度 console.log(res.longitude); // 经度 }, fail: (err) => { console.log(err); } });
2.调用第三方API：
- 发起网络请求获取数据：
uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log(res.data); }, fail: (err) => { console.log(err); } });
使用第三方SDK进行功能扩展，如使用支付宝SDK进行支付：
uni.requestPayment({ provider: 'alipay', orderInfo: 'xxxxx', // 支付宝订单信息 success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } });
注意：在调用设备API和第三方API时，需要根据具体的API文档进行参数配置和回调处理。同时，对于第三方API，可能需要先进行相应的配置和授权。
打包和发布
打包应用程序
使用HBuilderX进行打包：HBuilderX是UniApp的官方开发工具，可以通过它来打包应用程序。在HBuilderX中，选择菜单栏的“发行”->“原生App-云打包”或“原生App-离线打包”，然后根据提示进行配置，选择目标平台和相关设置，最后点击打包按钮即可生成应用程序。
使用命令行进行打包：UniApp提供了命令行工具uni-app-cli，可以通过命令行进行打包操作。首先，全局安装uni-app-cli工具：npm install -g @vue/cli。然后，在项目根目录下运行命令uni build，根据提示选择目标平台和相关设置，最后等待打包完成。
使用第三方打包工具：除了使用HBuilderX和命令行工具，还可以使用第三方打包工具将UniApp项目打包为不同平台的应用程序。例如，使用wexin-app工具将UniApp项目打包为微信小程序，使用dcloud-io工具将UniApp项目打包为快应用等。
发布应用程序
准备应用程序的发布版本：根据目标平台的要求，生成应用程序的发布版本。例如，在HBuilderX中选择菜单栏的“发行”->“原生App-云打包”或“原生App-离线打包”，然后根据提示进行配置，最后点击打包按钮生成应用程序的发布版本。
注册开发者账号：如果要发布到应用商店，需要先注册开发者账号。不同的应用商店有不同的注册和审核流程，需要按照它们的要求进行操作。常见的应用商店包括苹果App
Store、Google Play、小米应用商店等。
提交应用程序：根据应用商店的要求，登录开发者账号并提交应用程序。提交的过程中可能需要填写应用信息、上传应用截图、设置定价等。同时，还需要遵守应用商店的政策和规定，确保应用程序符合要求。
等待审核和发布：提交应用程序后，需要等待应用商店的审核。审核的时间长度因应用商店而异，可能需要几天或几周的时间。一旦应用程序通过审核，就可以发布到应用商店，供用户下载和使用。
除了应用商店，还可以通过其他渠道发布应用程序，例如通过企业内部分发、第三方应用市场、自建网站等方式。根据发布渠道的不同，可能需要进行相应的配置和操作，如生成签名文件、配置下载链接等。
注意：在发布应用程序之前，需要确保应用程序的版权和合法性，并遵守相关法律法规。同时，还要根据目标平台和发布渠道的要求进行相应的准备和配置。
实践中的建议
在开发中，需要注意以下几点，开发就没有什么问题了。
熟悉Vue.js：UniApp基于Vue.js框架，因此熟悉Vue.js的语法和特性将有助于更好地理解和使用UniApp。
了解UniApp的组件和API：UniApp提供了丰富的组件和API，包括视图组件、表单组件、媒体组件、网络请求等。了解和熟悉这些组件和API的使用方法，可以提高开发效率。
使用条件编译：UniApp支持条件编译，可以根据不同的平台进行代码的编译和处理。合理使用条件编译，可以针对不同平台的特性进行适配和优化。
良好的代码组织和模块化：将代码按照功能模块进行组织和分割，使用Vue的单文件组件（.vue文件）进行开发，有助于代码的可维护性和可复用性。
优化页面渲染性能：UniApp使用了虚拟DOM来管理页面的渲染，但仍然需要注意优化页面渲染性能。避免使用过多的计算和响应式数据，使用v-if和v-show来控制组件的显示，减少不必要的重渲染。
多平台适配：UniApp支持将同一代码base编译为多个平台，但不同平台可能有不同的特性和限制。在开发过程中，要注意多平台的适配和测试，确保应用在不同平台上的兼容性和用户体验。
及时查阅文档和社区：UniApp有详细的官方文档和活跃的开发者社区，及时查阅文档和参与社区讨论，可以获取到更多的开发技巧和解决方案。
进行性能优化：根据项目需求和性能瓶颈，进行性能优化。可以使用性能分析工具来分析和优化应用的性能，如减少网络请求、使用图片压缩、使用异步组件等。
不断学习和实践：UniApp是一个不断发展和进化的技术框架，不断学习和实践新的技术和功能，可以不断提升自己的开发能力和项目质量。
⭐⭐⭐⭐⭐UniApp官网还是非常非常不错的，很多东西说的很清楚，非常友好。实际开发中，有不懂的地方，多看官方文档！！！
传送门：官方文档
总结和前景
对UniApp的总结
优点：跨平台开发：UniApp基于Vue.js框架，可以将同一份代码编译为多个平台的应用程序，包括微信小程序、H5、iOS、Android、快应用等，大大减少了开发成本和工作量。
开发效率高：使用Vue.js的开发模式和组件化开发，结合UniApp提供的丰富组件和API，可以快速构建应用程序，提高开发效率。
统一的UI风格：UniApp提供了一套统一的UI组件库��可以在不同平台上保持一致的UI风格和用户体验，提升应用程序的质量和品牌形象。
性能优化：UniApp使用虚拟DOM进行页面渲染，具有良好的性能表现。同时，UniApp提供了一些性能优化的工具和方法，可以进一步提升应用的性能。
社区和生态丰富：UniApp拥有活跃的开发者社区和丰富的第三方库支持，开发者可以在社区中获取到更多的技术资源、解决方案和工具。
适用场景：
中小型应用：UniApp适用于中小型的应用开发，特别是那些需要在多个平台上发布的应用程序。
原生功能不复杂的应用：UniApp适用于那些原生功能需求不复杂的应用，如展示类应用、小工具类应用等。
跨平台需求强烈的项目：UniApp适用于那些需要在多个平台上保持一致性的项目，如企业内部应用、品牌宣传应用等。
敏捷开发：UniApp适用于那些需要快速迭代和敏捷开发的项目，可以减少开发成本和周期。
一番总结，我们知道UniApp是一个适用于跨平台开发的框架，具有高效的开发模式和优秀的性能表现。在中小型应用和跨平台需求强烈的项目中，UniApp可以提供快速、高效和一致的开发体验，有很强的功能，还是非常🐂🍺的。
UniApp的前景
发展前景：跨平台开发需求增加：随着移动应用的普及和多样化，跨平台开发需求不断增加。UniApp作为一种跨平台开发框架，可以满足多平台的开发需求，有望在这个领域得到更多的应用和发展。
生态系统的完善：随着UniApp的发展，其生态系统也在不断壮大。开发者社区和第三方库的支持逐渐增多，为开发者提供了更多的技术资源和解决方案，进一步推动了UniApp的发展。
可能的改进方向：
性能优化：虽然UniApp在性能方面已经做了很多优化，但随着应用复杂度的增加，性能仍然是一个需要关注和改进的方向。UniApp可以进一步优化渲染性能、网络请求性能等，提高应用的响应速度和用户体验。
功能扩展和兼容性：随着各个平台的不断升级和演进，UniApp需要跟进并扩展新的功能，以满足开发者对各种原生特性和功能的需求。同时，UniApp也需要保持对不同平台的兼容性，确保应用程序在各个平台上的稳定性和兼容性。
开发工具的改进：UniApp的开发工具HBuilderX已经提供了很多方便的功能，但仍然有改进的空间。在开发工具方面，可以进一步提升开发体验、提供更多的工具支持和调试功能，提高开发效率和质量。
vue3版本支持：在未来，vue3越来越成熟后，UniApp必然也要支持vue3写法的。
当然，关于UniApp什么时候支持vue3这件事，后续我们接着聊。
创作不宜，如果对您有帮助，希望得到您的三连支持😘😘😘
