微信小程序开发笔记②——页面生命周期函数和基础组件

微信小程序页面的生命周期

下面是每个页面都存在的生命周期函数，在特定的时期就会进行回调，我们可以在函数中写上自己的逻辑代码实现我们想要的功能。

如果我们新创建了一个页面，在js文件中我们可以看见所有的生命周期函数

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 第一次完整打开小程序页面时
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 全部加载和显示完成，可以提供给用户进行操作的状态
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 每次从未激活状态变成激活状态时执行
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 每次从激活状态变成激活状态时执行
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 正常关闭时的执行状态
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 下拉时执行
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 上拉时执行
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    // 右上角三个点的分享转发的设置
  }
})

小程序基础组件

icon标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

下面是常见的几种按钮

<icon type="success">icon>
<icon type="info">icon>
<icon type="warn">icon>
<icon type="cancel">icon>

通过size设置大小

<icon type="success" size='40'>icon>

text标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/text.html

这个组件的简单来说就是用来显示文本的

<text>hello world!text>

button标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

这个标签是用来渲染出按钮的

<button>按钮button>

下面是常见的几种按钮样式

<button type="default">默认按钮button>
<button type="primary">主要按钮button>
<button type="warn">警告按钮button>
<button size='mini'>小按钮button>
<button type="primary" plain>镂空按钮button>
<button type="default" loading>加载按钮button>

input标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

这个标签提供用户输入的本文框

<input placeholder='请输入'>input>
<input value='请输入'>input>
<input password>input>

scroll-view标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

下面实现了横向拖动，通过scroll-view标签的scroll-x属性

<view>
  <scroll-view scroll-x class='manu'>
    <view class='scroll-nav'>
      <navigator url=''>社会新闻navigator>
      <navigator url=''>娱乐新闻navigator>
      <navigator url=''>国际新闻navigator>
      <navigator url=''>国内新闻navigator>
      <navigator url=''>推荐新闻navigator>
      <navigator url=''>法制新闻navigator>
    view>
  scroll-view>
view>

.manu{
  background-color: lightcyan;
}

.scroll-nav{
  display: flex;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  /* 强制不换行*/
  white-space: nowrap;
}

.scroll-nav navigator{
  margin: 0 10rpx;
  font-weight: bold;
}

下面是垂直滚动，通过scroll-y属性实现

<!-- 垂直拖动 -->
<scroll-view class='scroll-height' scroll-y>
  <view>
    <image src='/images/LD.jpg'></image>
    <view>LD</view>
  </view>
  <view>
    <image src='/images/LH.jpg'></image>
    <view>LH</view>
  </view>
  <view>
    <image src='/images/LS.jpg'></image>
    <view>LS</view>
  </view>
  <view>
    <image src='/images/SD.jpg'></image>
    <view>SD</view>
  </view>
  <view>
    <image src='/images/YR.jpg'></image>
    <view>YR</view>
  </view>
</scroll-view>

.scroll-height{
  height: 530rpx;
}

view标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/view.html

这个标签提供了一种类似于h5中span标签那种块的显示区域

<view>
hello world!
view>
<view>
zdd
view>

swiper标签

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html

具有弹性的滑块，此标签还需要配合swiper-item一起使用

<view>
  <swiper class='sw'>
    <swiper-item>
      <image src='/images/LD.jpg'>image>
    swiper-item>
    <swiper-item>
      <image src='/images/LH.jpg'>image>
    swiper-item>
    <swiper-item>
      <image src='/images/LS.jpg'>image>
    swiper-item>
  swiper>
view>

.sw image{
  width: 100%;
}
.sw{
  height: 500rpx;
}

下面加上了轮播的效果，就不需要上面我们手动的拖拽，还加上了显示图序的点

<view>
  <swiper class='sw' autoplay interval='3000' indicator-dots indicator-active-color='white' indicator-color='red' duration='500' current='1'>
    <swiper-item>
      <image src='/images/LD.jpg'>image>
    swiper-item>
    <swiper-item>
      <image src='/images/LH.jpg'>image>
    swiper-item>
    <swiper-item>
      <image src='/images/LS.jpg'>image>
    swiper-item>
  swiper>
view>

• autoplay实现了自动的轮播
• interval设置了轮播的时间，单位是ms
• indicator-dots设置了点的出现与否
• indicator-color设置了未被选中的图片的点的颜色
• indicator-active-color设置了当前图片点的颜色
• duration设置了图片间轮播的时间间隔，单位为ms
• current设置了默认显示的图片
• current-item-id可以配置swiper-item标签中的item-id使用，功能同current

• vertical可以设置为纵向滑动

下面的属性可以设置前后边距

previous-margin='20' next-margin='20'

下面的属性可以设置多个swiper-item同时显示

display-multiple-items='2'