uniapp学习心得

uniapp的优势

1.通过一个代码可以打包到不同的应用平台，提高开发效率。

2.方便入手，只要有vue的学习经验可以快速开发。

3.拥有丰富的生态环境，官方及第三方插件为丰富。

uni-app的简单使用

要使用uni-app必须先了解它的项目结构如图所示

uni-app项目文件结构链接

 在开发环境中必须先了解一下pages.json的页面配置与全局配置

 如图所知，pages就是页面配置，gloabalStyle是全局配置。

定义页面配置时需要注意的是pages数组的顺序：

在页面层级时：pages数组中页面的排列顺序影响了应用的界面层级。第一个页面会作为首页被展示，后面的页面会按照在数组中的顺序依次叠加显示，覆盖在前一个页面上方。

在路由跳转时：在应用中使用uni-app提供的路由API时，需要指定需要跳转到的页面路径。这个路径需要与pages数组中的某个页面路径相对应，如果pages数组中有重复的路径，可能会导致路由跳转的混淆和错误。

在资源加载是：由于pages数组掌管了所有的页面路径和配置信息，因此当打包应用时，所有页面相关的资源也会被一并打包到应用中。如果页面在数组中的位置发生了改变，可能会导致资源加载出现错误或者相互干扰。

所以说，认真考虑pages数组的顺序对于uni-app应用来说是非常有必要的，可以避免一系列潜在的问题。

globalStyle一般在用于设置应用的状态栏、导航条、标题、窗口背景色等，才会使用。

pages.json详细解释https://uniapp.dcloud.net.cn/collocation/pages.html#pages

使用vue进行快速开发，例如我做的一个简单的漫画前端

这是我的启动的第一个页面，在pages.json如下图

 uni-app开始引入阿里图标

第一步：进入阿里图标官网

完成以下步骤

 

 

 

 在app.vue中全局引入

 

 如下图

 完成了图标配置，可以 使用class进行引入相应的图标

 在引入图标的过程中，遇到了一些重要的问题。

项目打包运行在真机上时，图标不显示？

1.首先，确认你使用的字体文件是否正确引入到了项目中，路径设置是否正确，如下图。

 

2.真机访问时，可能需要调整字体文件的路径。例如，你的项目中字体文件的路径设置为 ../fonts/iconfont.ttf，可能需要将其修改为 /fonts/iconfont.ttf，以便可以在真机上正确加载字体文件。

3.在项目打包时，确保将字体文件设置为静态资源。

 uni-app如何加载json数据。

1.定义json文件用于存放data文件夹中（data文件夹需要在page同层级创建）例图：

 2.在所需求页面数据导入json数据并通过页面的生命周期OnLoad()进行加载数据

 

 成功获取到数据

 uni-app第三方插件的使用，提升开发效率

在hbuilder页面中点击工具——>插件安装——>安装新插件——>前往插件市场——>查找所需要的插件——>直接下载使用进行开发

例图：

 导入成功后

 直接对这个组件进行注册使用

 学习uni-app能方便入手开发，提升开发效率。需要注意的是，学习uni-app前需要先了解vue.js。总之，在学习过程中，代码报错是不可避免的，应该静下心来，把概念内容融会贯，多加思考，善于借鉴他人作品进行学习。