微信小程序笔记

目录结构

全局配置文件 app.json

配置项

属性	类型	必填	描述	最低版本
entryPagePath	string	否	小程序默认启动首页
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 tab 栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
functionalPages	boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	否	分包结构配置	1.7.3
workers	string	否	Worker 代码放置的目录	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如「音乐播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	boolean	否	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭	2.3.0
usingComponents	Object	否	全局自定义组件配置	开发者工具 1.02.1810190
permission	Object	否	小程序接口权限相关设置	微信客户端 7.0.0
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升级后的weui样式	2.8.0
useExtendedLib	Object	否	指定需要引用的扩展库	2.2.1
entranceDeclare	Object	否	微信消息用小程序打开	微信客户端7.0.9
darkmode	boolean	否	小程序支持 DarkMode	2.11.0
themeLocation	string	否	指明 theme.json 的位置，darkmode为true为必填	开发者工具 1.03.2004271
lazyCodeLoading	string	否	配置自定义组件代码按需注入	2.11.1
singlePage	Object	否	单页模式相关配置	2.12.0
supportedMaterials	Object	否	聊天素材小程序打开相关配置	2.14.3
serviceProviderTicket	string	否	定制化型服务商票据
embeddedAppIdList	string[]	否	半屏小程序 appId	2.20.1
halfPage	Object	否	视频号直播半屏场景设置	2.18.0

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

小程序中新增/减少页面，都需要对 pages 数组进行修改。

如开发目录为：

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

则需要在 app.json 中写

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新启动策略配置	2.8.0
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic	2.11.1
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none	2.15.0

 "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#0094ff"
  },

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/_home.png",
        "selectedIconPath": "icon/home.png"
      },
      {
        "pagePath": "pages/img/img",
        "text": "图片",
        "iconPath": "icon/_img.png",
        "selectedIconPath": "icon/img.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icon/_my.png",
        "selectedIconPath": "icon/my.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "icon/_search.png",
        "selectedIconPath": "icon/search.png"
      },
      {
        "pagePath": "pages/demo18/demo18",
        "text": "demo18",
        "iconPath": "icon/_search.png",
        "selectedIconPath": "icon/search.png"
      }
    ],
    "color":"#0094ff",
    "selectedColor":"#ff9400",
    "backgroundColor":"#ff5533",
    "position":"bottom"
  },

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

配置项

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 1。	iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件配置	1.6.3
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic	2.11.1
style	string	default	启用新版的组件样式	2.10.2
singlePage	Object	否	单页模式相关配置	2.12.0
restartStrategy	string	homePage	重新启动策略配置	2.8.0

sitemap 配置

⼩程序根⽬录下的 sitemap.json

⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

模板语法

text和view

view类似div

text

1. ⽂本标签

2. 只能嵌套text

3. ⻓按⽂字可以复制（只有该标签有这个功能）

4. 可以对空格回⻋进⾏编码

	属性	类型	默认值	必填	说明	最低版本
	selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
	user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1
	space	string		否	显示连续空格	1.4.0
	合法值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小
	decode	boolean	false	否	是否解码	1.4.0

数据绑定

在标签的属性中使用{{record}}

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否是伪娘: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>

<!-- 
  6 使用bool类型充当属性 checked  
    1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 
      以下写法就是错误的示范
         <checkbox checked="       {{isChecked}}"> </checkbox>

 -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>

Page Object

Page({
  data: {
    msg: "hello ",
    num:10000,
    isGirl:true,
    person:{
      age:13
    },
    isChecked:true
  }
});

循环

列表循环

1 wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”

2 wx:key=“唯一的值” 用来提高列表渲染的性能

1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性

2 wx:key ="*this" 就表示 你的数组 是一个普通的数组 *this 表示是 循环项

​ [1,2,3,44,5]

​ [“1”,“222”,“adfdf”]

3 当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名

​ wx:for-item=“item” wx:for-index=“index”

4 默认情况下 我们 不写

​ wx:for-item=“item” wx:for-index=“index”

​ 小程序也会把 循环项的名称 和 索引的名称 item 和 index

​ 只有一层循环的话 （wx:for-item=“item” wx:for-index=“index”） 可以省略

对象循环

1 wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”

2 循环对象的时候 最好把 item和index的名称都修改一下

wx:for-item=“value” wx:for-index=“key”

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

 <view>
   <view>对象循环</view>
   <view 
  wx:for="{{person}}"
  wx:for-item="value"  
  wx:for-index="key"
  wx:key="age"
  >
     属性:{{key}}
     --
     值:{{value}}
   </view>
 </view>

block

1 占位符的标签

2 写代码的时候 可以看到这标签存在

3 页面渲染 小程序会把它移除掉

条件渲染wx:if

条件渲染

1 wx:if="{{true/false}}"

​ 1 if , else , if else

​ wx:if

​ wx:elif

​ wx:else

 <view wx:if="{{flase}}">1</view>
     <view wx:elif="{{flase}}">2 </view>
     <view wx:else> 3 </view>

hidden

​ 1 在标签上直接加入属性 hidden

​ 2 hidden="{{true}}"

使用的是display:none

什么场景下用哪个

​ 1 当标签不是频繁的切换显示 优先使用 wx:if

​ 直接把标签从 页面结构给移除掉

​ 2 当标签频繁的切换显示的时候 优先使用 hidden

​ 通过添加样式的方式来切换显示

​ hidden 属性 不要和 样式 display一起使用

事件绑定

1 需要给input标签绑定 input事件

绑定关键字 bindinput

2 如何获取 输入框的值

通过事件源对象来获取

e.detail.value

<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>  
  {{num}}
</view>

3 把输入框的值 赋值到 data当中

不能直接

1 this.data.num=e.detail.value

2 this.num=e.detail.value

正确的写法

this.setData({

​ num:e.detail.value

})

4 需要加入一个点击事件

1 bindtap

2 无法在小程序当中的 事件中 直接传参

3 通过自定义属性的方式来传递参数

4 事件源中获取 自定义属性

Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    // console.log(e.detail.value );
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  },
 
})

WXSS

小程序中不需要主动引用样式文件

尺寸单位

page px = 750 rpx

1 px = 750 rpx / page

100 px = 750 rpx * 100 / page

假设 page = 375px

width:calc(750rpx * 100 / 375);

利用 一个属性 calc属性 css 和 wxss 都支持 一个属性

1 750 和 rpx 中间不要留空格

2 运算符的两边也不要留空格

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 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 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

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

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

less

/* 1 定义less变量 */
@color:yellow;
text{
  /* 2 使用变量 */
  color:@color;
}

view{
  .vie1{
    text{
      color: red;
    }
  }
}

/* 导入 */
@import "../../styles/reset.less";
view{
  color: @themeColor;
}
.main{
  /* 
  1 less中 支持 两种注释  多行  单行
  2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
   */
  /* font-size: 200px; */
  // font-size: 400px;
}

image

image 图片标签

1 src 指定要加载的图片的路径

图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100

2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配

1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

2 aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图 常用

3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。 少用

4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整 常用

5 bottom。。 类似以前的backgroud-position

3 小程序当中的图片 直接就支持 懒加载 lazy-load

1 lazy-load 会自己判断 当 图片 出现在 视口 上下 三屏的高度 之内的时候 自己开始加载图片

合法值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

 <image mode="scaleToFill" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

swiper

1 轮播图外层容器 swiper

2 每一个轮播项 swiper-item

3 swiper标签 存在默认样式

1 width 100%

2 height 150px image 存在默认宽度和高度 320 * 240

3 swiper 高度 无法实现由内容撑开

4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度

原图的宽度和高度 1125 * 352 px

swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

height: 100vw * 352 / 1125

5 autoplay 自动轮播

6 interval 修改轮播时间

7 circular 衔接轮播

8 indicator-dots 显示 指示器 分页器 索引器

9 indicator-color 指示器的未选择的颜色

10 indicator-active-color 选中的时候的指示器的颜色

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

	属性	类型	默认值	必填	说明	最低版本
	indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
	indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
	indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
	autoplay	boolean	false	否	是否自动切换	1.0.0
	current	number	0	否	当前所在滑块的 index	1.0.0
	interval	number	5000	否	自动切换时间间隔	1.0.0
	duration	number	500	否	滑动动画时长	1.0.0
	circular	boolean	false	否	是否采用衔接滑动	1.0.0
	vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
	previous-margin	string	“0px”	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
	next-margin	string	“0px”	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
	snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	2.12.1
	display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
	easing-function	string	“default”	否	指定 swiper 切换缓动动画类型	2.6.5
	合法值说明default默认缓动函数linear线性动画easeInCubic缓入动画easeOutCubic缓出动画easeInOutCubic缓入缓出动画
	bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
	bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
	bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

属性	类型	默认值	必填	说明	最低版本
item-id	string		否	该 swiper-item 的标识符	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

navigator

0 块级元素 默认会换行 可以直接加宽度和高度

1 url 要跳转的页面路径 绝对路径 相对路径

2 target 要跳转到当前的小程序 还是其他的小程序的页面

self 默认值 自己 小程序的页面

miniProgram 其他的小程序的页面

3 open-type 跳转的方式

1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。

3 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

4 reLaunch 关闭所有页面，打开到应用内的某个页面

<navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator>
 <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator>
 <navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator> 

	属性	类型	默认值	必填	说明	最低版本
	target	string	self	否	在哪个目标上发生跳转，默认当前小程序	2.0.7
	合法值说明self当前小程序miniProgram其它小程序
	url	string		否	当前小程序内的跳转链接	1.0.0
	open-type	string	navigate	否	跳转方式	1.0.0
	合法值说明最低版本navigate对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能redirect对应 wx.redirectTo 的功能switchTab对应 wx.switchTab 的功能reLaunch对应 wx.reLaunch 的功能1.1.0navigateBack对应 wx.navigateBack 的功能1.1.0exit退出小程序，target="miniProgram"时生效2.1.0
	delta	number	1	否	当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数	1.0.0
	app-id	string		否	当target="miniProgram"时有效，要打开的小程序 appId	2.0.7
	path	string		否	当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页	2.0.7
	extra-data	object		否	当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情	2.0.7
	version	string	release	否	当target="miniProgram"时有效，要打开的小程序版本	2.0.7
	合法值说明develop开发版trial体验版release正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。
	short-link	string		否	当target="miniProgram"时有效，当传递该参数后，可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。	2.18.1
	hover-class	string	navigator-hover	否	指定点击时的样式类，当hover-class="none"时，没有点击态效果	1.0.0
	hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
	hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
	hover-stay-time	number	600	否	手指松开后点击态保留时间，单位毫秒	1.0.0
	bindsuccess	string		否	当target="miniProgram"时有效，跳转小程序成功	2.0.7
	bindfail	string		否	当target="miniProgram"时有效，跳转小程序失败	2.0.7
	bindcomplete	string		否	当target="miniProgram"时有效，跳转小程序完成	2.0.7

rich-text

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

button

button 标签

1 外观的属性

1 size 控制按钮的大小

1 default 默认大小

2 mini 小尺寸

2 type 用来控制按钮的颜色

1 default 灰色

2 primary 绿色

3 warn 红色

3 plain 按钮是否镂空，背景色透明

4 loading 文字前显示正在等待图标

 <button >默认按钮</button>
 <button size="mini">  mini 默认按钮</button>
 <button type="primary"> primary 按钮</button> 
 <button type="warn"> warn 按钮</button> 
 <button type="warn" plain> plain 按钮</button> 
 <button type="primary" loading> loading 按钮</button> 

button 开发能力

open-type：

1 contact 直接打开 客服对话功能 需要在微信小程序的后台配置 只能够通过真机调试来打开

2 share 转发当前的小程序 到微信朋友中 不能把小程序 分享到 朋友圈

3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码

1 绑定一个事件 bindgetphonenumber

2 在事件的回调函数中 通过参数来获取信息

3 获取到的信息 已经加密过了

需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了

4 getUserInfo 获取当前用户的个人信息

1 使用方法 类似 获取用户的手机号码

2 可以直接获取 不存在加密的字段

5 launchApp 在小程序当中 直接打开 app

1 需要现在 app中 通过app的某个链接 打开 小程序

2 在小程序 中 再通过 这个功能 重新打开 app

3 找到 京东的app 和 京东的小程序

6 openSetting 打开小程序内置的 授权页面

1 授权页面中 只会出现 用户曾经点击过的 权限

7 feedback 打开 小程序内置的 意见反馈页面

1 只能够通过真机调试来打开

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

icon

1 type 图标的类型

success|success_no_circle|info|warn|waiting|cancel|download|search|clear

2 size 大小

3 color 图标的颜色

图标组件

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

<icon  type="cancel" size="60" color="#0094ff"> </icon>

radio

1 radio标签 必须要和 父元素 radio-group来使用

2 value 选中的单选框的值

3 需要给 radio-group 绑定 change事件

4 需要在页面中显示 选中的值

属性	类型	默认值	必填	说明	最低版本
value	string		否	radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value	1.0.0
checked	boolean	false	否	当前是否选中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的颜色，同css的color	1.0.0

 <radio-group bindchange="handleChange">
   <radio color="red" value="male">男</radio>
   <radio color="red" value="female" >女</radio>
 </radio-group>

check-box

属性	类型	默认值	必填	说明	最低版本
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color	1.0.0

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>

  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>

生命周期

应用生命周期

属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调——监听小程序初始化。
onShow	function		否	生命周期回调——监听小程序启动或切前台。
onHide	function		否	生命周期回调——监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function		否	未处理的 Promise 拒绝事件监听函数。	2.10.0
onThemeChange	function		否	监听系统主题变化	2.11.0
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

页面生命周期

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
options	Object			页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
behaviors	String Array			类似于mixins和traits的组件间代码复用机制，参见 behaviors，需要基础库版本 2.9.2
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载
onPullDownRefresh	function			监听用户下拉动作
onReachBottom	function			页面上拉触底事件的处理函数
onShareAppMessage	function			用户点击右上角转发
onShareTimeline	function			用户点击右上角转发到朋友圈
onAddToFavorites	function			用户点击右上角收藏
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发
onSaveExitState	function			页面销毁前保留状态回调
其他	any			开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

data

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。