双大括号就是{{}}用以JS和wxml存取事件的,比如说,数据更新,表明规则,等等的一些存有规则存有章法的操作方式。
那么我们就须要提及这种机制,为我们的image和text控件搞数据更新的操作方式。
较好晓得这点,后面的事情都交予JS回去顺利完成。
现在已经开始,分析步骤,(前面三步为一体,第四步则划出来说。)
1、
首先必须存有一个函数用以向网络传送命令这一步看看官方文档传送命令
2、
高度关注文档中的三个关键字,url、header、success,
url,就不多说道了网络命令,不介绍的必须先介绍一下
header,不熟识HTTP协议的朋友,在看见文档中这个属性时一定会蒙蔽看看的云里雾里的,他就是将网页中的内容展开解析比如说文档中的 header 方法中的代码:'Content-Type':'application/json' 就是把内容解析为json格式的,如果把它改成'Content-Type':'application/xml' 那么它就可以将网页的内容解析为xml格式的,现在你必须明白了,json就是微信自己选定的文件格式,我们按照它的读法就可以了,so等可以轻易激活过来采用。
success,加载数数据用的函数、(看看文档时看看他的类型Function)
3、(这一步的操作方式对后面的认知存有些许协助)
豆瓣电影API 我们分别必须采用至他的 , 正在热播 ,Top250 , 电影搜寻,三个USB。
https://api.douban.com/v2/movie/in_theaters 查阅USB 以正在热播为列 由于此页面的内容太繁杂,我们可以搞一些精简
关上此链接,按F12发生调试侧边,将页面中的所有内容激活,而后在调试侧边中输出 var a = 将激活的内容粘贴在等号后面,contrary,然后输出 a contrary,现在此页面的内容就有条理了。
4、
存有了以上步骤思路,最后必须想起,数据的加载,以及数据格式处置(这里的格式化与header相同,我们就是将数据格式化选曲给用户看看的)。
so:我们须要两个函数,一个用以循环结点加载网络数据,另一个则把数据格式化。由于这两个函数的也可以为后面top250的页面采用,所以我采用PCB把他们俩PCB出来可供后面的逻辑采用。
5、
把数据在wxml中展开关联。
存有了这四步的思路,我们已经开始看看JS代码的同时实现。(我害怕你已经昏了!嚷存有了前面的步骤搞铺垫我想要你乐得代码去可以更得心应手。)
由于前三步相对直观所以先从第四步的两个函数已经开始说道 :
在Utils中建立subjectUtills.js (文件名不是紧固的。)
接下来在 写下第一个循环获取数据的函数。
现在去写下数据格式的函数,由于代码有点多就想著给你节约点时间下面得出可以激活的文字。
// 获取数据并格式
function provessSubject( subject ) {
//电影名
var title = subject.title;
//编剧信息
var directors = subject.directors;
var directorStr = "";
for( var index in directors ) {
directorStr = directorStr + directors[ index ].name + " / ";
}
if( directorStr != "" ) {
directorStr = directorStr.substring( 0, directorStr.length - 2 );
}
//演员信息
var casts = subject.casts;
var castStr = "";
for( var index in casts ) {
castStr = castStr + casts[ index ].name + " / ";
}
if( castStr != "" ) {
castStr = castStr.substring( 0, castStr.length - 2 );
}
//类型信息
var genres = subject.genres;
var genreStr = "";
for( var index in genres ) {
genreStr = genreStr + genres[ index ] + " / ";
}
if( genreStr != "" ) {
genreStr = genreStr.substring( 0, genreStr.length - 2 );
}
//发售的年份
var year = subject.year;
//将数据格式化
var text = "名称:" + title + "\n编剧:" + directorStr + "\n演员:" + castStr + "\n类型:" + genreStr + "\n公映年份:" + year + "(中国大陆)"
//领到格式化的数据
subject.text = text;
}
模块化(PCB) 最后不要忘掉PCB
顺利完成了这两个函数,现在我们去写下网络命令的逻辑代码
第五步,顺利完成wxml中的数据关联。
特别注意 {{item.images.medium}} 这串成代码 和 {{item.text}} 后面粗谈。这里嵌入了block循环和loading组件。
谈一下{{item.images.medium}} , 而 {{item.text}}必须不必多谈就是我们格式化的数据。
采用第三步的操作方式 你可以获得这样的页面,看看了之后你必须就未明法号厉了,
首页差不多就写下不好了现在看看一下效果怎么样。
写下至这里一个展示区差不多就写下不好了,后面还要稳步深入细致。