微信小程序_(案例)简单中国天气网首页
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
微信小程序_(案例)简单中国天气网首页的更多相关文章
- 微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...
- 微信小程序_(map)简单的小地图
map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...
- 微信小程序_(视图)简单的scroll-view容器
scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...
- 微信小程序 wxs的简单应用
Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序项目实战之豆瓣天气
概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
- 微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
随机推荐
- 【js】面向对象学习资料
1.面向对象模式: https://m.jb51.net/article/74549.htm 2.面向对象基础篇 http://www.cnblogs.com/chiangchou/p/js-oop1 ...
- Laravel 实现多级控制器(实现Api区分版本)
路由: Route::get('', 'v1\\UserController@index'); 文件夹分层 User控制器命名空间: namespace App\Http\Controllers\v1 ...
- canva绘制圆角矩形
在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...
- 1 sql server中添加链接服务器
1 链接到另一个sql server 的实例 exec sp_addlinkedserver @server= '服务器的地址',@srvproduct='SQL Server' go 分布式查询中 ...
- 去重复的sql(Oracle)
1.利用group by 去重复 2.可以利用下面的sql去重复,如下 1) select id,name,sex from (select a.*,row_number() over(partiti ...
- Java高并发程序设计学习笔记(十一):Jetty分析
转自:https://blog.csdn.net/dataiyangu/article/details/87894253 new Server()初始化线程池QueuedThreadPoolexecu ...
- SokcetClient VC++6.0
// SokcetClient.cpp: implementation of the SokcetClient class. // ////////////////////////////////// ...
- 由于MTU设置不当导致的访问超时
现象 工作中遇到一件怪事:搭建好服务器后(VPN服务器,创建了虚拟网卡),服务器和客户端之间响应正常且很稳定,客户端也能正常通过服务器访问外网.但是访问个别网站时可以打开文字,但是部分图片打不开(也不 ...
- 第八章· Redis API 开发
Redis 开发 1.源码安装Python环境 Python官网:https://www.python.org/ #下载Python3.6.4安装包 [root@db03 ~]# wget https ...
- Winfrom TextBox 添加水印文字 + 字体颜色
using System.Drawing; using System.Windows.Forms; namespace KK.WaterMark.Control { public partial cl ...