小程序实战（一）

image.png
image.png
image.png

此时我们需要设置图片的大小

<view>
<swiper>
<swiper-item><image src='/images/wx.png' style='width:100%;height:500rpx;'></image></swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
</swiper>
</view>

image.png

效果图：高度并未发生改变，这就需要我们同时设置父级元素的高度，但是有两个父级，究竟要设置哪一个？

经过试验发现只有把宽高设置在swiper上才有效果，swiper-item会继承父元素的高度。

绝对路径：以根目录开始查找文件路径“/”开始
相对路径：以当前目录开始查找文件所在路径回到上一级（../），在当前项目下（../../）回到根目录（../../images/icon/指定的文件名称）

js与页面的声明周期

// pages/posts/posts.js
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

执行顺序onload（），onShow（）,onReady(),

数据绑定：与vue中的数据绑定一个原理，在data中定义数据变量即可{{date}}连接数据

通过接口获取数据:通过this.setData()设置页面数据传递

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let post_content1={
      date:'NOV 18 2019',
      title:'正是虾肥蟹壮时',
      post_img:'/images/post/crab.png',
      content:'你急速hi你是不一样的演说，你是知道哦啊你是哦啊参考价能唠嗑能点开记录组成保税科技都不能我四大V上帝不上课',
      view_num:'99',
      collect_num:'199',
      author_img:'/images/avatar/1.png'
    }
    this.setData(post_content1)
  },

注意图片显示时
<image class='post-image' src="{{post_img}}"></image>
{{post_img}}需要放置在‘’中
条件渲染：wx:if="{{绑定的值}}"
列表渲染：wx:for="{{posts_key}}" wx:for-item="item" wx:for-index='index'与vue数据绑定类似
在js文件中

onLoad: function (options) {
    let post_content = [{
      date: 'NOV 18 2019',
      title: '正是虾肥蟹壮时',
      post_img: '/images/post/crab.png',
      author_img: '/images/avatar/1.png',
      content: '你急速hi你是不一样的演说，你是知道哦啊你是哦啊参考价能唠嗑能点开记录组成保税科技都不能我四大V上帝不上课',
      view_num: '99',
      collect_num: '199',
    }, {
        date: 'NOV 18 2019',
        title: '星期天也要开开心细心啊',
        post_img: '/images/post/crab.png',
        author_img: '/images/avatar/1.png',
        content: '你是斯宾克的女的解放碑大大V欧舒丹红丝读后感搜ID公司读后感审批单花果山皮黄果树信访局牌子的房间股票都分界线PDF',
        view_num: '99',
        collect_num: '199',
      }]
    this.setData({ posts_key: post_content})

posts_key绑定了从接口拿到的数据，post_content
也可以利用ES6的语法 this.setData({ post_content: post_content})简写为this.setData({ post_content})，数据绑定时候直接wx:for="{{post_content}}" wx:for-item="item"即可

小程序的事件机制：捕捉与回调，（发生事件，捕捉事件，回调事件）

   wx.navigateTo({
      url: '../posts/posts',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
    wx.redirectTo({
      url: '../posts/posts',
    })

两种跳转方式的区别：1.navigateTo顶部有返回箭头，redirectTo顶部没有返回箭头
2.与页面的声明周期有关，navigateTo执行了页面周期的onHide事件隐藏页面所以还可以返回，redirectTo执行了页面的onUnload事件，卸载了页面，所以不会有返回，类似vue中的路由跳转与replace，一个会留下痕迹一个不会留下痕迹

小程序的时间机制catch与bind
知识点1：冒泡与非冒泡
冒泡：同时给盒子和文字加点击事件，当你点击文字的时候，盒子的点击事件也会执行，这个时候我们就说发生了冒泡，我们可以在子元素（文字）上的点击事件用catch而非bind绑定点击事件，就可以阻止冒泡。