新手HbuilderX uni-app使用心得

  作为一名大二计算机专业的学生，我本学期学习了uni-app框架，这是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5、小程序等多个平台的应用程序。在学习过程中，我深刻体会到了uni-app的优点和不足之处，下面我将写几个页面来并讲述学习心得。

一、uni-app的开发流程
安装开发环境：开发者需要安装HBuilderX开发工具和相应的开发环境。

创建项目：开发者可以在HBuilderX中创建uni-app项目，选择相应的模板和平台。

开发应用程序：开发者可以使用Vue.js的语法进行开发，同时还可以使用uni-app提供的组件和插件。

调试应用程序：开发者可以在HBuilderX中进行应用程序的调试和预览。

打包应用程序：开发者可以使用HBuilderX将应用程序打包成iOS、Android、H5等多个平台的应用程序。

二、安装HbuilderX流程

一、下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧

HBuilderX-高效极客技巧 (dcloud.io)https://www.dcloud.io/hbuilderx.htmlHBuilderX-高效极客技巧

二、选择对应的版本下载即可：

三、开始创建新的项目

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

 第二步：选择uniapp类型，输入工程名，选择模板，点击创建，即可成功创建

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

四、仿豆瓣电影评分网做一个小项目

第一步：

当然还是和刚刚上面说的咿呀那个，创建项目，名称我用的Uni-A_1，然后创建首页、搜索页、分类页、电影详情页，以及一些其他的页面，

如图所示：

第二步：

在static包中准备好写项目时所需要用到的照片，切记，不能单独创建一个image图片包，因为page页面不会读取用户自己创建的图片包路径，默认只能读取static里面的图片路径

第三步：

开始动手写页面和样式

1.先做一个首页：

既然要做的是一个电影列表首页，老生常谈，肯定不能少了搜索框和轮播图，那我们就先做这两个，一下是代码

<!-- 搜索栏开始 -->
        <view class="search">
            <text class="iconfont icon-sousuo"></text>
            <!-- 组件方式跳转页面 -->
            <navigator open-type="navigate" url="/pages/Search/Search"><text>搜索电影、电视、综艺等</text></navigator>
            <!-- api方式跳转 -->
            <!-- <button @click=toLogin>点击跳转到我的页面</button> -->
        </view>
        <!-- 搜索栏结束 -->

然后接下来是轮播图的代码：

<view class="uni-margin-wrap">
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular="true"
                indicator-color="rgba(0,0,0,1)" indicator-active-color="#ff5500">
                <swiper-item v-for="(item,index) in swiperPicture" :key="index">
                    <view class="swiper-item"><img :src="item.url" alt="" /></view>
                </swiper-item>
            </swiper>
        </view>

效果图这里因为我的图片是调用接口文档的图片，接口我已经删除了，所以这里图片不显示，正常使用自己的图片是可以显示的，也可以选择不适用v-for循环输出图片，那样子会麻烦一点：

然后是样式的使用，这里我是用课堂上老师教的引入外部文件写样式，因为如果在同一页写样式、js还有代码的话，写的多了，上下滑动麻烦，不好找代码，当然直接写在这里是没有问题的

在另外一边写的样式还是正常写的

写完了这两个就可以开始写下面的电影列表，效果图如下：

这里我做的很简单，只需要简单的利用好v-for循环以及利用弹性布局就可以写出来了，代码如下：

这里电影列表等信息是从外部引入的文件包中拉取的列表信息，这样可以在你没有接口的时候使用，算是新手的方法，到后面学的深入了可以使用云数据库，再就是java后端、.net后端等直接连接数据库，比我用的都要更好

所有信息都可以从豆瓣网上查到，只不过需要自己手打，如果有大佬会使用python爬虫爬下来，请忽略我前面说的，然后就是这里的样式我就不放出来了，前面的样式会写，下面的这些自然也肯定会写

如果有人问什么是弹性布局，可以移步百度、b站，下面我放一张弹性布局属性图，希望有帮到你

2.详情页

话不多说，我们马上开始下一个页面，就做电影详情页，点击电影能看到电影的详细信息，然后同时包含跳转播放源(注意：非私人播放源),效果图如下(简介按钮没做好，请忽略):

 

这就是详情页大概的样式，然后开始放代码：

然后这个页面也没有用到什么高级的代码，全是新手级别的，只有<text v-else>{{MovieDetail.info.substr(0,35)}}...</text> 这一处是为了做出隐藏电影简介的效果，然后我的样式没写好，刚刚的效果图应该能看到

另外还有一个需要说的点就是播放源处的向右箭头“<text class="iconfont icon-xiangyoujiantou"></text>”，这里涉及到另外一个插件，就是阿里巴巴矢量图标，阿里巴巴矢量图标库官网：iconfont-阿里巴巴矢量图标库 然后使用方法太多了，我就不在这一一列举，就说我用的最多的方法：

1.找好需要的图标后选择下载文件夹至本地

2.下载后将包剪切放入static包中，因为矢量图标也算图片

然后再修改里面的代码成这样：

这样就可以使用图标了，长话短说，我们下一步

3.搜索页：

效果如图

代码如下：

然后我的历史记录使用的是搜索时放入本地缓存，然后点击删除就可以从本地删除搜索记录，这里原本是动态的，可以搜出结果，我太久没使用过了，无法再调用接口数据，我也不改了，你们将就着看一下。

 

以上是全部代码和之前写过的注释，这个小项目的页面我就写了三个，因为是当时刚学习uniapp的时候写的，有很多地方不够好请忽略。

五、总结

好了，这个项目和我的新手心得就写到这里了，然后我后续学到了很多其他东西，一时半会不好总结，只能大概提一下，后续学到的，可以用云数据库充当后端代替接口，然后还有代码的拓展组件，还有第三方代码

上面是拓展组件，我的小项目用的基本全是内置组件，拓展组件官网：uni-ui 介绍 | uni-app官网 (dcloud.net.cn)，内置组件的使用方法里面也可以找到，实在解决不了的疑问问问老师，再就是百度、g先生

等到大成的时候就可以自己独立写一款uniapp的小程序了，如果看了这篇文章成了大佬，回来踩我一下就行。