小程序0基础到精通二

一、todolist案例

1.wxml部分

<view>
  <input placeholder="请添加计划" value="{{temp}}"
  bindinput="inputHd" bindconfirm="addList"/>
</view>
<view class="item" wx:for="{{list}}" wx:key="title">
  <switch checked="{{item.done}}" type="checkbox"/>
  <text>{{item.title}}</text>
  <button size="mini" 
  data-index="{{index}}" 
  bindtap="removeList">x</button>
</view>

2.wxss部分：

.item{
  display: flex;
  align-items: center;
}

3.js部分

// pages/todo/todo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    temp:"",
    list:[
      {title:'学习react',done:true},
      {title:'学习小程序',done:false}
    ]
  },
  addList(){
    //获取之前的list
    var list=this.data.list
    //添加新的内容
    list.unshift({title:this.data.temp,done:false})
    //更新list 清空temp
    this.setData({list,temp:''})
    wx.setStorageSync('list', this.data.list)
  },
  removeList(e){
     //获取之前的list
    var list=this.data.list
    //获取传入的参数index
    var index=e.target.dataset.index
    //删除一个
    list.splice(index,1)
    //更新list
    this.setData({list})
    wx.setStorageSync('list', this.data.list)

  },
  inputHd(e){
    this.setData({temp:e.detail.value})
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var list=wx.getStorageSync('list')||[]
    this.setData({list})
  }
})

二、Api

1.网络请求 wx.request()：

wx.request({
url,
method,
header,
success,
fail,
complete
})

2.页面类：

2.1提示

wx.showToast({title,icon})

2.2确认框

wx.showToast({title,icon})

2.3显示加载框

wx.showLoading()

3.数据缓存：

3.1取出数据

wx.getStorageSync(key)

3.2存入数据

wx.seetStoreageSync(key,value)

4.路由：

4.1普通跳转

wx.navigateTo({url})

4.2重定向

wx.redirectTo({url})

4.3底部栏跳转

wx.switchTab({})

4.4返回

wx.navigateBack()

4.5重启

wx.reLaunch({url})

5.滚动页面

wx.pageScrollTo({duration,scrollTop})

三、笑话案例

1.思路+大概讲述

data存放
list 存储笑话列表
page 存储当前是第几页
methods方法
触底更新
下拉刷新
获取笑话（getJoks）

2.wxml部分

<view class="title" style="text-align: center;">
 笑话（页面跳转js）
</view>
<view wx:for="{{list}}" class="item" wx:key="index">
  {{item.summary}}
</view>
<view class="top" wx:if="{{isShow}}" bindtap="goTop">
  Top
</view>

3.js部分

// pages/jok/jok.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    page:1,//第几页
    list:[],// 笑话数据列表
    isShow:false,// 是否显示
  },
  getJoks(type=1){
    // 用that变量缓存this 指当前对象
    var that = this
    wx.request({
      url: 'http://dida100.com/mi/list.php?page='+that.data.page,
      method:'GET',
      success(res){
        var list = that.data.list
        if(type==1){ //触底刷新  新的数据被加载文到后面
          list = list.concat(res.data.result)
        }else{
           // 加载提示
           wx.showToast({
            title: '老马'+res.data.result.length+'条笑话',
          })
          list =res.data.result.concat(list)
        }
        that.setData({list,page:that.data.page+1})
      },
      complete(){
        // 停止下拉刷新
        wx.stopPullDownRefresh()
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var list = wx.getStorageSync('list')||[];
    var page = wx.getStorageSync('page')||1;
    // 获取page和list数据并更新
    this.setData({list,page})
    this.getJoks();
    this.watch("page",(nval,value)=>{
      console.log("数据page从",value,"变化为",nval);
    })
    this.watch("list",(nval,value)=>{
      console.log("数据list从",value,"变化为",nval);
      // 存储page和list数据
      wx.setStorageSync('list',nval)
      wx.setStorageSync('page',this.data.page)
    })
  },
  // list发生变化时候存储list到本地，同时存储page
  // 页面挂载后从本地存储获取list与page
  // 实现监听list的变化，page的变化 存储
  // Object.defineProperty set与get监听
  watch(key,handler){
    var self = this;// 存储本地的this
    var value = self.data[key];// 获取到key对应的值
    var data = self.data;// 获取需要被监听的数据
    // 监听data的变化 执行handler
    // 在Object.defineProperty对data的key属性进行配置，获取key属性 data[key] 会执行get方法
    // 如果设置key属性 data[key]===xxx 触发 set方法 nval就是复制 xxx
    Object.defineProperty(data,key,{
      get(){return value},
      set(nval){
        if(nval===value){return}
        // key的值就是发生变化时候 执行handler
        // self及时handler被执行时候指定的this
        // nval key对应的是最新值，oval之前的值
        handler.call(self,nval,value)
        value = nval; // 更新value的值
      }
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.getJoks(2)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getJoks()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  // 滚动监听
  onPageScroll(e){
    console.log(e);
    if(e.scrollTop>600){
      this.setData({isShow:true})
    }else{
      this.setData({isShow:false})
    }
  },
  // 回到顶部
  goTop(){
    // 滚动到底部
    wx.pageScrollTo({
    // 时间1000毫秒
    duration:1000,
    // 位置 0
    scrollTop:0
    })
  }
})

四、生命周期

1.小程序的生命周期

onLaunch启动

onShow前台显示

onHide后台运行

onError错误

onPageNotFound页面找不到

2.页面的生命周期

onLoad(option)加载

onShow显示

onHide隐藏

onReady准备完毕（操作节点）

onUnload卸载子主题 9

3.组件的生命周期

3.1created

组件实例刚被创建好的时候，created 生命周期函数会被触发，此时还不能调用 setData 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

3.2attached

在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发，此时， this.data 已被初始化完毕这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

3.3detached

在组件离开页面节点树后， detached 生命周期函数会被触发，退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数此时适合做一些清理性质的工作

五、页面传参

url=“xxxx?num=15”
onLoad(options){
options.num 获取参数
}

六、全局数据

globalData:{outflow:100}
var app = getApp();
app.globalData.outflow-=1;

七、常用全局方法

onReachBottom触底
onPullDownRefresh下拉
onShareAppMessage(){return {url,title,imageUrl}}分享
onShareTimelime()分享朋友圈
onAddToFavorites()收藏
onPageScroll({scrollTop:xxx}){}页面滚动

八、页面栈

1.卸载与隐藏

正常的从A->B A会隐藏
正常的从 A->B redirect A会卸载
正常A->返回到首页 A页面会卸载
总结： redirect会卸载，navigateBack会卸载
navigate（缓存页面）

2.小程序默认可以缓存5级页面

A->B->C->D->E
五个页面都存起来
A->B->C->A->E
redirect 当前页面会销毁
A->B-redirect->C->D-<E
wx.navigateBack({delta: 2})

九、使用npm

1.进入到项目的目录

cd /项目名称

2.初始化项目

npm init -y

3.安装

npm i @vant/weapp -S --production

4.工具->构建npm

5.在app.json，导入组件

"usingComponents": {
"van-button": "@vant/weapp/button/index"
},

6.页面中使用

<van-button type="primary">按钮</van-button>

十、创建组件Component

1.properties属性

value:{
type:Number,
value:1,//不传参默认值默认值为1
}

2.data数据

count

3.methods方法

changeCount

4.lifetimes生命周期

attached挂载完毕

十一、组件的传参

1.父传子property

父：<step value="10">
子 properties:{value:{type:Number,value:1}}
使用-只读：this.data.value