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

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

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

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

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

上一节同时实现了循环列表数据图形至视图,并给列表每一项嵌入了路由导航系统至新页面查阅更多细节,但是目前我们的数据都就是交互式的,现在我们就已经开始利用微信的request命令去发送豆瓣电影USB提供更多的数据。


API: wx.request(OBJECT)


参数存有7个,这里主要谈一下几个关键的:


url : 命令的地址


data: 随身携带的数据


method : 命令方式,预设为get


success: 命令顺利的反弹函数


介绍了网路命令的方法后,我们就不须要我们原来演示的那些数据了,把所有的假数据统统杀掉,领一个觑的数据用以摆数据即可。


data:{


moivelist:[],


loading:false


}


现在页面进去的时候只展现了一个标题,因为数据为觑了循环不出了,现在须要我们在页面进去的时候传送一个命令去拒绝接受数据。


豆瓣提供更多的API:[Title]https://developers.douban.com/wiki/?title=movie_v2#search


具体内容参数和USB恳请自行查询,采用方法:https://api.douban.com + 对应的USB + 参数(如果需要的话)


例子:https://api.douban.com/v2/movie/top250


我们以命令 名列250 这个USB为基准:


onLoad: function() {


var url=https://api.douban.com/v2/movie/top250;


var that = this;//保证反弹函数this的指向恰当,后面可以以es6的箭头函数替代


wx.request({


url:url, //KEY和KEY值相同可以缩写为url


data: {}, //不建议数据


header: { 'Content-Type': 'application/json' },


//顺利时的反弹,res为返回值,须要储存至我们的data数据里面


success: function(res) {


that.setData({


moivelist: res.data.subjects,


loading: true


})


}


})


}


读完后,页面进去的时候就可以传送命令,并将数据留存至moiveList,并通过循环把数据展现出,但是如果网络高的话,可以存有一段真空期就是没数据的,我们须要给用户一个提示信息。


给页面嵌入一个loading



读取中....



###我们使这个loading一已经开始就是表明的,当数据读取顺利后,才使他消失。我们通过将hidden存取至{{loading}}上,修改{{loading}}的布尔值去同时实现这个效果。一已经开始{{loading}}的值就是false的,也就是不暗藏;success后将他设置为true,从而同时实现这个效果。


###这样我们这个页面就搞好了,另一个页面同理,发生改变一下USB就行了,我们主要看看一下detail这个文件。


###我们现在可以同时实现网络命令了,在之前我们detail的数据都就是外面从列表传过来的,我们就是这么写下的。



我依靠这么短一段代码,真的须要吗?我们现在就可以缩写了,我们只须要传一个参数就可以了。


把template模板里面wxml里面上述代码换成下面的



我们只须要一个这个电影的ID就行了,我们可以根据这个ID自己命令数据


//在detail.js的Onload函数中以获取至页面传过来的ID


onLoad: function(options) {


var that = this;


var address = 'https://api.douban.com/v2/movie/subject/';


wx.request({


url: address + options.id,


data: {},


header: { 'Content-Type': 'application/json' },


success: function(res) {


that.setData({


item: res.data,


loading: true


})


}


})


}


这样就顺利完成了,现在我们在tabBar追加一个搜寻页面。忘记新页面都必须嵌入至app.json中,这里就不再阐释了,页面大概这个样子




读取中....








{{cancel}}








下面的列表跟前面一样,就多个了Input和按钮而已,同样的wxss样式我们就不管了,只看看js。


主要代码如下:


data: {


moivelist: [],


loading: true,


cancel: "中止",


search: ""


}


,


inputing: function(event) {


if (event.detail.value) {


this.setData({


cancel: "搜寻"


})


} else {


this.setData({


cancel: "中止"


})


}


},


//丧失焦点事件


quick: function(event) {


if (!event.detail.value) {


this.setData({


cancel: "中止"


})


} else {


this.setData({


search: event.detail.value


})


}


},


//页面搜寻事件


searching: function() {


if (this.data.cancel === "中止") {


wx.hideKeyboard()


} else {


this.setData({


loading: false


})


wx.request({


url: url + this.data.search,


data: {},


header: { 'Content-Type': 'application/json' },


success: function(res) {


that.setData({


moivelist: res.data.subjects,


loading: true


})


}


})


}


}


看上去写下了很多,其实就2件事:


* 推论Input的值,如果为空,则使按钮的值“中止”;不为空则为“搜寻”。


* 根据按钮的值存取页面事件,为中止则使键盘下去(手机才行及)为“搜寻”则传送网络命令,并将发送的数据留存以便循环展现出。


至此,几个文件就都写下不好了,现在去对代码优化一下。


1. wxml:我们已经建立了一个通用型的模板了,似的没有得优化了。


2. css : 可以辨认出我们几个列表都用了一个模板,因此对应的CSS代码也就是一样的,我们可以把这部分CSS代码放在app.wxss公共样式里面,其他页面对应的WXSS那部分都可以删掉了。


3. js:wx.request时使用了基本相同的东西,可以放在一个单独的js里面。


建立一个util文件夹,在里面建立一个util.js文件,用以摆我们的方法。


function getData(address,datas,cb){


wx.request({


url: address,


data:datas,


header: { 'Content-Type': 'application/json' },


success: cb


})


}


module.exports = {


getData: getData


}


我们定义了一个方法,并通过module.exports将他求出,其他页面须要采用方法时,须要先导进


var util = require("../../utils/utils.js")


采用时:util.getData(参数1,参数2,参数3)


例如:


onLoad: function() {


util.getData(url,{},(res)=>{


this.setData({


moivelist: res.data.subjects,


loading: true


})


})


}


至此我们整个APP即使基本顺利完成了,时程如果除了补足则再继续嵌入。


代码参看demo4 , 网址为:https://github.com/linrunzheng/wx-samll-demo

TAG标签:
阅读推荐