千锋小程序笔记

小程序基础

全局配置pages

文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#pages
只要在文件夹里右键新建page，就会出现js、json、wxml、wxss文件，同时会在app.json里给配置好

也可以直接在app.json的pages里写，就能自动生成。也可以调整顺序

全局配置windows

文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

全局配置tabbar

文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

页面配置

可以在每个页面的json文件里，配置一些内容

数据绑定

列表渲染

• 组件上用 wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
• 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
• 使用 wx:for-item 可以指定数组当前元素的变量名。
• 使用 wx:for-index 可以指定数组当前下标的变量名。
• wx:key 可以来指定列表中项目的唯一的标识符。

条件渲染

• 使用 wx:if 可以来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。
• wx:hidden true的时候隐藏，false的时候显示

事件绑定

在组件中绑定一个事件处理函数，如handleTap
bindTap和catchTap的区别：
catch会阻止事件向上冒泡
capture方法在捕获阶段触发

todolist的小案例(简易留言板)

1. 新建一个input输入框和button按钮。先获取input里的值。
   在evt.detail.value里就能获取到输入框里的值，这个值只是临时打印在控制台上的，所以可以用this.Data把获取的value值给mytext。只要输入值改变的话，mytext状态就可以同时改变。
   
   2.给点击按钮button设置一个tap事件，一点击按钮，就能拿到输入框的值。在js点击按钮的
   
   3.设置一个数组，是列表的原始数据，用wx:for在页面渲染出来，在handAdd()里，用setData再将datalist新加一条数组。
   
   4.添加list后清空输入框。只要将在每次添加完之后，把mytext清空就可以了。
   
   
   4.删除
   
   

高亮切换

如果给渲染的数据加上<text><text>标签的话，用evt.currentTarget。
evt.targer ：事件源
evt.currentTarget ：绑定事件的元素

WXSS

WXS(模糊查询案例)

新建一个wxs文件。wxs能够把一些需要逻辑计算的东西放到里面来做，转换完了之后，再给到页面中。

数据请求

要在小程序开发管理的开发设置里设置合法域名。

组件-image

图片组件由mode属性来设置图片是否要裁剪、只显示哪一部分等等。看文档。
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

组件-swiper

swiper是小程序的一个轮播图组件

组件-scroll-view

可视区域滚动，scroll-x横向滚动，scroll-y纵向滚动

组件-checkbox

做一个简单的复选框功能，根据勾选来计算价格

思路：
1.用wx:for把数据放到页面上来
2.给复选框绑定一个点击事件，点击的时候获取到数组的下标值，根据下标值来做一个数组里面ischeck的取反，用setData调用，来让金额计算的checkList数组重新渲染。
3.在wxs里处理checkList。做累加计算。定义初始的总额为0，遍历每条数据，如果这条数据的ischeck为true（就是复选框被点击），总额就等于价格*数量，进行累加。

自定义组件

引用自定义组件

有个tab栏切换的子组件

在想要引入子组件的父组件里通过json文件引入

再在wxml文件里渲染到页面上来

父传子

实现的效果，划动swiper组件的内容，上方的导航栏跟着切换，点击上方导航栏，下面swiper内容也跟着切换

首先要给swiper组件设置bindchange属性，就可以在滑动的时候，获取到相对的索引值，把索引值传给子组件，让导航栏知道索引，跟着改变

子传父

完整代码：子组件navbar

<view class="box">
  <!-- 1.这是第一个初始的使用子组件的页面 wx:for="{
   {list}}" 把之前的dataList改为list，就默认显示["正在热映","即将上映"] -->
  <view wx:for="{
   {list}}" wx:key="index" class="item {
   {current===index?'active':''}}" bindtap="handTap" data-myid="{
   {index}}" >
    <text>{
   {
   item}}</text> 
  </view>
</view>

// components/navbar.js
//注册一个组件 
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    // 1. 子组件在这里接收父组件传过来的list,type：验证传过来的类型。value：如果没传过来，就默认显示的内容
    list:{
   
      type:Array,
      value:["正在热映","即将上映"],
    },
    // 3. 子组件在这里接收父组件传过来的current
    current:{
   
      type:Number, //类型
      value:0 //如果没有传过来的话，显示的值
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
   
    // 1.就不用这个dataList了 ,用上面的list
    // dataList:["正在热映","即将上映"],
    // current:0
  },
  /**
   * 组件的方法列表
   */
  methods: {
   
    handTap(evt){
   
      // console.log(evt.currentTarget.dataset.myid);
      // this.setData({
   
      //   current:evt.currentTarget.dataset.myid
      // })
      //4.一点击,就触发这个事件,传这个索引值
      this.triggerEvent("ParentEvent",evt.currentTarget.dataset.myid)
    },
  }
})

完整代码：父组件home

<!--pages/home/home.wxml-->
<!-- 1.父传：属性传值 list="{
   {cateItem}}" 传一个属性list的数组给子组件-->
<!-- 3.current="{
   {current}}" 把这个值传给navbar -->
<!-- 4.bindParentEvent="handleEvent" 回调函数 定义在父组件上的-->
<navbar list="{
   {cateItem}}" current="{
   {current}}" bindParentEvent="handleEvent"></navbar>
<!-- 3.bindchange方法能在划动的时候获取到索引值，知道自己是第几个 -->
<!-- 4.current="{
   {current}}"这个的current是swiper的一个属性,当前滑块所在的index -->
<swiper bindchange="handleChange" class="box" current="{
   {current}}">
<!-- 2.渲染在页面上 -->
  <swiper-item wx:for="{
   {cateList}}" wx:key="index">
   {
   {
   item}}
  </swiper-item>
</swiper>

Page({
   
  /**
   * 页面的初始数据
   */
  data: {
   
    // 1.cateItem 设置一下内容
    cateItem:['衣服','裤子','帽子'],
    // 2. 写cateItem对应的swiper分类
    cateList:['衣服的相关数据','裤子的相关数据','帽子的相关数据'],
    //3.把临时的值包装成一个状态,默认在第0项
    current:0
  },
  handleChange(evt){
   
    //3.得到swiper划动的索引值
    console.log(evt.detail.current);
    //3. 用this.setData访问到
    this.setData({
   
      current:evt.detail.current
    })
  },
  // 4. 通过evt.detail就拿到了子传父的值
  handleEvent(evt){
   
    console.log("父组件定义，执行",evt.detail);
    this.setData({
   
      current:evt.detail
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
   },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
   },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
   },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
   },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
   },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
   }
})

{
   
  "usingComponents": {
   
    "navbar":"../../components/navbar/navbar"
  },
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true
}

插槽

先在slot.json文件里引入组件top-header

{
   
  "usingComponents": {
   
    "top-header":"../../components/topheader/topheader"
  }
}

因为要用多插槽的话，就要在要使用多插槽的组件的js文件里写上

   options:{
   
    //在组件定义时的选项中启用多slot支持
    multipleSlots:true
  },

top-header组件的wxml文件：

<view class="box">
  <slot name="left"></slot>
  <text>topheader</text>
  <slot name="right"></slot>
</view>

要使用top-header组件的slot.wxml文件：

<top-header>
<button slot="left" >返回</button>
<button slot="right">首页</button>
</top-header>

效果：

插槽：是把父组件的东西混入到子组件内部去，这样来父组件和子组件的东西就能融合在一起，为了复用。除了复用，可以用插槽来避免通信，做一些效果。比如说点击top-header组件的返回，让footer组件显示和隐藏，这是两个组件。

新建一个footer组件，引入footer组件。

在slot.wxml设置点击事件


这样子就能在两个组件之间，避免通信就可以实现效果。

组件生命周期

倒计时组件，倒计时结束，组件删除。
思路：在倒计时组件js的data里定义好初始值count==10，在lifetimes字段里声明组件的生命周期。在组件实例进入页面节点树时执行倒计时，当初始值count为0的时候，使用使用 triggerEvent 方法来通知父组件移除自己。父组件中，先是用wx:if 方法来定义isCreated为true，显示组件。再用bind来父子通信，来定义isCreated为false，移除组件。最后在子组件的detached销毁定时器。

 lifetimes:{
   
    attached: function() {
   
      // 在组件实例进入页面节点树时执行
      this.intervalId = setInterval(() => {