微信小程序二

Posted 2021-09-10 想成为大师啊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序二相关的知识，希望对你有一定的参考价值。

学了一段时间微信小程序，但是没有实战，就不知道自己哪里没掌握，哪里的知识点不清楚。所以做一个豆瓣评分的小程序，试试~

页面顶部

在创建完微信小程序后，可以在首页编写豆瓣顶部颜色和标题设置。像后面的创建 pages 文件的路径均在 app.json中的pages里面设置

搜索框（组件）

对于搜索框的写法有两种；

通过创建一个搜索框组件，在index.json中填入组件地址
直接在当前页面写一个搜索框

但因为后面还要写一个搜索页面（里面还有一个搜索框），所以采用第一种方法；减少代码量，方便后期维护。

1、新建一个components目录，在该目录下创建一个searchbar组件

2、在 searchbar.js 中 properties属性列表中加入一个 isnavigator 用于判断首页，还是搜索页面；

3、搜索框中间的搜索图标可以通过将图片转码后上传，得以显示；也可以先创建一个 image文件夹，在里面放图片，然后改变它的位置和大小。

4、在index.json里面加入搜索框的组件

搜索页面

1、在前面也提到首页一个搜索框，也有一个专门的搜索页面，所以先在 app.json 中写入 search ；可以将 search 页面放在首页，方便调试

2、在search.json中使用自定义组件 —— 搜索框组件；

3、在 search.wxml 中开头使用组件 — searchbar；可以通过判断语句进行来回切换页面，那么之前在自定义组件中的属性 isnavigator 来判断当前页面是首页还是搜索页

4、搜索页面的效果图，通过组件 input 即可在搜索框内进行输入

5、搜索页面得到的数据，是在 JS 部分完成的；那如何得到这些数据呢？就是通过输入的关键词，然后与后台数据进行比对，最后展示出包含关键词的数据列表。

首页板块

1、这是小程序的三大信息之一 — 电影，它也是由多个盒子组成，其中也用了评分组件

2、在index.wxml中确定好位置

3、根据设计图，将放置好的wxml里面的内容进行修改

4、页面实现后，可来回推动

电影评分

我们发现首页每个显示的电影、电视剧、综艺的文字下都有星星评分；点击每个详情页面后，也是有星星评分的标志。那么就有了两种方法：

在每条影视信息下都去写星星评分，这样不仅造成代码量增大，而且很是繁琐。
写一个星星评分的组件，不仅方便调用，而且有益于后期维护。

所以我们选择第二种方法：写一个星星评分的组件。

1、先将从 icon 上下载的星星图片放在 image 文件夹中，然后我们再去创建一个组件 —— stars

2、在 stars.js 目录下，将星星相关属性和逻辑设置好，然后发送给 stars.wxml 上

3、在 stars.wxml 将数据渲染到页面上后，在 stars.wxss 上修改整体的布局和样式。

4、演示效果：我们就可以直接将星星组件放到 index.wxml的相应位置上，效果也是非常好

请求网络数据

最开始首页的影视信息数据都是我们手动添加上去的，这样的话，代码量是个问题，而且方法很 “笨” ；因此我们可以通过请求网络数据的方式，去请求我们需要的数据。

1、在 index.js 上写页面逻辑

2、下面的第一张图是我们所获取到的全部数据，但是我们并不是全都要；所以我们通过

var movies = res.data.subject_collection_items;

这句代码，拿到了我们想要的部分（也就是第二张图的数据），最后发送到前端上进行展示

3、因为我们得到的数据是以列表的形式存储的，所以我们先要在大盒子里通过 wx:for 将数据全部循环出来，得出来的数据都是以 item 为主，类似：item.title（标题）…

4、优化代码结构；首页的影视信息 — 电影、电视剧和综艺三个部分的代码基本一模一样，所以可以通过新建一个组件的方法来减少代码量和利于后期维护；相对于上面的代码

5、我们通过构建组件来减少前端的代码，那 JS 部分的代码是否也可以通过类似的代码来达到减少代码量的目的呢?