简单的天气微信小程序。

一、首先,打开微信开发者工具,新建一个项目:weather。如下图:

二、进入app.json中,修改导航栏标题为“贵州天气网”。

三、进入index.wxml,进行当天天气情况的界面布局,包括温度、最低温度和最高温度、天气情况、城市、星期、风向情况。如下图:

四、进入index.js,在data里提供天气数据,让这些数据在界面里显示出来:

五、进入index.wxml,将data里提供的天气数据绑定到页面里:

界面效果如下:

六、进入index.wxss,为index.wxml添加样式,美化界面:

至此,就简单地把数据绑定到页面中,并添加样式后显示出来:

微信小程序框架分析小练手(二)——天气微信小程序制作的更多相关文章

  1. VS2010/MFC编程入门之四(MFC应用程序框架分析)

    VS2010/MFC编程入门之四(MFC应用程序框架分析)-软件开发-鸡啄米 http://www.jizhuomi.com/software/145.html   上一讲鸡啄米讲的是VS2010应用 ...

  2. WEBGL学习笔记(七):实践练手1-飞行类小游戏之游戏控制

    接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...

  3. VS2010-MFC(MFC应用程序框架分析)

    转自:http://www.jizhuomi.com/software/145.html 一.SDK应用程序与MFC应用程序运行过程的对比 程序运行都要有入口函数,在之前的C++教程中都是main函数 ...

  4. Util应用程序框架公共操作类(十二):Lambda表达式公共操作类(三)

    今天在开发一个简单查询时,发现我的Lambda操作类的GetValue方法无法正确获取枚举类型值,以至查询结果错误. 我增加了几个单元测试来捕获错误,代码如下. /// <summary> ...

  5. 微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作

    香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...

  6. 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作

    旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...

  7. 简单API练手:(1)复制自身程序到windows目录和系统目录下;(2)获得系统的相关信息。

    1.复制自身程序到windows目录和系统目录下: #include <windows.h> #include <stdio.h> #include <string.h& ...

  8. 微信小程序框架探究和解析

    何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...

  9. 【WePY小程序框架实战四】-使用async&await异步请求数据

    [WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链 ...

随机推荐

  1. $POJ$2976 $Dropping\ tests$ 01分数规划+贪心

    正解:01分数规划 解题报告: 传送门! 板子题鸭,,, 显然考虑变成$a[i]-mid\cdot b[i]$,显然无脑贪心下得选出最大的$k$个然后判断是否大于0就好(,,,这么弱智真的算贪心嘛$T ...

  2. $[NOIp2017]$ 逛公园 $dp$/记搜

    \(Des\) 给定一个有向图,起点为\(1\),终点为\(n\),求和最短路相差不超过\(k\)的路径数量.有\(0\)边.如果有无数条,则输出\(-1\). \(n\leq 10^5,k\leq ...

  3. SQLServer系统函数之字符串函数

    一.字符串函数 参数character_expression:由字符数据组成的字母数字表达式,可以是常量或变量,也可以是字符列或二进制数据列 参数integer_expression:是正整数,如果 ...

  4. HBase学习笔记(一)——基础入门

    1.what:什么是HBase HBase的原型是Google的BigTable论文,受到了该论文思想的启发,目前作为Hadoop的子项目来开发维护,用于支持结构化的数据存储. HBase是一个高可靠 ...

  5. overflow:hidden的使用

    (1)overflow:hidden可以用来隐藏溢出的文本内容 给定内容的大小(宽高)超出后自动隐藏 <body>     <div class="box"> ...

  6. 小白学 Python 爬虫(34):爬虫框架 Scrapy 入门基础(二)

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  7. JavaSelenium 页面常用基本操作语法

    元素定位                 findElement() 方法返回一个元素, 如果没有找到,会抛出一个异常 NoElementFindException()              fi ...

  8. Java类成员之内部类

    内部类含义: 在Java中允许一个类的定义位于另一个类的内部,前者称为内部类,后者称为外部类. Inner class 一般用在定义它的类或语句块之内,在外部引用它时必须给出完整的名称. Inner ...

  9. C++乱码从入门到放弃

    前几天在一篇文章中看见一段用大括号包裹的C++代码(大概长下面这样) { //一些必要的预处理代码...吧啦吧啦吧啦... int main() { //代码主体...吧啦吧啦吧啦... } } 当时 ...

  10. dp - 逆序数序列

    对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的 数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数 ...