一.项目结构
1.创建项目后清空目录,依次创建app.json,app.js,app.wxss。
app.json是整个小程序的配置文件,新建后写入{}
2.新建目录pages(开发页面的目录)和images(存放图片)
3.pages下新建index目录,index目录中新建page(这时会自动创建4个页面相关的文件)
二.开发
1.页面开发 index.wxml 语法类似html
picker是个选择器,mode设置为region时为地区选择器,通过bindchange绑定事件函数
页面中使用{{}}进行数据的动态绑定
<view class="container">
<!-- mode=region 表示区域选择器 -->
<picker mode="region" bindchange="changeRegion">
<view>{{region}}</view>
</picker>
<text>{{data.tem}}℃ {{data.wea}} {{data.week}}</text>
<image src="/images/{{data.wea_img}}.png"></image>
<text class="air_tips">
空气质量:{{data.air_level}}。{{data.air_tips}}
</text>
<view class="detail">
<view class="row">
<view>最低温度</view>
<view>最高温度</view>
<view>能见度</view>
</view>
<view class="row">
<view>{{data.tem2}}℃</view>
<view>{{data.tem1}}℃</view>
<view>{{data.visibility}}</view>
</view>
<view class="row">
<view>风向</view>
<view>风力</view>
<view>湿度</view>
</view>
<view class="row">
<view>{{data.win}}</view>
<view>{{data.win_speed}}</view>
<view>{{data.humidity}}</view>
</view>
</view>
</view>
2.样式开发 index.wxss
采用了flex布局
/* pages/index/index.wxss */
.container{
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: space-around;
}
.detail{
width: 100vw;
}
.row{
display: flex;
}
.row view{
width: 33.3%;
text-align: center;
margin: 20rpx 0;
}
text{
color: #3883FA;
font-size: 50rpx;
}
.air_tips{
font-size: 40rpx;
margin: 0 30rpx;
}
image{
width: 200rpx;
height: 200rpx;
}
3. js逻辑 index.js
api接口的调用使用wx.request({}),用法类似ajax,访问的api域名必须在自己的微信公众平台进行配置,且必须是https接口
使用this.setData({})来修改数据
/* 定义页面中的初始数据 */
data: {
region: ["北京市", "北京市", "朝阳区"],
city: "北京", // 用来记录api查询时的城市名
data: {
wea_img: "xue", // 给个默认的image,不然先加载页面的时候会报错
}
},
// picker选择器监听事件 bindchange="changeRegion"
changeRegion:function(e){
this.setData({
region: e.detail.value,
// 因为api接口不用带市,所以对字符串进行切片,舍弃最后一个字
city: e.detail.value[1].slice(0,-1),
});
this.getWeather();
},
// 自定义的天气查询函数,查询后更新数据
getWeather:function(){
var that=this; // wx.request方法中无法使用this关键字
// 请求api,类似ajax,url中的域名必须是https,并配置过
wx.request({
url: 'https://tianqiapi.com/api',
data: {
version: 'v6',
appid: '67317642',
appsecret: '8cBVtkI9',
city: that.data.city
},
success: function(resp){
console.log(resp.data);
that.setData({
data: resp.data
});
}
})
},
/* 生命周期函数--监听页面加载 */
onLoad: function (options) {
this.getWeather();
},
4.设置顶部导航 app.json
{
"pages": [
"pages/index/index"
],
// 顶部窗口设置
"window": {
"navigationBarBackgroundColor": "#3883FA",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "今日天气",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"sitemapLocation": "sitemap.json"
}
5.页面展示
三.flex布局
1.简介
Flex是Flexible Box的缩写,意为”弹性布局”
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:主轴(main axis)和交叉轴(cross axis)
使用flex布局时,需要先设置容器的display属性为flex
2.容器常用属性及参数
- flex-direction
设置主轴的方向:row(默认),column - justify-content
项目在主轴上的对齐方式:
center:居中
space-around:两端留有空隙,项目之间的间隔都相等。
space-between:两端对齐,项目之间的间隔都相等。 - align-items
项目在交叉轴上的对齐方式:center(居中) - flex-wrap
一条轴线排不下时,如何换行
nowrap(默认):不换行
wrap:换行,第一行在上方 - align-content
定义了多根轴线的对齐方式
space-around:每根轴线两侧的间隔都相等。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
center:与交叉轴的中点对齐
参考:https://www.runoob.com/w3cnote/flex-grammar.html
参考:https://www.bilibili.com/video/av58012612