Runlin微信小程序系列教程一：从零开始写一个demo《中》

上一节写下了一个首页列表的展现，现在我们须要一个效果：

页面每个列表项，能够后看见更多的细节和大图。在本页面展现或者提个弹窗就是基本不可能将的了。下面我们就建立一个代莱页面去展现更多细节（我们之前已经建立了2个页面，其中rank页面还是觑的，这里故意先不写下，后面自然可以迁调在）

在pages之下建立代莱文件夹：detail，同时建立4个detail文件js,json,wxml,wxss

对于每一个页面都须要写道app.json的pages中，因此必须将我们追加的"pages/detail/detail"嵌入至“pages”数组中回去。如果追加的页面就是底部tabBar栏中的一项，还须要嵌入至tabBar中的List数组，我们这里就是列表页面时的新页面，所以不须要写道list中。

我们期望的效果大概就是这样的：

现在存有一个问题时：我如何在页面的时候以获取至对应的每一项的数据，并且在代莱页面展现出呢？

这里必须化解2个问题：

###导航系统；

参数的传达；

导航系统 :

同时实现导航系统的方法存有2种，一种就是轻易利用navigator组件, 另一种就是利用导航系统api，通过给列表嵌入页面事件，同时实现wx.navigateTo（留存当前页面，存有左上角回到）或者wx.redirectTo（停用当前页面，没右上角回到按钮）。

为了便利我们这里轻易使用组件去写下

//在这之后填入导航系统标签

//url对应文件的路径，不须要写下后缀wxml

xxxxx还是原来的配方xxxxxxxx

然后我们就可以同时实现页面重定向的效果了，但是这时候detail.wxml还是空白的。

下面已经开始写下detail.wxml

{{item.title}}

{{"评分"+item.original_title}}

{{"编剧"+item.directors[0].name}}

{{"主演"+item.rating.average}}

{{item.summary}}

跟之前index一样，我们这里的数据也从js拎过来，不过这里从detail.js拎的，但是这个时候detail.js中的data就是没数据的，因为我们期望数据从index列表的每一项页面时传过来的，而不是我们轻易写道detail.js里面的，这个时候就须要使用生命周期函数的onload函数了

也就是说，每个页面在Onload时，都可以以获取上一个页面传达给你的参数（假如存有的话），那么现在必须化解2个问题：1就是上一个页面如何托付给我，2就是我如何接收数据。

旧有页面传达参数：

我们刚才在index里面提了一个导航系统并且 url="../detail/detail" ，须要传达参数时，仅须要在url后面：+?+数据

比如：url="../detail/detail?id=test"

比如：https://i.cnblogs.com/EditPosts.aspx?opt=1

可以辨认出格式其实就是get递交数据时的格式，写下过html表单form的一定很熟识了，须要递交多个参数时，须要在后面提 & 符号

比如： url="../detail/detail?id=test1&name=test2&age=12345"

新页面拒绝接受数据 (特别注意只有在Onload时才可以拒绝接受传过来的数据)

//我们这里为什么会用item是因为我们上面的数据存取用的就是{{item.xxx}}, 须要对应不好，如果一个出现变动，另一个也必须跟著发生改变

//detai.js代码如下：

Page({

data:{

title:"读取中",

item:{},

loading:false

},

onLoad:function(options){

this.setData({

item:options

})

},

onReady:function(){

},

onShow:function(){

},

onHide:function(){

},

onUnload:function(){

}

})

detail.js即使读完了，CSS方面就不写下了，比较无脑，没什么不好谈的，直观设置一下样式不要太丑即可，整个detail的文件都搞掂了。

目前我们前面的第二个导航系统rank还空着呢，从表象来看，rank的格式跟index就是一样，仅仅就是数据相同，那么我们只要把index的文件激活一份过来就可以了，把演示的数据改为一下即可。

虽然可以，但是代码很多重复，下面我们就引入一个代莱东西叫做模板 template 。

定义一个name为test的模板

采用时，须要先导入写给的模板所在的边线

因此，同样的我们再建立一个文件夹template摆模板，同时建立.js和.wxml文件这2个即可。 template.js并不需要数据，只是用以登记注册一下页面（不登记注册控制器存有收起提示信息你page.js xxx什么的），将其他页面的.js激活过来，并将data里面的数据和其他的事件都出掉，留存最基本的空数据和空函数。

template.wxml内容如下：

定义不好模板不好，将rank.wxml内容记为：

电影top20

//导入模板

//采用模板，并通过wx:for将数据循环展现出

将index.wxss和index.js文件激活一份至rank.js，同时将rank.js中data的数据稍微修正一下，不要使数据都跟index的一样.同时将我们的index.wxml中列表也修正为采用上面的模板，至此就基本顺利完成了。

总结一下我们主要的知识点：导航系统读法，如何传达参数，声明周期函数，如何以获取传达过来参数，如何定义和采用模板及采用参数。

至此我们采用的都就是交互式的数据，下一篇我们将调用豆瓣提供更多的USB去调用数据，演示跟后台的可视化。

demo2源文件见到 https://github.com/linrunzheng/wx-samll-demo