写在前面
前段时间跟着某课堂的小程序课程学习了微信小程序的简单开发，经过一段时间的学习，决定动手写一个小项目，把学到的知识点整合运用起来，由于时间关系，该博客内容会分多次编辑。由于时间关系，博客仅介绍部分模块的实现方法，对于具体的布局方法、样式实现以及数据的请求处理不做详细介绍，文末会附上源码，自行下载查看。
页面顶部
- 首先新建一个小程序项目，初始项目目录如下；
- 修改app.json中的代码，设置顶部样式；
3.显示效果如图。
搜索栏
对于搜索栏的设置我们有两种方案，一个是直接写一个文本输入框，另一个是自定义一个搜索组件，这里我们选择第二种，自定义一个搜索组件，操作如下。
主页搜索栏
- 新建一个conmponents目录，该目录下新建Component,目录结构如下；
2.在search.wxml里面输入代码设置自定义组件，class是为了在wxss里面设置属性；
<!--components/searchbar/searchbar.wxml-->
<view class="searchbar">
<navigator url="/pages/search/search" class="search-navigator"></navigator>
</view>
3.在search.wxss里面设置组件的属性，注意搜索栏里的矢量图添加，由于微信小程序的限制，不能直接上传本地图片，我们需要将图片转码后上传， 将转码后的内容全部复制在url后面,同时在comenpent目录下新建一个image文件放置图片；
转码工具地址
矢量图获取地址
4.在Index.json里引入自定义组件，在index.wxml显示组件；
{
"usingComponents": {
"searchbar":
"/components/searchbar/searchbar"
}
}
<!--index.wxml-->
<searchbar></searchbar>
5.显示效果如下。
搜索详情页
1.这里我们需要实现的是当我们在主页点击搜索栏时跳转到搜索页面，要在search使用自定义组件必须要在search.json里面先注册；
2.注册完我们就可以在search.wxml里面使用组件了，但此时我们点击搜索时虽然页面切换了，但我们看到的顶部还是一个搜索组件，并没有输入框，我们修改searchbar.wxml部分代码，在该页面的搜索组件里面添加一个输入框，注意输入框的输入位置，示意如图；
3.上一步的输入框实现了你会发现，我们在两个页面使用的是都是一个组件，只是详情页增加了一个输入框，那么我们该如何区分主页和详情页的组件显示呢？解决办法是在searchbar.js里面加一个事件属性，然后在searchbar,wxml里面根据事件属性决定显示效果；
4.此时我们根据时间的返回结果在searchbar.wxml里面通过wx:if…wx:else进行一个判断；
5.实现的效果展示如下。
6.搜索页面的效果图，绑定input事件即可实现输入触发事件；
7.搜索页面的逻辑实现，搜索其实不是很难，我们在搜索框将入搜索的字，把它拿去跟后台请求的数据进行比对，展示出带有搜索词的影片信息；
首页板块
这是小程序的主体页面，分类展示了不同类型的电影及其评分。
1.设计思路分析：
2.在index.wxml设计如下的板块区域放置内容；
3.根据实际效果修改index.wxss里面的样式，保证页面的美观性；需要注意电影名字的显示，当字数超出限制时显示三个点；
4.实现的效果如下，下面的内容照着这个格式写就可以了。
电影评分
评分这里我们主要是根据不同的电影渲染不同的星星数目，首先新建stars的目录，用于存放星星，这里有两种思路，一种是写死星星数据，在每一部电影的后面对星星数目进行对应的渲染，但这种方法的缺点是我们需要在每一个使用星星的的地方对星星进行渲染，这样一来就加大了不必要的代码量，另一种方法就完美解决了这一问题，我们使用小程序的自定义组件，将星星的渲染写成一个组件，这样我们就可以在需要使用的地方使用了。
1.将我们找到的星星的矢量图放在images文件中，在stars.wxml中显示星星图；
2.根据展示效果适当修改星星的样式，注意大小及位置；
3.根据评分对星星进行渲染，这里我们在stars.js文件对评分进行转化以显示在前端页面；（难点）
4.对星星进行进一步改进，以保证我们可以在使用的时候修改它的大小；
5.实现的效果，该组件在后续页面仍会使用，这部分的操作大大减少了后续的工作量；
请求网络数据
前面我们在主页展示的数据是我们人为加上去的，这就导致了数据量有限而且代码量冗杂，这一节我们将学习如何通过wx.request发起网络请求获取豆瓣的影片。
1.在index.js文件中发起网络请求，获取电影信息数据，返回给前端展示；
2.根据请求返回的数据选择我们需要的在前端展示，此时删去我们前面手动在主页添加的影片信息，转为展示网络获取的数据信息，这样就会发现代码量明显减少了；
3.显示效果图，与豆瓣信息进行比对；（左边是我们获取的，右边是豆瓣的）
Tip:这里你会发现我不同的标签展示的是同一个类型的电影信息，这是因为豆瓣的api已经不能使用了，正在寻找解决办法！！
4.优化代码结构，完成上面的步骤我们已经实现了需要的功能，但你会发现代码冗杂，存在很多相似的代码，这就造成了了不必要的内存浪费，解决这一问题的思路同前面的星星显示一样，把相同的代码写成自定义组件，这样一来就减少了代码的重复，使用也更加方便；
首先新建一个目录名为indexmodel的component文件，将我们写在Index.wxml里面显示影片信息的代码块复制到indexmodel.wxml里面，此时我们只需要一个代码块就可以，不需要每一个都写，如图：
5.上一步我们对网络请求的数据在前端的展示进行了优化，那我们能不能对js部分的请求也进行优化处理呢？
6.在utils文件夹下新建一个url.js文件用来放置我们的网络请求链接，在index文件夹下新建一个network.js用于专门发起网络请求；
将原本放置在index.js中的网络请求内容剪切到network.js文件中，并修改下列内容，（把链接单独拿出来是因为我们在后面还会用到这些网络链接，当然你也可以把网络请求的形式代码重构，减少代码量）
7.页面效果展示，虽然界面与前面一样，但代码复用率高，减少了代码冗杂的问题。
查看更多页面
我们在每一个分类的顶部添加了查看更多按钮，点击按钮时我们会跳转到一个新的页面展示更多相关电影信息，最原始的办法就是我们再重新写一个全新的界面，用来展示更多信息，但这里我们推荐一种比较机智的办法，我们把首页的页面信息拿出来单独做成一个组件，通过代码重构实现页面的重复使用，这样大大减少了代码量。
1.在pages文件下新建一个名为list的目录，利用前面自定义的vitemview组件创建一个同首页页面的新页面，（注意在list.json文件加入itemview注册）
2.这里我们在查看更多的页面时依然要通过api请求网络信息，所以这里我们先去把网络请求部分network部分的代码进行重构，方便我们在更多页面复用，在utils文件下新建一个new_work.js文件，将原来的代码复制到新文件里，删除原来的文件，下面是对newwork代码的重构；
3.在list.js文件里请求数据，并传递给前端页面显示；
4.完成后的效果，页面加载时我们可以使用微信提供的api中的wx.showLoading()和wx.hideLoading()引入一个加载的效果；
详情页设计
1.当我们点击主页的电影信息或者列表页时会自动跳转到该该电影的详情页，因为这里的布局问题，我们在pages文件下新建一个details的目录文件设置该页面，页面布局大体如下；确定基本布局后就需要建立组件，合理嵌套组件实现界面分配；
2.样式表根据我们想要的效果添加适当的属性就行了，需要注意的是这里的顶部信息的展示布局用到了flex布局的两端分布，这样就省去了我们对样式做过多的约束；
3.js部分和前面都是一样的，我们在newwork部分发起的网络请求在这里获取，我们需要在这里把数据提供给前端展示，具体实现逻辑并不复杂；
4.因为我们在这里又用到了星星组件，记得在json文件中引入；
评论页设计
在电影的详情页我们在底部添加了查看短评的部分，但由于页面限制，我们仅仅在这里展示了4条评论，为了便于用户查看更多的短评，我们在详情页底部设计了查看更多短评，用户点击后跳转至全部短评；
1.短评部分因为要在不同页面重复使用，我们把短评抽出来写成组件，便于代码的复用；
2.有了前面我们自己定义的组件，我们只需要再几个容器，把自定义的组件放进去就可以快速实现我们的需求了；
3.这里需要注意一下，我们在使用自定义的组件的时候要注意样式表会不会与我们新建的view组件的样式冲突，进而对容器进行特殊的样式约束；
4.实现分析以及效果；
项目文件整体结构
运行效果演示
项目总结
这是小程序学习的第一个实战项目，功能实现有所欠缺，但小程序基本的东西，包括布局、自定义组件的模块化编程、网络请求都有所涉及，是一个不错的练手项目，通过这个项目基本掌握了对于小程序常见的页面布局有了基本认识，程序中用的最多的布局方式是flex布局，可以参考这篇文章。原文地址
文章有错误或不足，欢迎批评指正。
-------------编辑于2021年4月22日----------------------