应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:32

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


页面每个列表项,能够后看见更多的细节和大图。在本页面展现或者提个弹窗就是基本不可能将的了。下面我们就建立一个代莱页面去展现更多细节(我们之前已经建立了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

TAG标签:
阅读推荐