边做边学入门微信小程序之仿豆瓣评分(下)

微信小程序由于适用性强、逻辑简要、开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票、外卖点餐、移动商城、生活服务等场景服务提供商迅速切入了。

为了贴合实际的应用情况,本篇以豆瓣评分小程序为参考样例,边做边学小程序的入门开发知识。

目录

主页

首先是index.wxss文件,一行代码导入block模板的wxss:

然后是index.wxml文件:

这是首页作为静态页面的全部代码,通过导入block模板,在for循环中取出“正在热映”、“即将上映”和“排行榜”三个区块的数据,散开传入模板即可。

threeBlockInfo是我们在index.js文件的data中自定义的数组变量名,用来存放三个区块的标题和滑动条中的电影信息。这个数据是通过请求网络动态加载的。

网络请求

接下来我们先看看小程序的网络请求相关的知识。

wx.request()是小程序官方封装的网络请求API,它有诸多的其它的参数,这里我们只用了最简要的参数,url表示你要请求的网址,success表示请求成功后的回调(为简便,这里忽略fail等情况)。

小程序中有多处地方需要用到网络请求,因此我们将这个网络请求简单的封装一下,以便多处调用。

在utils目录下新建httpUtil.js文件,并写入:

这里封装了2个网络请求方法,一个是常规请求,一个是三个区块的请求(通过传入不同的key来识别对应的区块,以便在回调中存储返回值到对方的变量中,可能暂时不好理解,稍后看后文的用法一看并知)。

通过module.exports向外暴露方法名,并在需要使用的文件中导入本js文件,方可调用到这2个方法。

另外在utils目录中新建一个stringUtils.js文件,这是一个工具类,处理电影名称过长等情况,可以不必理解代码含义,复制过去即可。代码如下:

打开app.js文件,定义一个全局变量baseUrl,值为接口的基本网址。

注意,app.js最外层为App({}),各个页面的js文件是Page({})。

因豆瓣近期关闭了面向个人开发者的API接口功能,本篇目前采用一家第三方接口(t.yushu.im)提供的数据,其并未提供搜索功能的接口,因此暂时无法实现官方小程序中含有的搜索功能。

Tips:第三方接口仅供学习使用,请勿滥用;并且可能随时停止服务,请勿用在正式产品中。

因为小程序要求网络请求的域名必须为https安全链接,这里开发用的接口网址没有https证书,因此需要点击开发者工具顶端的菜单“设置”—“项目设置”,勾选“不校验安全域名”项。但是,正式发布的小程序所使用的网络请求中,接口网址必须为https类型。

逻辑实现

在index.js文件开头写入:

在这里导入了网络请求和字符处理工具类,这样就可以调用工具类中module.exports向下暴露的方法。通过系统提供的getApp()方法获得APP实例app,之后可以用app调用APP的相关方法。

在data中定义一个变量threeBlockInfo,内含三个空键值对,用来存放首页三个区块网络请求后的数据。

小程序每个页面存在着生命周期,例如页面首页加载时会触发onLoad(options)方法,在这里我们可以做网络请求的工作。

首先通过APP实例app获取到app.js文件中globalData里定义的基本网址,然后拼接出三个区块的接口网址。

通过网络请求工具类中向外暴露的方法去获取三个区块的数据。如果请求成功,将回调processResult()方法,我们在后面继续实现这个回调方法。(这里仅作演示用,未对请求不成功等情形做分支处理,可根据业务自行处理逻辑。)

这里我们先后发起了三次请求,分别去获取对应的数据,但回调未必会按顺序返回,可能后发起的请求先返回数据。如何在回调中区分是哪个区块的数据呢?这里传入的第二个参数key分别为hot/recent/top250,便是识别标识,用途看下文。

请求数据成功后,将对应的数据和其标题存入对应的threeBlockInfo[key]中。例如排行榜top250的数据和标题“排行榜”,将存入threeBlockInfo[top250]中,键名分别是blockMovies和blockTitle,如此,三个区块的数据无论哪个请求先返回数据,都会存入对应的键值对中,互不影响,同时保证了threeBlockInfo本身是有序的。

setData

然后,通过this.setData的方式,将threeBlockInfo的数据更新并重新渲染界面。

注意:小程序官方警告不要用“=”号赋值,这样并不会重新渲染界面,会导致用户在前台看到的数据和实际内存中的数据不一致。因为渲染界面属于耗时操作,不要频繁地setData,当页面在后台时,也没必要setData。

接下来,我们实现电影详情页。当我们在首页点击某个电影海报时,可以跳转到这部电影的详情页。我们来看获取电影详情页的接口网址。

显然,当我们点击首页电影时,要将点击的电影的id带到详情页,这样详情页才知道去请求哪部电影的数据。

那么,如何将数据带过去呢?

点击事件

我们回到poster.wxml中,在这个海报模板里,曾经有一行代码我们还没有讲解,如下:

catchtap正是点击事件属性,名为catchTapMovie,我们需要在调用处index.js中实现这个方法。

在点击行为发生后,系统为我们封装了点击控件的一些数据在event中。dataset.movieid便是从data-movieid里获取的值。

注意,无论是data-movieId,还是data-movieid,都用dataset.movieid(小写)接收;无论是data-movie-id或data-movie-ID,都用dataset.movieId(I大写d小写)接收。即不带“-”号的,都会转为小写;带“-”号的多字符,每个“-”号后的首字母变成大写(非首字母变小写),并与其它单词合并在一起。这里是大小写敏感的,变量名不一致将接收不到数据。

详情页

然后,在电影详情页detail.js的onLoad方法中接收参数,如下(请在movies目录下新建detail目录和detail页面,并在app.json的pages中配置路径)。

通过options.movieId接收到从首页带过来的movieId变量的值,拼接成接口网址后,请求获取电影信息,并在成功后回调processResult方法。

在此之前,我们先实现电影详情页的页面结构和样式。

detail.wxml代码如下:

detail.wxss代码如下:

在wxml中通过{{}}的方式绑定了一个变量,我们回到detail.js文件中定义这些变量并且实现剩下的业务逻辑。

然后接着实现刚才网络请求成功后的processResult回调方法。

按Ctrl+S保存后,快试试首页是否可以点击电影海报到详情页吧。

更多页

依葫芦画瓢,来实现首页点击“更多”按钮到更多页。首先在movies目录下新建more目录和页面,并在app.json的pages中配置页面路径。然后在block.wxml中找到“更多”按钮的点击事件名称及数据属性名。

通过title接收区块名称,点击事件为catchMore。在调用处index.js中实现吧。

在more.js的onLoad方法中接收传入的区块标题。

先来看看更多页more.wxml的页面结构。

更多页more.wxss的样式代码:

和首页类似,这里使用了一个控件,不过是竖向的,有一个名为loadMore的bindscrolltolower事件(滑动到底部),当页面滑动到底部时,将触发此事件,我们在js的这个事件里实现“滑到底部加载更多”的逻辑。(页面还有“上拉加载更多”事件,也可试试用这个方法实现)

在more.js代码中,有如下代码:

别忘了,此页面的海报也是可以点击进入到电影详情页的,很简单,和主页一样,在more.js里实现点击事件,携带movieId到detail即可。

到这里,我们边做边学了小程序开发最基础的一些入门知识,如页面配置、tabBar配置、模板页面、点击事件、网络请求与回调等,并能成功地独立完成一个较为简单的作品。

扩展知识

控件的点击事件有2种,除了文中出现的catchtap,还有bindtap事件。这两种事件的使用场景有什么区别呢?我们来看个小例子:

这里定义了两个嵌套的控件,内部使用了catchtap,外部则使用了bindtap。当我们只点击内部控件时,只会触发innerTap事件,外部控件的outerTap事件是不会触发的。而将catchtap改为bindtap后,外部控件的outerTap事件也能够触发。可见,bindtap不会阻止事件向外层(父层)传达,而catchtap则不同,会将事件捕获在本层,不再向外传达。

思考题

也许你注意到了,在控制台总是在有wx:for循环的地方会出现下图的提示,尝试去搜索下答案吧?

纯文笔记

记录知识,分享心得。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180322G1E2LS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券