微信小程序-利用必应首图接口实现引导页

不是 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",
  ],
}