不是 Hello World 的第一个页面
- 一张全屏的背景图,一个带有圆角的可点击按钮。
这个首页不算简单(相对于显示一个 Hello World),但是也不算难,毕竟也就使用到了两个组件元素。
分析如何实现
- 如何实现全屏背景图?
- 如何实现底部居中的按钮在图片的上方?
- 如何实现带有圆角边框的按钮?
实现
创建一个目录
welcome
,在其下方创建welcome.js,welcome.json,welcome.wxml,welcome.wxss
,这四个文件名要一致(这是规定),不了解的可以查看上篇博文 微信小程序~文件结构分析
- welcome.wxml 文件如下:
<view class='container'>
<image class='containert-img' src='{{imageUrl}}' mode='aspectFill'></image>
<view class='journey-container' bindtap='onBindTap'>
<text class='journey'>打开你的干货</text>
</view>
</view>
使用到了
View、image、text
组件。官方文档,<image class='containert-img' src='{{imageUrl}}' mode='aspectFill'></image>
,class='containert-img'
是用于在welcome.wxss
文件中设置样式的一个标志。src='{{imageUrl}}'
是设置图片的链接,这里是通过数据绑定的方式绑定数据,也可以使用使用应用中的图片路径代替,例如:src='/images/welcome.jpg'
表示使用的是与pages
文件夹同级别的image
文件夹下的welcome.png
图片做背景。
- welcome.wxss文件如下:
// 页面整体的样式
.container{
display: flex;
flex-direction:column;
align-items: center;
}
// 图片的样式
.containert-img{
width: 100%;
height: 100%;
position: absolute;
}
// 开启干货按钮整体的样式
.journey-container{
margin-bottom: 20rpx;
border: 1px solid #fff;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align:center;
bottom: 0;
position: absolute;
}
// 开启干货文字的样式
.journey{
font-size: 24rpx;
font-weight: bold;
line-height: 80rpx;
color: #fff;
}
由于我是做 Android 开发的,对于前端的基础也有过浅浅的了解,所以下面就只解释代码块中不容易理解的 CSS 样式,具体的 CSS 样式可以私下去学习,这里推荐 去 w3cschool 官网学习 CSS
.container{
display: flex;
flex-direction:column;
align-items: center;
}
以上代码块
.container
表示在xml
中给一个标签定义了一个类名为container
的css
样式,定义完这个类名后,那么{}
里面的属性就会作用在这个标签上。
display:flex;
是将对象作为弹性伸缩盒显示。
flex-direction: column;
设置组件为纵向摆放,值改为row
则设置组件横向摆放
align-items:center;
居中对齐弹性盒的各项组件
position: absolute;
元素定位,absolute 表示绝对定位,组件设置了该属性后,该组件将保持在其他元素的上面或者后面;relative 表示相对定位,组件设置了该属性后,可通过 top:10rpx
等属性控制该组件将对于正常位置的相对位置;
border: 1px solid #fff;
表示 1 个像素的实体白色边框。
- welcome.json 中只需要填写
{}
- welcome.js 文件内容如下:
该文件主要是处理逻辑关系,这里处理了按钮的点击事件,必应首图的加载。
Page({
/**
* 页面的初始数据
*/
data: {
imageUrl:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var url = "http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1";
this.getBiYingPhoto(url);
},
/**
* 获取必应首图
*/
getBiYingPhoto:function(url){
var that = this ;
wx.request({
url: url,
method:'GET',
header:{
"Content-Type": "json"
},
success:function(res){
that.processBiYingPhoto(res.data.images[0].url);
},
fail:function(error){
console.log('错误信息是:'+error);
}
})
},
/**
* 处理必应的图片
**/
processBiYingPhoto: function (photoImageUrl) {
var imageurl = 'http://www.bing.com' + photoImageUrl;
console.log(imageurl);
this.setData({
imageUrl:imageurl
});
},
/**
* 点击开启干货
*/
onBindTap:function(){
wx.switchTab({
url: '../reading/reading',
})
},
})
点击事件
在welcome.wxml
文件中给view
组件设置bindtap='onBindTap'
,之后就可以在welcome.js
文件中进行点击事件的操作。如下代码就是点击【打开你的干货】按钮后跳转页面的操作。
/**
* 点击开启干货
*/
onBindTap:function(){
wx.switchTab({
url: '../reading/reading',
})
},
跳转页面用到了wx.switchTab
这个API
,跳转页面有几个API
可以使用,这里是跳转到有底部Tab
的页面,因此使用的是wx.switchTab
这个API
, 参数url
是跳转的页面路径。具体的页面跳转可以查看 官方文档—API—导航
网络加载
必应首图使用的是网络接口返回的图片数据,所以会用到网络加载API
wx.request({
url: url,
method:'GET',
header:{
"Content-Type": "json"
},
success:function(res){
// 处理返回的图片数据
that.processBiYingPhoto(res.data.images[0].url);
},
fail:function(error){
console.log('错误信息是:'+error);
}
})
wx.request
是小程序请求网络API
,参数url
是要请求的接口地址,具体的小程序请求网络可以查看 官方文档—API—网络
生命周期
一般我们在onLoad: function (options)
生命周期中处理数据,小程序的生命周期具体可以查看 官方文档—框架—注册页面
最后别忘了在app.json
中填写上我们页面的路径,如下:
{
"pages":[
// 加上这句哦
"pages/welcome/welcome",
],
}