微信小程序-原生

腾讯 H5 文档库

微信小程序

0.文件类型

• .json
  • app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
  • project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项
  • page.json 用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
• .wxml
  • 标签：是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，还提供了地图、视频、音频等等组件能力
  • MVVM 开发模式 ：{{value}} wx:if等
• .wxss
  • 提供了新的尺寸单位：rpx
  • 提供全局样式app.wxss和局部样式page.wxss
• .js
  • wxml中 [bindtap='funcX']， js中 funcX:function(){}

1. json 配置参数

1.1 app.json 配置参数

属性	类型	必填	描述
pages	String Array	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 tab 栏的表现
networkTimeout	Object	否	网络超时时间
debug	Boolean	否	是否开启 debug 模式，默认关闭
functionalPages	Boolean	否	是否启用插件功能页，默认关闭
subPackages	Object Array	否	分包结构配置
workers	String	否	Worker 代码放置的目录
requiredBackgroundModes	Array	否	需要在后台使用的能力，如“音乐播放”
plugins	Object	否	使用到的插件

示例：

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

• pages

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

• window

  属性	类型	默认值	描述	最低版本
  navigationBarBackgroundColor	HexColor(十六进制颜色)	#000000	导航栏背景颜色，如 #000000
  navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
  navigationBarTitleText	String		导航栏标题文字内容
  navigationStyle	String	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮	微信版本 6.6.0
  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.onReachButom

• tabBar

  属性	类型	必填	默认值	描述
  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

  其中 List 接受一个数组 。只能配置（2-5）个 tab，tab 按数组的顺序排序，每个项都是一个对象，其属性值如下

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

• networkTimeout

  属性	类型	必填	默认值	说明
  request	Number	否	60000	wx.request 的超时时间，单位毫秒。
  connectSocket	Number	否	60000	wx.connectSocket 的超时时间，单位毫秒。
  uploadFile	Number	否	60000	wx.uploadFile 的超时时间，单位毫秒。
  downloadFile	Number	否	60000	wx.downloadFile 的超时时间，单位毫秒。

• debug

  可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

• functionalPages 基础库 2.1.0 开始支持，低版本需做兼容处理

  启用插件功能页时，插件所有者小程序需要设置其 functionalPages 为 true。

• subPackages 微信客户端 6.6.0 ，基础库 1.7.3 及以上版本支持

  启用分包加载时，声明项目分包结构。

• workers 基础库 1.9.90 开始支持，低版本需做兼容处理

  使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录

• requiredBackgroundModes 微信客户端 6.7.2 及以上版本支持

  申明需要后台运行的能力，类型为数组。目前暂只支持 audio：

  如 "requiredBackgroundModes": ["audio"],

• plugins 基础库 1.9.6 开始支持，低版本需做兼容处理

  声明小程序需要使用的插件。

1.2 page.json 配置参数

每一个小程序页面也可以使用.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.onReachButom
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

2 视图层

• WXML(WeiXin Markup language) 用于描述页面的结构。
• WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
• WXSS(WeiXin Style Sheet) 用于描述页面的样式。
• 组件(Component)是视图的基本组成单元。

2.1 WXML

• 数据绑定

  • 简单绑定

    • 内容 ：<view> {{ message }} </view>
    • 组件属性：<view id="item-{{id}}"> </view>
    • 控制属性：<view wx:if="{{condition}}"> </view>
    • 关键字：<checkbox checked="{{false}}"> </checkbox>

  • 运算

    • 三元运算：<view hidden="{ {flag ? true : false} }"> Hidden </view>
    • 算术运算：<view> {{a + b}} + {{c}} + d </view>
    • 逻辑判断：<view wx:if="{{length > 5}}"> </view>
    • 字符串运算：<view>{{"hello" + name}}</view>
    • 数据路径运算：<view>{{object.key}} {{array[0]}}</view>

  • 组合

    • 数组：<view wx:for="{{[id, 1, 2, 3, 4]}}"> {{item}} </view>

    • 对象：<template is="objectCombine" data="{ {for: object.key, bar: array[0]} }"></template>

      或`...`将 对象展开 `<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>`
      

  Page({
    data: {
      message: "Hello MINA!",
      name: "MINA",
      id: 0,
      condition: true,
      object: {
        key: "Hello ",
      },
      array: ["MINA"],
      obj1: {
        a: 1,
        b: 2,
      },
      obj2: {
        c: 3,
        d: 4,
      },
    },
  });
  

• 列表渲染

  • wx:for / block wx:for

    <view wx:for="{{array}}">
      {{index}}: {{item.message}} </view
    ><!--默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item-->
    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
      {{idx}}: {{itemName.message}} </view
    ><!--wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当前下标的变量名：-->
    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
      <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
        <view wx:if="{{i <= j}}">
          {{i}} * {{j}} = {{i * j}}
        </view>
      </view> </view
    ><!--wx:for 也可以嵌套，下边是一个九九乘法表-->
    
    <block wx:for="{{[1, 2, 3]}}">
      <view> {{index}}: </view>
      <view> {{item}} </view> </block
    ><!--将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块-->
    

  • wx:key

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

    wx:key 的值以两种形式提供

    1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
    2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

    <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;">
      {{item.id}}
    </switch>
    

    见 详情

• 条件渲染

  • wx:if / block wx:if

    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    
    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>
    

• 模板

  • 定义模板

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
    
    <template name="odd">
      <view> odd </view>
    </template>
    <template name="even">
      <view> even </view>
    </template>
    

  • 使用模板

    <template is="msgItem" data="{{...item}}" />
    
    <block wx:for="{{[1, 2, 3, 4, 5]}}">
      <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
    </block>
    
    <script>
      Page({
        data: {
          item: {
            index: 0,
            msg: "this is a template",
            time: "2016-09-15",
          },
        },
      });
    </script>
    

• 事件

  • 使用示例

    <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
    

    Page({
      tapName: function (event) {
        console.log(event);
      },
    });
    

  • 事件类型

    • 常见冒泡事件：

      类型	触发条件	最低版本
      touchstart	手指触摸动作开始
      touchmove	手指触摸后移动
      touchcancel	手指触摸动作被打断，如来电提醒，弹窗
      touchend	手指触摸动作结束
      tap	手指触摸后马上离开
      longpress	手指触摸后，超过 350ms 再离开，如果指定了事件回调函数并触发了这个事件，tap 事件将不被触发	1.5.0
      longtap	手指触摸后，超过 350ms 再离开（推荐使用 longpress 事件代替）
      transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
      animationstart	会在一个 WXSS animation 动画开始时触发
      animationiteration	会在一个 WXSS animation 一次迭代结束时触发
      animationend	会在一个 WXSS animation 动画完成时触发
      touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

    • 除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的 submit 事件，<input/>的 input 事件，<scroll-view/>的 scroll 事件

  • 事件绑定和冒泡 & 捕获

    • key ：冒泡事件和捕获事件不同。在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart
      • 冒泡 ：以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart
      • 捕获 ：采用capture-bind:type、capture-catch:type关键字。（capture-catch会中断捕获阶段和取消冒泡阶段）
    • value： 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

  • 事件对象

    • BaseEvent 基础事件对象属性列表

      属性	类型	说明
      type	String	事件类型
      timeStamp	Integer	事件生成时的时间戳
      target	Object	触发事件的源组件，object 是其一些属性值集合
      currentTarget	Object	当前组件，object 是其一些属性值集合特殊： <canvas/> 中的触摸事件不可冒泡，所以没有 currentTarget。

    • CustomEvent 自定义事件对象属性列表（继承 BaseEvent）

      属性	类型	说明
      detail	Object	自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息

    • TouchEvent 触摸事件对象属性列表（继承 BaseEvent）

      属性	类型	说明
      touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
      changedTouches	Array	触摸事件，当前变化的触摸点信息的数组。表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）

• 引用

  • import

    <!-- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>
    

    <import src="item.wxml" />
    <template is="item" data="{{text: 'forbar'}}" />
    

    import 有作用域的概念，只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

  • include

    <!-- index.wxml -->
    <include src="header.wxml" />
    <view> body </view>
    <include src="footer.wxml" />
    

    <!-- header.wxml -->
    <view> header </view>
    

    <!-- header.wxml -->
    <view> header </view>
    

    include 可将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

2.2 WXS

1. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
2. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的 API
3. wxs 函数不能作为组件的事件回调

• 模块 ：

  示例：WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内

  每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

  <!--wxml-->
  <wxs module="m1">
    <!--<wxs>标签 :module属性唯一且必填，-->
    var msg = "hello world"; module.exports.message = msg;
    //一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports
    实现。
  </wxs>
  <view> {{m1.message}} </view>
  
  <wxs src="./../tools.wxs" module="tools" />
  <!--src属性 只能引用 .wxs 文件模块，且必须使用相对路径-->
  <view> {{tools.msg}} </view>
  <view> {{tools.bar(tools.FOO)}} </view>
  
  <wxs src="./../logic.wxs" module="logic" />
  

  // /pages/tools.wxs
  
  var foo = "'hello world' from tools.wxs";
  var bar = function (d) {
    return d;
  };
  module.exports = {
    FOO: foo,
    bar: bar,
  };
  module.exports.msg = "some msg"; //每个 wxs 模块均有一个内置的 module 对象。
  

  //logic.wxs
  var tools = require("./tools.wxs");
  
  console.log(tools.FOO);
  console.log(tools.bar("logic.wxs"));
  console.log(tools.msg);
  

• 变量 ：

  var 表现与 javascript 一致，会有变量提升，没有声明的变量直接赋值使用，会被定义为全局变量。

  保留标识符 见官方文档

• 注释 ：同 js // /* */

• 运算符 ：

  运算符优先级 见官方文档

  • 基本 加减乘除取余，
  • 一元运算符
    • a++ ,++a
    • a–, –a
    • ~a （否运算
    • !a（取反
    • delete a.attr1 （delete 运算
    • void a （void 运算
    • typeof a （typeof 运算
  • 位运算符 见官方文档
  • 比较运算符
  • 等值运算符
  • 赋值
  • 二元逻辑运算符 && ||
  • 条件三元运算符 (a >= 10 ? a + 10 : b + 10)
  • 逗号运算符 顺序执行两个表达式 (a, b)

• 语句 ：

  • if(){}else if(){} eles{}
  • switch(){case x1:break;case x2:break;default:}
  • for(;;){}
  • while(){} / do{}while()

• 数据类型 ：

  • number ： 数值
  • string ：字符串
  • boolean：布尔值
  • object：对象
  • function：函数
  • array : 数组
  • date：日期
  • regexp：正则

• 基础类库 ：

  • console
  • Math
  • Json
  • Number
  • Date
  • Global

2.3 WXSS

• 尺寸单位 rpx
• 样式导入 @import "xx.wxss"
• 内联样式 <view style="color:{{color}};" /> / <view class="xxclass" />

2.4 基础组件

通用属性：

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

• 视图容器

  • view 视图容器

  属性名	类型	默认值	说明	最低版本
  hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
  hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	1.5.0
  hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
  hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

  • scroll-view 可滚动视图区域

  属性名	类型	默认值	说明
  scroll-x	Boolean	false	允许横向滚动
  scroll-y	Boolean	false	允许纵向滚动
  upper-threshold	Number	50	距顶部/左边多远时（单位 px），触发 scrolltoupper 事件
  lower-threshold	Number	50	距底部/右边多远时（单位 px），触发 scrolltolower 事件
  scroll-top	Number		设置竖向滚动条位置
  scroll-left	Number		设置横向滚动条位置
  scroll-into-view	String		值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
  scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
  enable-back-to-top	Boolean	false	iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
  bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
  bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
  bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

  • swiper 滑块视图容

  属性名	类型	默认值	说明	最低版本
  indicator-dots	Boolean	false	是否显示面板指示点
  indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
  indicator-active-color	Color	#000000	当前选中的指示点颜色	1.1.0
  autoplay	Boolean	false	是否自动切换
  current	Number	0	当前所在滑块的 index
  current-item-id	String	“”	当前所在滑块的 item-id ，不能与 current 被同时指定	1.9.0
  interval	Number	5000	自动切换时间间隔
  duration	Number	500	滑动动画时长
  circular	Boolean	false	是否采用衔接滑动
  vertical	Boolean	false	滑动方向是否为纵向
  previous-margin	String	“0px”	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
  next-margin	String	“0px”	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
  display-multiple-items	Number	1	同时显示的滑块数量	1.9.0
  skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
  bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
  bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

  • movable-area>movable-view 可移动的视图容器，在页面中可以拖拽滑动

  movable-view 的属性名	类型	默认值	说明	最低版本
  direction	String	none	movable-view 的移动方向，属性值有 all、vertical、horizontal、none
  inertia	Boolean	false	movable-view 是否带有惯性
  out-of-bounds	Boolean	false	超过可移动区域后，movable-view 是否还可以移动
  x	Number / String		定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
  y	Number / String		定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
  damping	Number	20	阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快
  friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
  disabled	Boolean	false	是否禁用	1.9.90
  scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内,在movable-view中添加scale-area属性可将手势生效区域修改为整个movable-view	1.9.90
  scale-min	Number	0.5	定义缩放倍数最小值	1.9.90
  scale-max	Number	10	定义缩放倍数最大值	1.9.90
  scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	1.9.90
  animation	Boolean	true	是否使用动画	2.1.0
  bindchange	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中 source 表示产生移动的原因，值可为 touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）	1.9.90
  bindscale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中 x 和 y 字段在2.1.0之后开始支持返回	1.9.90
  htouchmove	EventHandle		初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch	1.9.90
  vtouchmove	EventHandle		初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch

  • cover-view>cover-view + cover-image 覆盖在原生组件之上的文本视图 只支持嵌套cover-view、cover-image，可在cover-view中使用button

  cover-image 的属性名	类型	默认值	说明	最低版本
  src	String		图标路径，支持临时路径、网络地址（1.6.0 起支持）、云文件 ID（2.2.3 起支持）。暂不支持 base64 格式。
  bindload	EventHandle		图片加载成功时触发 事件	2.1.0
  binderror	EventHandle		图片加载失败时触发 事件	2.1.0
  cover-view 属性名:
  scroll-top	Number		设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效	2.1.0

• 基础内容

  • icon 图标

  属性名	类型	默认值	说明
  type	String		icon 的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  size	Number	23	icon 的大小，单位 px
  color	Color		icon 的颜色，同 css 的 color

  • text 文本

  属性名	类型	默认值	说明	最低版本
  selectable	Boolean	false	文本是否可选	1.1.0
  space	String	false	显示连续空格 有效值：ensp，emsp，nbsp	1.4.0
  decode	Boolean	false	是否解码	1.4.0

  • rich-text 富文本 https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
  • progress 进度条

  属性名	类型	默认值	说明	最低版本
  percent	Float	无	百分比 0~100
  show-info	Boolean	false	在进度条右侧显示百分比
  stroke-width	Number	6	进度条线的宽度，单位 px
  color	Color	#09BB07	进度条颜色 （请使用 activeColor）
  activeColor	Color		已选择的进度条的颜色
  backgroundColor	Color		未选择的进度条的颜色
  active	Boolean	false	进度条从左往右的动画
  active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	1.7.0

• 表单 Form

  • 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		微信开放能力		1.1.0
  hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
  hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态		1.5.0
  hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
  hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
  lang	String	en	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	open-type=”getUserInfo”	1.3.0
  bindgetuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致	open-type=”getUserInfo”	1.3.0
  session-from	String		会话来源	open-type=”contact”	1.4.0
  send-message-title	String	当前标题	会话内消息卡片标题	open-type=”contact”	1.5.0
  send-message-path	String	当前分享路径	会话内消息卡片点击跳转小程序路径	open-type=”contact”	1.5.0
  send-message-img	String	截图	会话内消息卡片图片	open-type=”contact”	1.5.0
  show-message-card	Boolean	false	显示会话内消息卡片	open-type=”contact”	1.5.0
  bindcontact	Handler		客服消息回调	open-type=”contact”	1.5.0
  bindgetphonenumber	Handler		获取用户手机号回调	open-type=”getPhoneNumber”	1.2.0
  app-parameter	String		打开 APP 时，向 APP 传递的参数	open-type=”launchApp”	1.9.5
  binderror	Handler		当使用开放能力时，发生错误的回调	open-type=”launchApp”	1.9.5
  bindopensetting	Handler		在打开授权设置页后回调	open-type=”openSetting”	2.0.7

  • form

  属性名	类型	说明	最低版本
  report-submit	Boolean	是否返回 formId 用于发送模板消息
  bindsubmit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
  bindreset	EventHandle	表单重置时会触发 reset 事件

  • label

  属性名	类型	说明
  for	String	绑定控件的 id 目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>

  • input (原生组件)

  属性名	类型	默认值	说明	最低版本
  value	String		输入框的初始内容
  type	String	“text”	input 的类型
  password	Boolean	false	是否是密码类型
  placeholder	String		输入框为空时占位符
  placeholder-style	String		指定 placeholder 的样式
  placeholder-class	String	“input-placeholder”	指定 placeholder 的样式类
  disabled	Boolean	false	是否禁用
  maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
  cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  auto-focus	Boolean	false	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
  focus	Boolean	false	获取焦点
  confirm-type	String	“done”	设置键盘右下角按钮的文字，仅在 type=’text’时生效	1.1.0
  confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	1.1.0
  cursor	Number		指定 focus 时的光标位置	1.5.0
  selection-start	Number	-1	光标起始位置，自动聚集时有效，需与 selection-end 搭配使用	1.9.0
  selection-end	Number	-1	光标结束位置，自动聚集时有效，需与 selection-start 搭配使用	1.9.0
  adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	1.9.90
  bindinput	EventHandle		键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
  bindfocus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
  bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
  bindconfirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}

  • checkbox-group

  属性名	类型	默认值	说明
  bindchange	EventHandle		<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的 checkbox 的 value 的数组]}

  • checkbox

  属性名	类型	默认值	说明
  value	String		<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
  disabled	Boolean	false	是否禁用
  checked	Boolean	false	当前是否选中，可用来设置默认选中
  color	Color		checkbox 的颜色，同 css 的 color

  • radio-group>radio

  radio-group 属性名	类型	默认值	说明
  bindchange	EventHandle		<radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项 radio 的 value}

  属性名	类型	默认值	说明
  value	String		<radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的 value
  checked	Boolean	false	当前是否选中
  disabled	Boolean	false	是否禁用
  color	Color		radio 的颜色，同 css 的 color

  • picker 从底部弹起的滚动选择器 现支持 5 种选择器mode=""：普通选择器(默认selector)，多列选择器(multiSelector)，时间选择器(time)，日期选择器(date)，省市区选择器(region)

  普通：

  属性名	类型	默认值	说明	最低版本
  range	Array / Object Array	[]	mode 为 selector 或 multiSelector 时，range 有效
  range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
  value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
  bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
  disabled	Boolean	false	是否禁用
  bindcancel	EventHandle		取消选择或点遮罩层收起 picker 时触发

  多列

  属性名	类型	默认值	说明	最低版本
  range	二维 Array / 二维 Object Array	[]	mode 为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
  range-key	String		当 range 是一个 二维 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
  value	Array	[]	value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
  bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
  bindcolumnchange	EventHandle		某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从 0 开始），value 的值表示变更值的下标
  bindcancel	EventHandle		取消选择时触发	1.9.90
  disabled	Boolean	false	是否禁用

  时间

  属性名	类型	默认值	说明	最低版本
  value	String		表示选中的时间，格式为”hh:mm”
  start	String		表示有效时间范围的开始，字符串格式为”hh:mm”
  end	String		表示有效时间范围的结束，字符串格式为”hh:mm”
  bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
  bindcancel	EventHandle		取消选择时触发	1.9.90
  disabled	Boolean	false	是否禁用

  日期

  属性名	类型	默认值	说明	最低版本
  value	String	0	表示选中的日期，格式为”YYYY-MM-DD”
  start	String		表示有效日期范围的开始，字符串格式为”YYYY-MM-DD”
  end	String		表示有效日期范围的结束，字符串格式为”YYYY-MM-DD”
  fields	String	day	有效值 year,month,day，表示选择器的粒度
  bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
  bindcancel	EventHandle		取消选择时触发	1.9.90
  disabled	Boolean	false	是否禁用

  省市

  属性名	类型	默认值	说明	最低版本
  value	Array	[]	表示选中的省市区，默认选中每一列的第一个值
  custom-item	String		可为每一列的顶部添加一个自定义的项	1.5.0
  bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码
  bindcancel	EventHandle		取消选择时触发	1.9.90
  disabled	Boolean	false	是否禁用

  • picker-view>picker-view-column 嵌入页面的滚动选择器 只可放置<picker-view-column/>组件

  属性名	类型	说明	最低版本
  value	NumberArray	数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
  indicator-style	String	设置选择器中间选中框的样式
  indicator-class	String	设置选择器中间选中框的类名	1.1.0
  mask-style	String	设置蒙层的样式	1.5.0
  mask-class	String	设置蒙层的类名	1.5.0
  bindchange	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

  • slider 滑动选择器

  属性名	类型	默认值	说明	最低版本
  min	Number	0	最小值
  max	Number	100	最大值
  step	Number	1	步长，取值必须大于 0，并且可被(max - min)整除
  disabled	Boolean	false	是否禁用
  value	Number	0	当前取值
  color	Color	#e9e9e9	背景条的颜色（请使用 backgroundColor）
  selected-color	Color	#1aad19	已选择的颜色（请使用 activeColor）
  activeColor	Color	#1aad19	已选择的颜色
  backgroundColor	Color	#e9e9e9	背景条的颜色
  block-size	Number	28	滑块的大小，取值范围为 12 - 28	1.9.0
  block-color	Color	#ffffff	滑块的颜色	1.9.0
  show-value	Boolean	false	是否显示当前 value
  bindchange	EventHandle		完成一次拖动后触发的事件，event.detail = {value: value}
  bindchanging	EventHandle		拖动过程中触发的事件，event.detail = {value: value}

  • switch 开关选择器

  属性名	类型	默认值	说明
  checked	Boolean	false	是否选中
  type	String	switch	样式，有效值：switch, checkbox
  bindchange	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}
  color	Color		switch 的颜色，同 css 的 color

  • textarea (原生组件)

  属性名	类型	默认值	说明	最低版本
  value	String		输入框的内容
  placeholder	String		输入框为空时占位符
  placeholder-style	String		指定 placeholder 的样式
  placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类
  disabled	Boolean	false	是否禁用
  maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
  auto-focus	Boolean	false	自动聚焦，拉起键盘。
  focus	Boolean	false	获取焦点
  auto-height	Boolean	false	是否自动增高，设置 auto-height 时，style.height 不生效
  fixed	Boolean	false	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
  cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  cursor	Number		指定 focus 时的光标位置	1.5.0
  show-confirm-bar	Boolean	true	是否显示键盘上方带有”完成“按钮那一栏	1.6.0
  selection-start	Number	-1	光标起始位置，自动聚集时有效，需与 selection-end 搭配使用	1.9.0
  selection-end	Number	-1	光标结束位置，自动聚集时有效，需与 selection-start 搭配使用	1.9.0
  adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	1.9.90
  bindfocus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
  bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value, cursor}
  bindlinechange	EventHandle		输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
  bindinput	EventHandle		当键盘输入时，触发 input 事件，event.detail = {value, cursor}，bindinput 处理函数的返回值并不会反映到 textarea 上
  bindconfirm	EventHandle		点击完成时， 触发 confirm 事件，event.detail = {value: value}

• 导航 Nav

  • navigator 页面链接

  属性名	类型	默认值	说明	最低版本
  target	String		在哪个目标上发生跳转，默认当前小程序	2.0.7
  url	String		当前小程序内的跳转链接
  open-type	String	navigate	跳转方式
  delta	Number		当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
  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	version	release	当 target=”miniProgram”时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。	2.0.7
  hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
  hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	1.5.0
  hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
  hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
  bindsuccess	String		当 target=”miniProgram”时有效，跳转小程序成功	2.0.7
  binderror	String		当 target=”miniProgram”时有效，跳转小程序失败	2.0.7
  bindcomplete	String		当 target=”miniProgram”时有效，跳转小程序完成	2.0.7

  • functional-page-navigator

• 媒体组件

  • audio
  • image

  属性名	类型	默认值	说明	最低版本
  src	String		图片资源地址，支持云文件 ID（2.2.3 起）
  mode	String	‘scaleToFill’	9 种图片裁剪、4 种缩放的模式 见文档
  lazy-load	Boolean	false	图片懒加载。只针对 page 与 scroll-view 下的 image 有效	1.5.0
  binderror	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象 event.detail = {errMsg: ‘something wrong’}
  bindload	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象 event.detail = {height:’图片高度 px’, width:’图片宽度 px’}

  • video (原生组件)
  • camera (原生组件)
  • live-player (原生组件)
  • live-pusher (原生组件)

• 地图

  • map (原生组件)

• 画布

  • canvas (原生组件)

• 开放能力

  • open-data 用于展示微信开放的数据

  属性名	类型	默认值	说明
  type	String		开放数据类型 8 种有效值：groupName userNickName userAvatarUrl userGender userCity userProvince userCountry userLanguage 见文档
  open-gid	String		当 type=”groupName” 时生效, 群 id
  lang	String	en	当 type=”user*“ 时生效，以哪种语言展示 userInfo，有效值有：en, zh_CN, zh_TW

  • web-view
  • ad

原生组件的 使用限制 见官方文档

3 逻辑层

3.1 注册程序 App()

App({object}) 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

示例：

App({
  onLaunch: function (options) {
    // Do something initial when launch.
  },
  onShow: function (options) {
    // Do something when show.
  },
  onHide: function () {
    // Do something when hide.
  },
  onError: function (msg) {
    console.log(msg);
  },
  globalData: "I am global data",
});

属性	类型	描述	触发时机
onLaunch	Function	生命周期回调—监听小程序初始化	小程序初始化完成时（全局只触发一次）
onShow	Function	生命周期回调—监听小程序显示	小程序启动，或从后台进入前台显示时
onHide	Function	生命周期回调—监听小程序隐藏	小程序从前台进入后台时
onError	Function	错误监听函数	小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound	Function	页面不存在监听函数	小程序要打开的页面不存在时触发，会带上页面信息回调该函数
其他	Any	开发者可以添加任意的全局函数或数据到 Object 参数中，用 this 可以访问

• onLaunch / onShow(Object) 的 object 参数说明：

  字段	类型	说明
  path	String	打开小程序的路径
  query	Object	打开小程序的 query
  scene	Number	打开小程序的场景值
  shareTicket	String	shareTicket，详见 获取更多转发信息
  referrerInfo	Object	当场景为由从另一个小程序或公众号或 App 打开时，返回此字段
  referrerInfo.appId	String	来源小程序或公众号或 App 的 appId 支持此属性的场景值 scene 有：1020,1035,1036,1037,1038,1043
  referrerInfo.extraData	Object	来源小程序传过来的数据，scene=1037 或 1038 时支持

• onPageNotFound(Object) 的 object 参数说明：

  字段	类型	说明
  path	String	不存在页面的路径
  query	Object	打开不存在页面的 query
  isEntryPage	Boolean	是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面）

全局的getApp([allowDefault]) 的示例：

allowDefault 是类型为 boolean 的可选参数，在 App 未定义时返回默认实现。当 App 被调用时，默认实现中定义的属性会被覆盖合并到 App 中

// other.js
var appInstance = getApp();
console.log(appInstance.globalData); // I am global data

3.2 注册页面 Page(Object)

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

示例：

//index.js
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do some initialize when page load.
  },
  onReady: function () {
    // Do something when page ready.
  },
  onShow: function () {
    // Do something when page show.
  },
  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
  },
  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	Object	页面第一次渲染使用的初始数据
onLoad	Function	生命周期回调—监听页面加载
onShow	Function	生命周期回调—监听页面显示，页面显示/切入前台时触发。
onReady	Function	生命周期回调—监听页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide	Function	生命周期回调—监听页面隐藏，页面隐藏/切入后台时触发。如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload	Function	生命周期回调—监听页面卸载，如redirectTo或navigateBack到其他页面时。
onPullDownRefresh	Function	监听用户下拉刷新动作
onReachBottom	Function	监听用户上拉触底事件
onPageScroll	Function	监听用户滑动页面事件
onShareAppMessage	Function	监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为
onTabItemTap	Function	监听 tab 点击事件，当前是 tab 页时，点击 tab 时触发
其他	Any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

• data

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

  Page({
    data: {
      text: "init data",
      array: [{ msg: "1" }, { msg: "2" }],
    },
  });
  

• 声明周期回调函数

  • onLoad(query)

    页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取 打开当前页面路径中的参数 query。

  • onShow()

  • onReady()

  • onHide()

  • onUnload()

• 页面事件处理函数

  • onPullDownRefresh()

    • 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
    • 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
    • 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  • onReachBottom()

    • 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
    • 在触发距离内滑动期间，本事件只会被触发一次。

  • onPageScroll(scrollTop)

    scrollTop 是 类型为 Number 的参数 ，页面在垂直方向已滚动的距离（单位 px）

  • onShareAppMessage(Object)

    注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮 参数说明：

    参数	类型	说明	最低版本
    from	String	转发事件来源。 button：页面内转发按钮； menu：右上角转发菜单	1.2.4
    target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined	1.2.4
    webViewUrl	String	页面中包含<web-view>组件时，返回当前<web-view>的 url	1.6.4

    必须 return 一个 Object，用于自定义 转发内容

    字段	说明	默认值	最低版本
    title	转发标题	当前小程序名称
    path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
    imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及 JPG。显示图片长宽比是 5:4。	使用默认截图	1.5.0

    例：

    Page({
      onShareAppMessage: function (res) {
        if (res.from === "button") {
          // 来自页面内转发按钮
          console.log(res.target);
        }
        return {
          title: "自定义转发标题",
          path: "/page/user?id=123",
        };
      },
    });
    

  • onTabItemTap(Object)

    参数	类型	说明	最低版本
    index	String	被点击 tabItem 的序号，从 0 开始	1.9.0
    pagePath	String	被点击 tabItem 的页面路径	1.9.0
    text	String	被点击 tabItem 的按钮文字	1.9.0

• 组件事件处理函数

  即事件绑定

  <view bindtap="viewTap"> click me </view>
  

  Page({
    viewTap: function () {
      console.log("view tap");
    },
  });
  

this.route 返回当前页面的路径

this.setData(Object data[,Function callback]) 将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。function 指 setData 引起的界面更新渲染完毕后的回调函数。

3.3 路由机制

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

3.4 模块化

app.js 内是全局函数和变量；

通过module.exports.xxA = xx 来暴露接口；通过 var common = require('common.js') 来引入接口 暂不支持绝对路径

例子：

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`);
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`);
}

module.exports.sayHello = sayHello;
exports.sayGoodbye = sayGoodbye;

var common = require("common.js");
Page({
  helloMINA: function () {
    common.sayHello("MINA");
  },
  goodbyeMINA: function () {
    common.sayGoodbye("MINA");
  },
});

3.5 原生 API

提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

API