龙衣

专注于写代码并享受当下生活。

微信小程序~第一个页面

这是我们的第一个页面

不是 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中给一个标签定义了一个类名为containercss样式,定义完这个类名后,那么{}里面的属性就会作用在这个标签上。

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",
  ],
}
阅读更多

扫码向博主提问

去开通我的Chat快问

itxiaodong

买的到的知识都是不值钱的
  • 擅长领域:
  • Android
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ITxiaodong/article/details/80113121
个人分类: 小程序
所属专栏: 小程序之旅
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭