小程序

目录

• 1.小程序介绍
  • 1.1. 为什么是微信⼩程序 ？
  • 1.2. 微信小程序
  • 1.3. 疯狂的微信⼩程序
  • 1.4. 还有其他的⼩程序 不容忽视
• 2. 环境准备
  • 2.1. 注册账号
  • 2.2. 获取APPID
  • 2.3. 开发⼯具
• 3. 第⼀个微信⼩程序
  • 3.1. 打开微信开发者⼯具
  • 3.2. 新建⼩程序项⽬
  • 3.3. 填写项⽬信息
  • 3.4 成功
• 4. 微信开发者⼯具介绍
• 5. ⼩程序结构⽬录
  • 5.1. ⼩程序⽂件结构和传统web对⽐
  • 5.2 基本的项目目录
• 6. ⼩程序配置⽂件
  • 6.1. 全局配置app.json
    • 6.1.1. tabbar (底部选项卡)
  • 6.2 页面配置 page.json
  • 6.3 sitemap 配置
• 7. 模板语法
  • 7.1. 数据绑定
    • 7.1.1. 基本写法
    • 7.1.2. 组件属性
    • 7.1.3. bool类型
  • 7.2. 运算(表达式)
  • 7.3. 列表渲染
    • 7.3.1. wx:for
    • 7.3.2. block
  • 7.4条件渲染
    • 7.4.1. wx:if
    • 7.4.2. hidden
• 8. 小程序
  • 8.1. wxml
  • 8.2. page
  • 8.3. 特别注意
• 9. 样式 WXSS
  • 9.1. 尺⼨单位
  • 9.2. 样式导⼊
  • 9.3. 选择器
  • 9.4. ⼩程序中使⽤less
• 10. 常⻅组件
  • 10.1. view
  • 10.2. text
  • 10.3. image
  • 10.4. swiper
  • 10.5. navigator
  • 10.6. rich-text
  • 10.7 button
  • 10.8. icon
  • 10.9. radio
  • 10.10. checkbox
• 11. ⾃定义组件
  • 11.1. 创建⾃定义组件
    • 11.1.1. 声明组件
    • 11.1.2. 编辑组件
    • 11.1.3. 注册组件
  • 11.2. 声明引⼊⾃定义组件
  • 11.3. ⻚⾯中使⽤⾃定义组件 index.wxml
  • 11.4. 其他属性，参考官方开发文档
  • 11.5. 定义段与⽰例⽅法
  • 11.6. 组件-⾃定义组件传参
    • 11.6.1. 过程
  • 11.7. ⼩结
• 12. ⼩程序⽣命周期
  • 12.1. 应⽤⽣命周期
  • 12.2. ⻚⾯⽣命周期
  • 12.3. ⻚⾯⽣命周期图解

1.小程序介绍

​ 微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现 了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1.1. 为什么是微信⼩程序 ？

1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2. 推⼴app 或公众号的成本太⾼。
3. 开发适配成本低。
4. 容易⼩规模试错，然后快速迭代。
5. 跨平台。

1.2. 微信小程序

• 2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四⼤价值观。张⼩⻰指出。越来越多产品通过公众号来做，因为这⾥开发、获取⽤⼾和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信⼩程序」 需要注意的是，之前是叫做应用号

• 2016年9⽉21⽇，微信⼩程序正式开启内测。在微信⽣态下，触⼿可及、⽤完即⾛的微信⼩程序引 起⼴泛关注。腾讯云正式上线微信⼩程序解决⽅案，提供⼩程序在云端服务器的技术⽅案。

• 2017年1⽉9⽇，微信推出的“⼩程序”正式上线。“⼩程序”是⼀种⽆需安装，即可使⽤的⼿ 机“应⽤”。不需要像往常⼀样下载App，⽤⼾在微信中“⽤完即⾛”。

1.3. 疯狂的微信⼩程序

1. 微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万
2. 信息传达数达到450亿，较去年增长18%;视频通话4.1亿次增长100%
3. 小程序覆盖超过200+行业，交易额增长超过6倍，服务1000亿+人次,创造出了5000亿+的商业价值

1.4. 还有其他的⼩程序 不容忽视

1. 支付宝小程序
2. 百度小程序
3. QQ小程序.
4. 今日头条+抖音小程序.

说明：学会微信小程序可以很快上手其他的小程序

2. 环境准备

开发微信⼩程序之前，必须要准备好相应的环境

2.1. 注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

访问注册⻚⾯，耐⼼完成注册即可。

2.2. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。

登录，然后如下操作

• 点击"开发" > 开发设置 > 复制AppID

2.3. 开发⼯具

下载地址，下载相应系统的版本

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。

但是由于编码的体验不算好，因此 建议使⽤ 其他开发工具（如：vscode或者hbuilderX） + 微信小程序编辑工具 来实现编码 开发工具 负责敲代码， 微信编辑工具 负责预览

3. 第⼀个微信⼩程序

3.1. 打开微信开发者⼯具

注意 第⼀次登录的时候 需要扫码登录

3.2. 新建⼩程序项⽬

3.3. 填写项⽬信息

只是进行简单的调试开发可以点击测试号进行使用，后面再修改ID发布也可以。

3.4 成功

4. 微信开发者⼯具介绍

详细的使⽤，可以查看官⽹

5. ⼩程序结构⽬录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

5.1. ⼩程序⽂件结构和传统web对⽐

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

通过以上对⽐得出，传统web是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json

5.2 基本的项目目录

6. ⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的 page.json

注意：配置文件不能出现注释

6.1. 全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }
}

字段的含义

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

完整的配置信息参考 app.json配置

6.1.1. tabbar (底部选项卡)

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    }],
    "color": "#0096FF",
    "selectedColor": "#FF9600",
    "backgroundColor": "#EDEDED",
    "position": "bottom"
  }

说明：

1. 全部导航链接放在 tabBar 的 list 的数组当中，至少两项

2. color：导航栏文本颜色，仅十六进制

   selectedColor：导航栏选中文本颜色，仅十六进制

   backgroundColor：导航栏背景颜色，仅十六进制

   postition：导航论所处位置，top或者bottom

6.2 页面配置 page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。

常用配置：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black / white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。 详⻅ Page.onPullDownRefresh
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。 详⻅ Page.onReachBottom
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有 效，⽆法在 app.json 中设置该项

6.3 sitemap 配置

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引，类似百度爬虫。

可以先了解下，等程序即将开发完毕再进行部署

7. 模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构 建出⻚⾯的结构。

例如：<view>：类似web中块元素div标签、<text>类似于web中行内元素span

7.1. 数据绑定

7.1.1. 基本写法

首先在页面的js文件中page添加

Page({
  data: {
    msg: "Hello world!",
    num:1000,
    person:{
      name:"李",
      age:18
    }
}) 

wxml中

<!-- 基本用法 -->
<!-- 字符串 -->
<view>{{msg}}</view>
<!-- 数字用法 -->
<view>数量：{{num}}</view>
<!-- 对象用法 -->
<view>姓名：{{person.name}}、年龄[{person.age}}</view>

7.1.2. 组件属性

 <view id="item-{{id}}">ABC</view>

Page({
  data: {
    id: 0
 }
})

7.1.3. bool类型

<checkbox checked="{{false}}"> </checkbox>

7.2. 运算(表达式)

表达式：指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算。。

<!-- 数字运算（+ - * / %） -->
<view> {{1 + 1}}</view>
<!-- 字符串拼接 -->
<view>{{'1' + '1'}}</view>
<!-- 三元运算 -->
<view>{{11 % 2 ? '奇数' : '偶数'}}</view>

7.3. 列表渲染

7.3.1. wx:for

wx:for="数组或者对象" wx:for-item="循环项的名称" wx:for-index="循环项的索引" wx:key="id"

wx:for-item="item" wx:for-index="index" 是默认变量名，如果单层循环可以不写，但是多重循环嵌套不能重名

wx:key：⽤来提⾼数组渲染的性能，可以绑定的值，如下：

1. string 类型，表⽰ 循环项中的唯⼀属性，比如商品ID

2. *this 标示循环项本身，，*this 代表的必须是 唯⼀的字符串和数组。

data:{
    list:[
      {
        id:0,
        name:"小明"
      },
      {
        id: 1,
        name: "小华"
      },{
        id: 2,
        name: "小天"
      }
    ]
}

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">{{index}}----{{item.name}}</view>

<!-- 遍历对象的值 -->
<view wx:for="{{person}}" wx:for-index="key" wx:for-item="value" wx:key="*this">{{key}}----{{value}}</view>

说明：如果是对象，wx:for-index则为属性名，wx:for-item为属性值

如果数据不变化，可以忽略wx:key 不写，只是控制台会报警。

7.3.2. block

block 只是一个占位，渲染出来不会产生任何标签元素，只把循环内容现实出来

<block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
  <view>{{index}}----{{item.name}}</view>
</block>

7.4条件渲染

7.4.1. wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{false}}">1</view>

<view wx:elif="{{true}}">2</view>

<view wx:else>3</view>

7.4.2. hidden

<view hidden="{{condition}}"> True </view>

什么场景下用哪个

1. 当标签不是频繁的切换显示 优先使用 wx:if
   直接把标签从 页面结构给移除掉
2. 当标签频繁的切换显示的时候 优先使用 hidden
   通过添加样式的方式来切换显示
   hidden 属性不要和 样式 display一起使用，会样式重叠覆盖

8. 小程序

​ ⼩程序中绑定事件，通过bind关键字来实现。如 bindtap(点击事件) bindinput bindchange 等 不同的组件⽀持不同的事件，具体看组件的说明即可。

8.1. wxml

<input bindinput="handleInput" />

8.2. page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

8.3. 特别注意

1. 绑定事件时不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

2. 事件传值 通过标签⾃定义属性的⽅式 和 value

<input bindinput="handleInput" data-item="100" />

3. 事件触发时获取数据

  handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }

说明：获取data中数据要 this.data.属性名 的方式获取，设置方式： this.setData({ 属性名:值 });

9. 样式 WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。

与 CSS 相⽐，WXSS 扩展的特性有：

• 响应式⻓度单位 rpx

• 样式导⼊

9.1. 尺⼨单位

rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像 素 ， 1rpx = 0.5px = 1物理像素 。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤：

1. 确定设计稿宽度 pageWidth
2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

9.2. 样式导⼊

wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

9.3. 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

⽬前⽀持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有view组件
element, element	view, checkbox	选择所有文档的view组件和所有的checkbox组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件前边插入内容

9.4. ⼩程序中使⽤less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。 但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

编辑器是 vscode

1. 安装插件 easy less

2. 在vs code的设置中加⼊如下，配置

       "less.compile": {
           "outExt":       ".wxss"
      }
   

编译器是 HBuilder X

1. 安装less编译插件

   

2. 插件配置 工具 > 插件配置 > comile-less > package.json ，将command中的 ${fileBasename}.css css修改为wxss

   "command": [
   					"${programPath}",
   					"${file}",
   					"${fileBasename}.wxss"
   				],
   

   同时把自动编译打开

   "onDidSaveExecution": true
   

   重启 HBuilder X ，新建less即可自动编译为wxss

10. 常⻅组件

重点讲解⼩程序中常⽤的布局组件view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。 等

10.1. view

代替 原来的 div 标签

  <view hover-class="h-class">点击我试试</view>

说明：

1. hover-class 为小程序独有元素，表示点击后使用的wxss样式，当 hover-class="none" 时，没有点击效果
2. hover-stop-propagation 是否阻止事件冒泡，默认为false

10.2. text

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制(只 有该标签有这个功能)
4. 可以对空格回车进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

  <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

10.3. image

1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	scaleToFill	图片裁剪、缩放的模式
lazy-load	Boolean	FALSE	图片懒加载

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。

模式	值	说明
缩放.	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素，默认值
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。页面轮播图 常用
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。少用
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变，类似web指定宽，高度自适应，常用
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

10.4. swiper

微信内置轮播图组件

swiper：滑块视图容器。

swiper-item：滑块。

说明：

1. swiper 默认宽度 100% 高度150px，而 image 也存在默认样式 320*240

2. swiper高度无法随着内容撑开

3. swiper宽高可以随着原图宽高大小进行等比例给定,即:

4. swiper宽度/swiper高度 = 原图宽度/原图高度

   例: 原图:1125 * 352px，swiper宽度:100vw(100%或者750rpx)
   swiper高度 = 352 * 100vw / 1125

5. image 给定属性：mode="widthFix" ，样式 width:100%;

常见轮播属性：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0,0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否循环轮播

10.5. navigator

导航组件 类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

open-type有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面。
switchTab	跳转到tabBar页面，并关闭其他所有非tabBar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当
exit	前的页面栈，决定需要返回几层

10.6. rich-text

富文本标签

可以将字符串解析成 对应标签，类似 vue中 v--html 功能

在页面js data 数据中定义：

	//两种定义方式：
	// 1 标签字符串 最常用的
    // html:'<div> ...html代码... </div>'
    // 2 对象数组
    html:[
      {
        // 1 div标签 name属性来指定
        name:"div",
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class  style
          class:"my_div",
          style:"color:red;"
        },
        // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 
        children:[
          {
            name:"p",
            attrs:{},
            // 放文本
            children:[
              {
                type:"text",
                text:"hello"
              }
            ]
          }
        ]
      }
    ]

wxml中调用：

<rich-text nodes="{{html}}"></rich-text>

10.7 button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带loading图标
form-type	string		否	用于 form 组件，点击分别会触发 form 组件的submit/reset事件
open-type	string		否	微信开放能力

size 的合法值

值	说明
default	默认大小
mini	小尺寸

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色.

form-type 的合法值

值	说明
submit	提交表单
reset	重置表单

open-type 的合法值

值	说明
contact	打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从 bindcontact 回调中获得具体信息，只能够通过真机调试来打开，具体说明
share	触发⽤⼾转发，使⽤前建议先阅读使用引导
getPhoneNumber	获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾手机号，具体说明，不是企业的小程序账号 没有权限来获取用户的手机号码
getUserInfo	获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置⻚
feedback	打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传日志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容，只能够通过真机调试来打开

open-type 的 contact的实现流程

1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid

2. 登录微信⼩程序官⽹，添加 客服 -- 微信

3. 即可使用普通用户账号与客服交流

10.8. icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success,success_no_circle,info, warn, waiting,cancel,download, search,clear
size	number/string	23	否	icon的⼤⼩
color	string		否	icon的颜⾊，同css的color

10.9. radio

可以通过 color属性来修改颜色

需要搭配 radio-group ⼀起使⽤

10.10. checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤

11. ⾃定义组件

类似vue或者react中的自定义组件

⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

11.1. 创建⾃定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

可以在微信开发者⼯具中快速创建组件的⽂件结构，在小程序目录新建 components 文件夹，用来存放组件

在⽂件夹内 components/myHeader ，创建组件 名为 myHeader

11.1.1. 声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明

myHeader.json

{
  "component": true
}

11.1.2. 编辑组件

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式

slot 表⽰插槽，类似vue中的slot，就是一个占位槽

myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
 {{innerText}}
    <slot></slot>
</view>

在组件的 wxss ⽂件中编写样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

11.1.3. 注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和 ⾃定义⽅法

myHeader.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
      value: 'default value',
   }
 },
  data: {
    // 这里是一些组件内部数据
    someData: {}
 },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
 }
})

11.2. 声明引⼊⾃定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

index.js

{
 // 引用声明
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }
}

11.3. ⻚⾯中使⽤⾃定义组件 index.wxml

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

11.4. 其他属性，参考官方开发文档

11.5. 定义段与⽰例⽅法

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，参⻅下⽂
data	Object	否	组件的内部数据，和 properties ⼀同⽤于组件的模板渲染
observers	0bject	否	组件数据字段监听器，⽤于监听 properties 和 data 的变化，参⻅数据监听器
methods	Object	否	组件的⽅法，包括事件响应函数和任意的⾃定义⽅法，关于事件响应函数的使⽤，参⻅组件事件
created	Function	否	组件⽣命周期函数，在组件实例刚刚被创建时执⾏，注意此时不能调⽤ setData ，参⻅ 组件⽣命周期
attached	Function	否	组件⽣命周期函数，在组件实例进⼊⻚⾯节点树时执⾏，参⻅组件⽣命周期
ready	Function	否	组件⽣命周期函数，在组件布局完成后执⾏，参⻅ 组件⽣命周期
moved	Function	否	组件⽣命周期函数，在组件实例被移动到节点树另⼀个位置时执⾏，参⻅ 组件⽣命周期
detached	Function	否	组件⽣命周期函数，在组件实例被从⻚⾯节点树移除时执⾏，参⻅ 组件⽣命周期

11.6. 组件-⾃定义组件传参

1. ⽗组件通过属性的⽅式给⼦组件传递参数
2. ⼦组件通过事件的⽅式向⽗组件传递参数

11.6.1. 过程

1. ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中

2. ⽗组件 监听 onMyTab 事件

3. ⼦组件 触发 bindmytap 中的 mytap 事件

   1. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象

4. ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs");

⽗组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
 内容-这里可以放插槽
</tabs>
// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },

⼦组件代码

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
   }
 }
})

11.7. ⼩结

1. 标签名 是 中划线的⽅式

2. 属性的⽅式 也是要中划线的⽅式

3. 其他情况可以使⽤驼峰命名

   1. 组件的⽂件名如 myHeader.js 的等
   2. 组件内的要接收的属性名 如 innerText

12. ⼩程序⽣命周期

分为应⽤⽣命周期和⻚⾯⽣命周期

12.1. 应⽤⽣命周期

属性	类型	说明
onLaunch	function	监听⼩程序初始化，应用第一次启动的就会触发的事件，一般用于获取用户的个人信息
onShow	function	监听⼩程序启动或切前台，应用被用户看到启用，用于对应用的数据或者页面效果 重置
onHide	function	监听⼩程序切后台，应用 被隐藏了，用于暂停或者清除定时器
onError	function	错误监听函数，应用的代码发生了报错的时候 就会触发，用于在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送后台去
onPageNotFound	function	⻚⾯不存在监听函数，应用第一次启动的时候，应用：如果找不到第一个入口页面 才会触发，如果页面不存在了 通过js（wx.navigateTo()）的方式来重新跳转页面 重新跳到第二个首页

12.2. ⻚⾯⽣命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发
其他	any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

12.3. ⻚⾯⽣命周期图解