微信小程序 - 技术栈

页面跳转： navigator

显示跳转
- 跳转普通页面
- 跳转 tab栏页面 open-type="switchTab"
- 回退上一个 open-type="navigateBack"

xml 复制代码

<navigator url="/pages/detail/detail?username='cc'&address='chengdu'">detail</navigator>

js跳转
- 跳转普通页面 wx.navigateTo()
- tab栏页面 wx.switchTab()
- 回退 wx.navigateBack()

接收页面跳转参数：

常用组件

文档： https://developers.weixin.qq.com/miniprogram/dev/component/

view
- hover-class ：点击后的样式
- hover-stop-propagation ：阻止冒泡
text
navigator
scroll-view
swiper
swiper-item
button
image
rich-text ：富文本

常用指令

wx:if
hidden : 是否隐藏

数据驱动

小程序数据默认不是双向绑定的，，数据驱动使用 this.setData() , 当页面input修改之后，不会响应input内容的变化

小程序数据双向绑定：
使用 bindinput 监听input数据改变，改变之后this.setData() 实现数据更新

xml 复制代码

<input type="text" value="{{count}}" style="border: 1px solid red;" bindinput="handleInput"/>
{{ count }}

js 复制代码

 handleInput(event){
    console.log(event)
    let val = parseInt(event.detail.value)
    this.setData({
      count:val
    })
  },

函数怎么传值
小程序写() 表示函数传值，，他会将双引号中的所有内容，当作执行函数的名字，，不会去解析括号，，，小程序传值需要先绑定 data-xxx 属性值，，使用event.currentTarget.dataset.xxx 获取传入的值

xml 复制代码

<button bindtap="addCount" data-step="5">+step</button>

js 复制代码

  addCount(event){
    let step = parseInt(event.currentTarget.dataset.step)
    this.setData({
      count:this.data.count+step
    })
  },

下拉刷新和上拉加载

下拉刷新加载数据，，每次到底，都会进行一次分页请求，，，分页的currentPage +1 ，，，但是，如果不做控制，，currentPage 一直+1，，后面的分页请求获取的数据为 [] 。。。没有意义，，，

将 list的size 和分页返回total总页数，作比较，，相等，表示数据已经加载完了，就应该显示没有更多的数据

js 复制代码

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listData:[],
    queryParam:{
      currentPage:1,
      pageSize:10
    },
    total:0
  },
  getList(){
    return new Promise((resolve,reject)=>{
      wx.request({
        url: 'http://localhost:8080/getList',
        data:this.data.queryParam,
        success:(res)=>{
          resolve(res.data)
        },
        reject:(err)=>{
          reject(err)
        }
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  async onReady() {
    let res = await this.getList()
    console.log(res);
    this.setData({
      listData:res.records,
      total:res.total
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  async onPullDownRefresh() {
      console.log("pull down")
      this.setData({
        'queryParam':{currentPage:1,pageSize:10}
      })
      let res = await this.getList()
      this.setData({
        listData:res.records,
        total:res.total
      })
      // 停止下拉刷新
      wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  async onReachBottom() {
    console.log(typeof this.data.total)
    if(this.data.listData.length === this.data.total){
      return
    }
    console.log("reach bottom ...");
   
   this.setData({
     "queryParam.currentPage":this.data.queryParam.currentPage+1
   })
  let res =   await this.getList()
  
  this.setData({
    listData:[...this.data.listData,...res.records]
  })

  },


})

下拉刷新需要在 json中开启

下拉刷新完毕之后要 wx.stopPullDownRefresh() ,真机的下拉刷新不会自己消失