Demo:简单中国天气网首页

Page({
data:{
name:"CynicalGary",
temp:"4",
low:"-1°C",
high:"10°C",
type:"晴",
city:"泉州",
week:"星期五",
weather:"无持续风行 微风级"
}
})

index.js

<view class='content'>
<view class='today'>
<view class='info'>
<view class='name'>{{name}}</view>
<view class='temp'>{{temp}}°C</view>
<view class='lowhigh'>{{low}}/{{height}}</view>
<view class='type'>{{type}}</view>
<view class='city'>{{city}}</view>
<view class='week'>{{week}}</view>
<view class='weather'>{{weather}}</view>
</view>
</view>
</view>

index.wxml

.content{
font-family: 微软雅黑,宋体;
font-size: 14px;
background-size: cover;
height: 100%;
width: 100%;
color:#333;
} .today{
padding: 70rpx;
height: 50%;
} .name{
font-size: 20px;
text-align: center;
color: grey;
} .temp{
font-size: 80px;
text-align: center;
} .lowhigh{
font-size: 12px;
text-align: center;
margin-top: 30rpx;
} .type{
font-size: 16px;
text-align: center;
margin-top: 30rpx;
} .city{
font-size: 20px;
text-align: center;
margin-top: 20rpx;
margin-right: 10rpx;
} .week{
font-size: 12px;
text-align: center;
margin-top: 30rpx;
} .weather{
font-size: 12px;
text-align: center;
margin-top: 20rpx;
}

index.wxss

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "中国天气网",
"navigationBarTextStyle":"black"
}
}

app.json

微信小程序_(案例)简单中国天气网首页的更多相关文章

  1. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  2. 微信小程序_(map)简单的小地图

    map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...

  3. 微信小程序_(视图)简单的scroll-view容器

    scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...

  4. 微信小程序 wxs的简单应用

    Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...

  5. 微信小程序_(校园视)开发用户注册登陆

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  6. 微信小程序项目实战之豆瓣天气

    概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...

  7. 微信小程序_(校园视)开发视频的展示页_下

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  8. 微信小程序_(校园视)开发上传视频业务

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  9. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

随机推荐

  1. 【js】面向对象学习资料

    1.面向对象模式: https://m.jb51.net/article/74549.htm 2.面向对象基础篇 http://www.cnblogs.com/chiangchou/p/js-oop1 ...

  2. Laravel 实现多级控制器(实现Api区分版本)

    路由: Route::get('', 'v1\\UserController@index'); 文件夹分层 User控制器命名空间: namespace App\Http\Controllers\v1 ...

  3. canva绘制圆角矩形

    在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...

  4. 1 sql server中添加链接服务器

    1  链接到另一个sql server 的实例 exec sp_addlinkedserver @server= '服务器的地址',@srvproduct='SQL Server' go 分布式查询中 ...

  5. 去重复的sql(Oracle)

    1.利用group by 去重复 2.可以利用下面的sql去重复,如下 1) select id,name,sex from (select a.*,row_number() over(partiti ...

  6. Java高并发程序设计学习笔记(十一):Jetty分析

    转自:https://blog.csdn.net/dataiyangu/article/details/87894253 new Server()初始化线程池QueuedThreadPoolexecu ...

  7. SokcetClient VC++6.0

    // SokcetClient.cpp: implementation of the SokcetClient class. // ////////////////////////////////// ...

  8. 由于MTU设置不当导致的访问超时

    现象 工作中遇到一件怪事:搭建好服务器后(VPN服务器,创建了虚拟网卡),服务器和客户端之间响应正常且很稳定,客户端也能正常通过服务器访问外网.但是访问个别网站时可以打开文字,但是部分图片打不开(也不 ...

  9. 第八章· Redis API 开发

    Redis 开发 1.源码安装Python环境 Python官网:https://www.python.org/ #下载Python3.6.4安装包 [root@db03 ~]# wget https ...

  10. Winfrom TextBox 添加水印文字 + 字体颜色

    using System.Drawing; using System.Windows.Forms; namespace KK.WaterMark.Control { public partial cl ...