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

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

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

完整微信小程序开发教程实例详解:微天气《下》:应用层,UI层 ... ...

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


一:应用层


在上一篇文章中,咱们把微天气的数据层的逻辑构建顺利完成了。这次我们去构筑这个小程序的应用层。


数据层研发顺利完成,接下来我们就可以著眼应用层的逻辑了。 我们这个小程序不须要修正 app.js 只留存它的预设代码即可:


//app.js


App({


onLaunch: function () {


},


globalData:{


userInfo:null


}


})


主要的应用层逻辑都在 index.js 这个页面上:


//index.js


//以获取应用领域实例


var util = require('../../util.js')


Page({


data: {


weather: {}


},


onLoad: function () {


var that = this;


util.loadWeatherData(function(data){


that.setData({


weather: data


});


});


}


})


大体看看一下, 也并不繁杂。 首先采用 require 语句引入我们上一篇文章中定义的 util.js 文件。 这里面提供更多了以获取天气数据的整个逻辑。


然后 Page 对象中, data 数据层定义了天气数据的结构:


data: {


weather: {}


}


在 onLoad 方法中, 采用 util 中的 loadWeatherData 方法以获取天气数据并设置至 UI 上:


onLoad: function () {


var that = this;


util.loadWeatherData(function(data){


that.setData({


weather: data


});


});


}


这个逻辑也不难理解,以获取至数据后, 采用 setData 方法将它设置至数据层中。 特别注意,一定必须用 setData 方法。 无法轻易用这种属性赋值形式:


that.data.weather = data


这样虽然也能够设置底层数据,但它无法更新 UI 层的表明。 这也就是微信数据存取机制的一个原理。 所以大家在操作方式数据存取的时候,一定必须特别注意这一点, 否则就可以难导致很麻烦的调试问题。


到此为止, 小程序的应用逻辑部分就顺利完成了。 怎么样,很直观吧。 对于应用层这块的逻辑,主要特别注意数据存取和声明周期有关的内容即可。这两个地方比较难产生非预期的结果。 其他地方和我们研发其他程序基本差不多。 关于应用层逻辑,咱们就谈起这里, 下篇再和大家谈谈 UI 层有关的内容。这样我们就可以对小程序的整个研发过程存有一个介绍了。


二:UI 层


那么咱们稳步, 首先咱们来看一下 index.wxml, 这个页面中定义了 index 页面的 UI:




首页的所有 UI 内容就都在这里了, 大家与否还回忆起咱们这个小程序主界面的样子? 贴出来再给大家总结一下:


这个界面就是上面那段代码生成的了。 接下来咱们逐一水解。 把上面的完备代码精简一下,咱们先去看一看整个 UI 的结构:



最外层就是一个 class 为 container 的 View, 它的里面摆了 4 个子 View, 分别为 top, topRegion,summary 和 daily。


top 区域就是我们最顶部的地方


去看一看 top 的完备定义:



里面的 3 个子视图分别对应了为表明的几个数据条目, 并且用一对大括号去提及我们 index.js 中定义的 data 数据中的内容。 关于数据存取的基本知识咱们在之前的文章中已经了解过, 如果对数据存取不熟识的话还可以参见之前的内容~


然后接下来就是 topRegion, 这个区域也很直观,表明我们当前地区的温度以及天气情况:



还是直观的数据存取, 彰显在界面上就是这个区域:


summary 区域的逻辑和前面两个分别并不大, 就不多说道了。 最后再来看一下 daily 部分, 这里面使用了一个循环语法:



它的第一个子视图采用了 wx:for 这个语法。 这个标记相等于对传至它的属性展开一个循环结点, 也就是 。 然后这个标签内部的子标签可以根据子集的数量重复发生,如果必须提及每次结点至的元素, 可以采用 item, 比如说我们这里的 和 等。


这样,我们最终在界面看见的效果就是一个循环结点后的结果:


到此为止, index.wxml 的内容咱们就都了解完了。 但是纯粹的只有这些还无法形成完备的 UI 界面。 还须要最后一个东西, 那就是 wxss,也就是样式表。 那么稳步来看几个例子:


.container {


height: 100%;


display: flex;


flex-direction: column;


box-sizing: border-box;


background-image: url(images/bg.jpg);


background-size: 100%;


padding: 20rpx;


}


这个就是最外层 container 的样式,它除了可以采用传统的 css 样式, 还可以采用微信特有的一些样式, 比如说 display: flex 和 flex-direction: column。 还要特别注意我们这里使用了一个代莱单位 rpx。 这个也就是微信自建的特性 - responsive pixel。 它相等于一个自适应尺寸,所有的屏幕宽度都就是 750rpx, 我们只须要回忆起这个特性即可, 其他的微信小程序可以根据具体内容的手机尺寸自行排序相对尺寸。


这里我就扔两个关键的特点和大家了解一下。 这个小程序完备的样式表比较繁杂。而且都就是相近的内容, 就不跟大家过多传授。 如果大家须要介绍完备的内容, 还是可以至咱们的 Github 主页上面浏览完备的项目https://github.com/swiftcafex/wechat-weather


结尾


到此为止,用了三篇文章跟大家了解了一个小程序从构筑至研发的完备过过程。 这个天气小程序逻辑并不繁杂,但通过它大家必须可以对整个研发的过程存有一个亲身的介绍。

TAG标签:
阅读推荐