准备工作

账号注册

微信公众平台

微信开发者工具（稳定版 Stable Build）下载地址与更新日志 | 微信开放文档 (qq.com)

注册小程序账号

访问微信公众平台，点击立即注册

点击注册后，小程序会向你的邮箱发送一封邮件

进行邮箱激活信息登记填写主体信息登记表单

填写完毕后，最终使用自己的微信扫一下下面的二维码

查找小程序ID

小程序ID会在创建小程序时候用到，请谨慎保管

微信开发者工具的安装和使用

访问上文网址，根据自己电脑的配置，选择适合的下载

安装微信开发者工具双击图标运行通过注册的微信进行扫码确认

确认完成后进入开发者工具中

小程序创建

小程序结构

页面布局

小程序组件(标签)
- view 定义块级区域
- text 定义行内区域
样式选择器
- 类选择器
- 标签选择器
- 后代选择器
组成页面的4种文件类型
- .wxml 页面结构和内容 → .html
- .wxss 页面样式 → .css
- .js 逻辑处理 → .js
- .json 配置文件

基本逻辑处理方式

注册页面：Page 函数
数据处理：
- data 选项，初始化页面数据
- this.setData 方法，更新也页面数据
事件处理：
- bind:事件名称 = 事件回调

tag 点击事件

<view>
  <text>
    {{ message }}
  </text>
  <button bind:tap="changeMessage" type="primary" size="mini">点击有好运</button>
</view>

Page({
  data: {
    message: '大家好，我是天才想'
  },
  changeMessage() {
    this.setData({
      message: 'Hello, I am GeniusXiang'
    })
  }
})

小程序配置

页面路径

点击这里查看全局配置文档

app.json 全局配置
- page 页面路径列表谁在第一项谁是首页
- entryPJagePath 启动页面的路径(首页 → 优先级大于page第一项)

点击这里查看页面配置文档

小程序组件
- navigator 跳转页面 (相当于html中的 a 标签)

<view>
  <text>
    {{ message }}
  </text>
  <button bind:tap="changeMessage" type="primary" size="mini">点击有好运</button>
  <navigator url="/pages/logs/logs">点击跳转到日志页</navigator>
  <navigator url="/pages/demo/demo">点击跳转到 demo 页</navigator>
</view>

{
  "pages":[ // 页面路径列表
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "entryPagePath": "pages/index/index", // 启动页面的路径(首页)
}

window(窗口的表现)

配置下拉刷新
- enablePullDownRefresh 是否启用下拉刷新
- backgroundTextStyle 下拉loading状态的样式
配置导航栏
- navigationBarTitleText 导航栏标题
- navigationBarTextStyle 导航栏标题文字颜色
- navigationBarBackgroundColor 导航标题背景颜色
- navigationStyle 自定义导航栏

"window":{
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "navigationBarTextStyle": "black",
  "navigationBarBackgroundColor": "#ccc",
  "navigationBarTitleText": "Weixin",
  "navigationStyle": "custom"
}

<view class="custom-navbar">标题</view>

.custom-navbar {
  height: 44px;
  padding-top: 20px;
  background-color: #f5a11c;
  text-align: center;
  line-height: 44px;
  font-size: 14px;
  color: #fff;
}

小程序配置

点击这里查看tabBar文档

list: 配置tab栏列表(数量至少2个，至多5个)
- text：配置 tab 的文字
- pagePath: 配置 tab的网页路径 (必须定义在 pages 中)
- iconPath & selectedIconPath 配置 tab 对应的图标（不支持网路路径）
color & selectedColor: 配置 tab 文字颜色（16进制颜色）
backgroundColor: 配置 tab 栏的背景颜色（16进制颜色）
borderStyle: 配置 tab 栏边框样式（black/white）

"tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "/static/tabbar/home-default.png",
        "selectedIconPath": "/static/tabbar/home-active.png"
      },
      {
        "text": "日志",
        "pagePath": "pages/logs/logs",
        "iconPath": "/static/tabbar/logs-default.png",
        "selectedIconPath": "/static/tabbar/logs-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/demo/demo",
        "iconPath": "/static/tabbar/face-default.png",
        "selectedIconPath": "/static/tabbar/face-active.png"
      }
    ],
    "color": "#333",
    "selectedColor": "#e93b3d",
    "backgroundColor": "#fff",
    "borderStyle": "black"
  }

页面配置(页面的 .json 文件)

与 window 对应的配置参数：
- enablePullDownRefresh 是否启用下拉刷新
- navigationBarTitleText 导航栏标题文字
- navigationStyle 自定义导航栏
页面独有的配置参数
- disableScroll 禁止页面滚动

disableScroll 不能卸载app.json中不生效

长度组件: rpx

特点：
- 小程序的总屏幕宽度均为750px
- 根据屏幕宽度自动换算成 px 长度
应用实践
- 设计稿宽度以 750px 作为基准
- 设计稿中元素的尺寸即为小程序代码中 rpx 的尺寸

常用组件

navigator

点击这里查看navigator文档

  <navigator open-type="switchTab" url="/pages/logs/logs">点击跳转到日志页</navigator>
  <navigator open-type="switchTab" url="/pages/demo/demo">点击跳转到 demo 页</navigator>

image

点击这里查看image文档

占位组件
- image 组件是一个有默认大小(320 X 240)的 "盒子"
缩进模式
- scaleToFill 不保证缩放比，图片拉伸填满容器
- aspectFit保证缩放比，使图片的长边显示出来
- aspectFill保证缩放比，使图片的短边显示出来
使用原则
- 指定"容器"的大小，给根据设计稿设置 image 的宽高尺寸
- 图片铺满容器，设置aspectFill 缩放模式

swiper

点击这里查看swiper文档

组件结构
- swiper: 滑块容器，只能嵌套 swiper-item 组件默认高度 150px
- swiper-item: 滑块单元，可以嵌套任何内容，如item
组件属性
- indicator-dots 是否显示面板指示点
- autoplay 是否自动切换
- circular 是否衔接滑动

<swiper interval="2000" circular autoplay indicator-dots vertical easing-function="easeInOutCubic" indicator-active-color="#fff">
  <swiper-item>
    <image src="/static/uploads/slide_1.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_2.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_3.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_4.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_5.jpg" mode=""/>
  </swiper-item>
</swiper>

  image {
    width: 100%;
    height: 100%;
  }

表单相关

点击这里查看表单文档

输入框：input
- password密码类型、placeholder 占位文字
单选框：radio-group 和 radio
- value 指定表单数据、checked 选中状态
复选框：checked-group 和 checkbox
- value 指定表单数据、checked 选中状态
选择框：picker
- 必须指定可点击区域
- mode → date 日期，region 地区

<!-- 提前准备好的布局结构代码 -->
<view class="register">
  <view class="legend">信息登记:</view>
  <view class="form-field">
    <label for="">姓名:</label>
    <view class="field">
      <!-- <input password type="text" placeholder="请输入您的姓名"/> -->
      <input type="text" placeholder="请输入您的姓名"/>
    </view>
  </view>
  <view class="form-field">
    <label for="">性别:</label>
    <view class="field">
      <radio-group bindchange="">
        <radio value="男" checked />男
        <radio value="女" />女
      </radio-group>
    </view>
  </view>
  <view class="form-field">
    <label for="">爱好:</label>
    <view class="field">
      <checkbox-group bindchange="">
        <checkbox value="写代码" checked/> 写代码
        <checkbox value="睡大觉"/> 睡大觉
      </checkbox-group>
    </view>
  </view>
  <view class="form-field">
    <label for="">籍贯:</label>
    <view class="field">
      <picker mode="region">
        请选择您的籍贯
      </picker>
    </view>
  </view>
  <view class="form-field">
    <label for="">生日:</label>
    <view class="field">
      <picker mode="date">
        请选择您的生日
      </picker>
    </view>
  </view>
</view>

scroll-view

点击这里查看scroll-view文档

组件结构
- scroll-view 内嵌套可任意内容，要求必须有溢出
- 垂直滚动时必须要指定高度
组件属性
- scroll-x 允许水平方向滚动
- scroll-y 允许垂直方向滚动
- refresher-enabled 启用下拉刷新交互

<view class="page-body">
  <scroll-view scroll-y class="aside">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
  </scroll-view>
  <scroll-view scroll-y refresher-enabled class="content">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
  </scroll-view>
</view>

小程序样式

全局样式

app.wxss

静态资源

.wxss 中只能使用网络路径或 base64，比如背景图
PicX
字体图标
- iconfont字体平台生成字体
- @import 导入字体对应的样式文件
- 根据类名引用不同的字体图标

如何导入小程序

选择代码目录
项目配置文件
- appid 小程序的 AppID
- projectname 小程序项目名称
变更AppID

选择项目所在的目录

小程序模板语法

数据绑定

点击这里查看数据绑定文档

插值绑定 {{}}
双向绑定 model:value

双向绑定只有 input 和 textarea支持

<view class="binding">
  <!-- 属性绑定必须要使用插值 -->
  <switch checked="{{isChecked}}" bindchange=""/>
  <input type="text" model:value="{{message}}"/>
  <view class="message">{{message}}</view>
</view>

Page({
  data: {
    isChecked: true,
    message: 'I am GeniusXiang'
  }
})

条件渲染

点击这里查看条件渲染文档

wx:if 和 wx:else 与 hidden属性

wx:if 与 wx:else 同时使用。在wx:if 表达式为真的时候渲染wx:if的内容，在表达式为假的时候渲染 wx:else的内容

hidden:组件会根根据表达式的值显示/隐藏

[hidden] {dispaly:none} 隐藏节点内容

<!-- 条件渲染 -->
<view class="welcome">
  <text wx:if="{{isShow}}">if-正面</text>
  <text wx:else>else-反面</text>
</view>
<view class="loading">
  <text hidden="{{!hidden}}">false-隐藏</text>
</view>

// pages/render/index.js
Page({
  data: {
    isShow: 'true',
    hidden: 'true'
  }
})

列表渲染

点击这里查看列表渲染文档

wx:for 重复渲染组件内容

index 默认值，访问数组的索引值
item 默认值，访问数组的单元值

wx:key 列表项唯一标识符

数组单元为对象时，只写属性名
数组单元为简单类型时，推荐使用 *this

不使用插值语法

自定义访问变量改变默认的item 和 index 值

wx:for-index 自定义访问数组索引值的变量
wx:for-item 自定义访问数组单元值的变量

<!-- 列表渲染 -->
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
    <text>级别</text>
  </view>
  <!-- <view wx:for="{{students}}" wx:key="index" class="item">
    <text>{{item.id}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
    <text>{{item.level}}</text>
  </view> -->
  <view wx:for="{{students}}" wx:for-item="student" wx:for-index="key" wx:key="key" class="item">
    <text>{{student.id}}</text>
    <text>{{student.name}}</text>
    <text>{{student.age}}</text>
    <text>{{student.gender}}</text>
    <text>{{student.level}}</text>
  </view>
</view>
<!-- 简单数组 -->
<view class="history">
  <text wx:for="{{history}}" wx:key="*this">{{item}}</text>
</view>

Page({
  data: {
    students: [
      {id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟'},
      {id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟'},
      {id: 3, name: '常超', age: 20, gender: '女', level: '老鸟'}
    ],
    history: ['苹果', '华为', 'OPPO', '三星']
  }
})

小程序内置API

网络请求 wx.request

点击这里查看wx.request文档

// 调用 API 发起网络请求
wx.request({
  url: '这里是接口的地址',
  method: '这里是请求的方法',
  data: '请求时提交的数据',
  header: {/* 请求头信息 */},
  success: () => {/* 成功的回调 */},
  fail: () => {/* 失败的回调 */},
  complete: () => {/* 成功或失败的回调 */}
})

界面交互

点击这里查看界面交互文档

页面的交互效果，写在.js文件的方法中

wx.showLoading 显示 loading 提示框 title 文字提示内容 mask 是否显示透明蒙层，防止触摸穿透
wx.hideLoading 隐藏 loading 提示框
wx.showToast 消息提示框（轻提示） mask 是否显示透明蒙层，防止触摸穿透。 duration 延迟时间（提示框显示多久） icon 指定图标，none 不使用图标

<button bind:tap="getBooksList" class="button" size="mini" type="primary">查询书单</button>

Page({
  data: {
    booksList: []
  },
  // 调用数据接口方法
  getBooksList() {

    // 显示loading提示框
    wx.showLoading({
      title: '加载中...',
      mask: true
    })

    // 调用API
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      method: 'GET',
      data: {
        creator: 'zhangsan'
      },
      success: (result) => {
        console.log(result)
        // 更新数据，渲染页面
        this.setData({ booksList: result.data.data })

        // 消息提示框（轻提示）
        wx.showToast({
          title: '获取书单成功',
          mask: true,
          duration: 500,
          icon: 'success'
        })
      },
      fail() {
        // 失败回调
      },
      complete() {
        // 隐藏 loading 提示框
        wx.hideLoading()
      }
    })
  }
})

本地存储

点击这里查看数据缓存文档

存储写在js文件中的方法中

wx.setStorageSync 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
wx.getStorageSync 读取一个数据，复杂类型数据不需要 JSON.parse 处理
wx.removeStorageSync 删除一个数据
wx.clearStorageSync 清空全部数据

<!-- 本地存储 -->
<view class="storage">
  <button bind:tap="setStorage" size="mini" type="primary">存数据</button>
  <button bind:tap="getStorage" size="mini" type="primary">读数据</button>
  <button bind:tap="removeStorage" size="mini" type="primary">删数据</button>
  <button bind:tap="clearStorage" size="mini" type="primary">清数据</button>
</view>

Page({
  setStorage() {
    // 存入一个数据
    wx.setStorageSync('dream', 'To be No.1')
    // 存入复杂类型数据
    wx.setStorageSync('user', {
      name: '天才想',
      age: 18
    })
  },
  getStorage() {
    // 读取本地数据
    const dream = wx.getStorageSync('dream')
    const user = wx.getStorageSync('user')
    console.log(dream, user)
  },
  removeStorage() {
    // 删除本地数据
    wx.removeStorageSync('logs')
  },
  clearStorage() {
    // 清空本地数据
    wx.clearStorage()
  }
})

API 特征

异步API 绝大部分的 API 都是异步方式，通过回调函数success fali complete获取 API 执行的结果
同步API 部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾，如 wx.getStorageSync 等
Promise 部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用

相册/拍照

wx.chooseMedia 调取摄像头拍照或读取相册内容，该 API 既支持回调方式获取结果，也支持 Promise 方式返回结果

<!-- 图片上传预览 -->
<view bind:tap="chooseImage" class="preview">
  <image src="{{filePath}}" mode=""/>
</view>

Page({
  data: {
    filePath: ''
  },
  async chooseImage() {
    // 调用 API 获取图片
    const result = await wx.chooseMedia({
      count: 1,
      mediaType: ['image']
    })
    console.log(result)
    // 读取并渲染图片
    this.setData({
      filePath: result.tempFiles[0].tempFilePath
    })
  }
})

获取系统信息

在.js文件对应的函数中输入代码

wx.getSystemInfoSync()

上传

点击这里查看文档

wx.uploadFile

小程序事件处理

点击这里查看事件文档

事件对象

在事件对应的函数中打印ev 可以看到事件对象

例如点击事件tap

<view bind:tap="handleTap">点击</view>

Page({
  handleTap(ev) {
    console.log('点击了提交')
    console.log(ev)
  }
})

组件事件

组件的事件回调和页面中的事件回调不同。页面的事件回调可以直接写在.js文件中的Page属性中。组件的回调需要写在Component属性中的methods属性中

scroll-view 组件

在scroll-view组件中触发事件

bind:scrolltolower 滑动到底部时触发
bind:refresherrefresh 执行下拉操作时触发
refresher-triggered 变更下拉刷新状态

<scroll-view
  bind:scrolltolower="scrollLower"
  bind:refresherrefresh="handleRefresh"
  refresher-triggered="{{isRefresh}}"
  refresher-enabled
  style="height: 1200rpx;"
  scroll-y
>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
  <view style="background-color: #fff; height: 200rpx; margin-bottom: 30rpx;"></view>
</scroll-view>

Page({
  scrollLower() {
    console.log('滚动到底了哦...')
  },
  handleRefresh() {
    console.log('执行refresh')
    setTimeout(() => {
      this.setData({isRefresh: false})
    }, 1000)
  }
})

表单组件

<!-- 表单 -->
<view>
  <form bind:submit="submitForm">
    <view class="form-field">
      <label for="">用户名:</label>
      <view>
        <input type="text" placeholder="请输入您的姓名" />
      </view>
    </view>
    <view>
      <label for="">性别:</label>
      <view class="field">
        <radio-group bind:change="getRadioValue">
          <radio value="男" checked />男
          <radio value="女" />女
        </radio-group>
      </view>
    </view>
    <view>
      <label for="">爱好:</label>
      <view class="field"  bind:change="getCheckboxValue">
        <checkbox-group>
          <checkbox value="写代码" checked />写代码
          <checkbox value="睡大觉" />睡大觉
        </checkbox-group>
      </view>
    </view>
    <view>
      <label for="">籍贯:</label>
      <view>
        <picker mode="region" bind:change="getRegionValue">请选择籍贯</picker>
      </view>
    </view>
    <button form-type="submit" size="mini" type="primary">保存</button>
  </form>
</view>

Page({
  getRadioValue(ev) {
    // 事件对象中有 detail 属性可以获取表单的值
    console.log(ev.detail.value)
  },
  getCheckboxValue(ev) {
    // 事件对象中有 detail 属性可以获取表单的值
    console.log(ev.detail.value)
  },
  getRegionValue(ev) {
    // 在事件对象中通过 detail 可以获取省市县
    // 包含了编码形式和文字形式
    console.log(ev.detail.value)
  },
  submitForm(ev) {
    console.log('表单提交了...')
    console.log(ev)
  }
})

小程序的生命周期

页面的生命周期

点击这里查看页面的生命周期文档

页面的声明周期作用域当前页面

onLoad

页面加载完成时会执行1次，多用于获取地址参数、发起网络请求等

onShow

页面处于可见状态时执行，常用于更新状态或数据

onHide

页面处于不可见状态时执行，常用于销毁长时间的任务，如定时器。

应用的生命周期

点击这里查看页面的生命周期文档

应用的生命周期作用于全局

onLauch:

小程序启动时会执行1次，常用于获取场景值或参数

onShow:

小程序处于前台时运行

onHider:

小程序处于后台运行时执行

组件的生命周期

点击这里查看文档

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段

在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行

在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发

attaced:

在组件实例进入页面节点树时执行

detached：

在组件实例被从页面节点树移除时执行

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: {
      // 在组件实例从被页面节点树移除时执行
    }
  }
})

小程序分包加载

点击这里查看分包加载文档

小程序的自定义组件

点击这里查看自定义组件文档

基本语法

创建自定义组件 .json文件中 component: true

.js 文件中调用 Component 函数

Component({
  // 组件相关配置
})

组件的json文件

{
  "component": true,
  "usingComponents": {}
}

组件样式

样式隔离：页面中的样式不会影响到组件，组件的样式也不会影响到页面

关闭样式隔离

在组件的.js文件中添加addGlobalClass属性，使得组件可以使用页面的样式

Component({
  options: {
    addGlobalClass: true
  }
})

addGlobalClass 只针对class，类选择器

局限性：无法确定别人组件的类名，不能改变别人写的组件的样式

外部样式类

主动给开发者提供修改样式类的方式

组件的.js 文件中添加externalClasses: [xxx, yyy]

Component({
  // 开发自定义的样式表
  externalClasses: ['custom-class', 'title-class']
})

在组件里的.wxml中需要的位置添加externalClasses中的属性

<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class'">
    自定义标题
  </view>
</view>

在页面的.wxml里组件的属性中添加组件样式名="页面文件中的样式名"

<!--pages/component/index.wxml-->
<navigation-bar 
  custom-class="my-navigation-bar"
  title-class="my-navigation-bar-title"
></navigation-bar>

页面的样式铭必须真实存在的类名，且在页面的样式中

`<slot />` (插槽)

单个插槽

在组件的.wxml中添加插槽

<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class'">
    <slot></slot>
  </view>
</view>

在页面的.wxml中添加文字

<navigation-bar 
  custom-class="my-navigation-bar"
  title-class="my-navigation-bar-title"
>自定义标题1</navigation-bar>
<navigation-bar 
  custom-class="my-navigation-bar"
  title-class="my-navigation-bar-title"
>自定义标题2</navigation-bar>

多个插槽

在组件的.js文件中添加 option属性

Component({
  options: {
    mutipleSlots: true
  }
})

在组件的.wxml中添加插槽

<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class'">
    <!-- 多个属性 -->
    <slot name="title"></slot>
    <slot name="test"></slot>
  </view>
</view>

在页面的.wxml中添加文字

<navigation-bar 
  custom-class="my-navigation-bar"
  title-class="my-navigation-bar-title"
>
  <text slot="title">自定义标题1</text>
  <text slot="test">测试</text>
</navigation-bar>

lifetimes (生命周期)

点击这里跳转到微信开放文档以查看在.js文件中添加lifetimes属性并添加对应的方法

created: 创建组件时触发

不能调用 this.setData（初始化时候页面中还没有data）

多用于数据初始化

在.js文件中添加

Component({
  lifetimes: {
    created() {
      // 组件创建时触发
      console.log('组件创建成功')
    }
  }
})

attached: 组件初始完毕时触发

多用于调用API，发送请求等

Component({
  lifetimes: {
    attached() {
      // 组件初始化完毕时触发
      console.log('组件初始化成功')
    }
  }
})

组件通信

自定义属性

组件通信是指将页面或组件的数据传入子组件内部或者将子组件的数据传入父组件或页面当中

在组件的.js文件中添加properties属性，分别接收传过来的back和delta属性

Component({
  properties: {
    back: Boolean,
    delta: {
      type: Number,
      value: 1
    }
  }
})

在页面组件中添加传递的属性

<navigation-bar back delta="1">
  <text slot="title">
    自定义标题
  </text>
</navigation-bar>

自定义事件

vant 组件库

点击这里跳转文档

昵称和头像

昵称

在input组件中，将type属性值设为nickname。监听blur事件获取用户昵称

获取昵称，基础库需要改到2.20以上。

[详情] → [调整基础库] 升级基础库

  <view class="nickname">
    <label for="">昵称:</label>
    <input bind:blur="getUserNickName" type="nickname" />
  </view>

Page({
  getUserNickName(e) {
    console.log(e)
  }
})

由于开发工具的不稳定，需要失去焦点两次才能在事件中获取到值

头像

在button组件中的open-type属性设置为chooseAvatar。并且监听chooseavatar事件获取用户头像

  <button bind:chooseavatar="getUserAvatar" open-type="chooseAvatar" />

Page({
  getUserAvatar(e) {
    console.log(e)
  }
})

小程序的框架接口

点击这里查看框架接口文档跨页面的数据共享

首先在App.js文件中定义属性和方法,组件中index.js通过getApp函数获取应用实例

App({
  message: '应用实例中的数据...',
  updateMessage() {
    console.log('更新message的数据..')
  }
})

const app = getApp()
Page({
  onShow() {
    console.log(app)
  }
})

页面栈

页面栈：当前打开页面的历史

getCurrenPages获取当前页面栈（数组）。
wx.redirectTo 关闭当前页，再跳转到新页面
wx.navigateTo 保留当前页，再跳转到新页面

Page({
  onShow() {
    const pageStack = getCurrentPages()
    console.log(pageStack)
  }
})

页面实例

data 页面初始数据
setData 更新数据
onShow 生命周期
route 页面路径

Page({
  onLoad() {
    const pageInstance = pageStack[0]
    console.log(pageInstance)
    pageInstance.setData({
      message: '通过页面实例更新数据...'
    })
    pageInstance.onShow = function() {
      console.log('生命周期函数被重新定义了...')
    }
    console.log(pageInstance.route)
  }
})

小程序入门

准备工作

注册小程序账号

查找小程序ID

微信开发者工具的安装和使用

小程序创建

小程序结构

页面布局

基本逻辑处理方式

小程序配置

页面路径

window(窗口的表现)

小程序配置

页面配置(页面的 .json 文件)

长度组件: rpx

常用组件

navigator

image

swiper

表单相关

scroll-view

小程序样式

全局样式

静态资源

如何导入小程序

小程序模板语法

数据绑定

条件渲染

列表渲染

小程序内置API

网络请求 wx.request

界面交互

本地存储

API 特征

相册/拍照

获取系统信息

上传

小程序事件处理

事件对象

组件事件

scroll-view 组件

表单组件

小程序的生命周期

页面的生命周期

onLoad

onShow

onHide

应用的生命周期

onLauch:

onShow:

onHider:

组件的生命周期

attaced:

detached：

小程序分包加载

小程序的自定义组件

基本语法

组件样式

<slot /> (插槽)

单个插槽

多个插槽

lifetimes (生命周期)

created: 创建组件时触发

attached: 组件初始完毕时触发

组件通信

自定义属性

自定义事件

vant 组件库

昵称和头像

昵称

头像

小程序的框架接口

页面栈

`<slot />` (插槽)