微信小程序

页面跳转： navigator

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

<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() 实现数据更新

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

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

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

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

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

下拉刷新和上拉加载

下拉刷新加载数据，，每次到底，都会进行一次分页请求，，，分页的currentPage +1 ，，，但是，如果不做控制，，currentPage 一直+1，，后面的分页请求获取的数据为 [] 。。。没有意义，，，
将 list的size 和分页返回total总页数，作比较，，相等，表示数据已经加载完了，就应该显示没有更多的数据

// 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]})},})