微信小程序简单总结

一、配置项

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

navigationBarBackgroundColor						   导航栏背景颜色，如 #000000	
navigationBarTextStyle	        					   导航栏标题颜色，仅支持 black / white	
navigationBarTitleText	string		                   导航栏标题文字内容	
navigationStyle										   导航栏样式，仅支持以下值：
default 											   默认样式
custom 											       自定义导航栏，只保留右上角胶囊按钮。
backgroundColorf									   窗口的背景色	
backgroundTextStyle									   下拉 loading 的样式，仅支持 dark / light	
backgroundColorTop									   顶部窗口的背景色，
backgroundColorBottom								   底部窗口的背景色
enablePullDownRefresh								   是否开启全局的下拉刷新。
onReachBottomDistance								   页面上拉触底事件触发时距页面底部距离，单位为px。
pageOrientation										   屏幕旋转设置，支持 auto / portrait / landscape 

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

color 						 tab 上的文字默认颜色，仅支持十六进制颜色	
selectedColor		    	 tab 上的文字选中时的颜色，仅支持十六进制颜色	
backgroundColor	  		  	 tab 的背景色，仅支持十六进制颜色	
borderStyle					 tabbar上边框的颜色， 仅支持 black / white	
list						 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab	
position					 tabBar的位置，仅支持 bottom / top	
custom	   				     自定义 tabBar，见详情

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

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

3.networkTimeout
各类网络请求的超时时间，单位均为毫秒。

request				60000	wx.request 的超时时间，单位：毫秒。
connectSocket		60000	wx.connectSocket 的超时时间，单位：毫秒。
uploadFile			60000	wx.uploadFile 的超时时间，单位：毫秒。
downloadFile		60000	wx.downloadFile 的超时时间，单位：毫秒。

二、常用语法

1.数据绑定
WXML 中的动态数据均来自对应 Page 的 data。

简单绑定：
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

<view>{{ message }}</view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

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

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

2.列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表：

<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>

block wx:for
类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

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

1.字符串，代表在 for 循环的 array 中 item 的某个 property，
  该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
  当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，
  以确保使组件保持自身的状态，并且提高列表渲染时的效率。

**如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
**

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

<view wx:if="{{condition}}">True</view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

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

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

三、常见组件

1.view组件（相当于html中的div）

视图容器

hover-class	string				指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation			指定是否阻止本节点的祖先节点出现点击态
hover-start-time				按住后多久出现点击态，单位毫秒
hover-stay-time					手指松开后点击态保留时间，单位毫秒

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

indicator-dots							是否显示面板指示点
indicator-color							指示点颜色
indicator-active-color					当前选中的指示点颜色
autoplay								是否自动切换
current	number							当前所在滑块的 index	
interval								自动切换时间间隔
duration								滑动动画时长	
circular								是否采用衔接滑动	
vertical								滑动方向是否为纵向
previous-margin							前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin								后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items					同时显示的滑块数量	
skip-hidden-item-layout					是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easing-function							指定 swiper 切换缓动动画类型
bindchange								current 改变时会触发 change 事件，event.detail = {current, source}	
bindtransition							swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish						动画结束时会触发 animationfinish 事件，event.detail 同上

easing-function 的合法值

default				默认缓动函数	
linear				线性动画	
easeInCubic			缓入动画	
easeOutCubic		缓出动画	
easeInOutCubic		缓入缓出动画

从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：

autoplay 自动播放导致swiper变化；
touch 用户划动引起swiper变化；
其它原因将用空字符串表示。

3.text组件
文本

selectable				文本是否可选	
space					显示连续空格
decode					是否解码

space 的合法值

ensp		中文字符空格一半大小	
emsp		中文字符空格大小	
nbsp		根据字体设置的空格大小

1.tip: decode可以解析的有   < > & '    
2.tip: 各个操作系统的空格标准并不一致。
3.tip: 组件内只支持 ` 嵌套。
4.tip: 除了文本节点以外的其他节点都无法长按选中。
5.bug: 基础库版本低于 2.1.0 时， 组件内嵌的 style 设置可能不会生效。

4.navigator组件
页面链接

target							在哪个目标上发生跳转，默认当前小程序	
url								当前小程序内的跳转链接	
open-type						跳转方式	
delta							当 open-type 为 'navigateBack' 时有效，表示回退的层数	
app-id							当target="miniProgram"时有效，要打开的小程序 appId	
path							当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页	
extra-data						当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
version							当target="miniProgram"时有效，要打开的小程序版本	
hover-class						指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation			指定是否阻止本节点的祖先节点出现点击态	
hover-start-time				按住后多久出现点击态，单位毫秒
hover-stay-time					手指松开后点击态保留时间，单位毫秒	
bindsuccess						当target="miniProgram"时有效，跳转小程序成功
bindfail						当target="miniProgram"时有效，跳转小程序失败
bindcomplete					当target="miniProgram"时有效，跳转小程序完成

target 的合法值

self				当前小程序	
miniProgram			其它小程序

open-type 的合法值

navigate			对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能	
redirect			对应 wx.redirectTo 的功能	
switchTab			对应 wx.switchTab 的功能	
reLaunch			对应 wx.reLaunch 的功能	
navigateBack		对应 wx.navigateBack 的功能	
exit				退出小程序，target="miniProgram"时生效

version 的合法值

develop		开发版	
trial		体验版	
release		正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

使用限制
1.需要用户确认跳转 从 2.3.0 版本开始，在跳转至其他小程序前，将统一增加弹窗，询问是否跳转，用户确认后 才可以跳转其他小程序。如果用户点击取消，则回调 fail cancel。
2.每个小程序可跳转的其他小程序数量限制为不超过 10 个 从 2.4.0 版本以及指定日期（具体待定）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见 配置。调用此接口时，所跳转的 appId 必须在配置列表中，否则回调 fail appId “${appId}” is not in navigateToMiniProgramAppIdList。

tip：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色

5.image组件
图片。支持JPG、PNG、SVG格式，2.3.0 起支持云文件ID。

src					图片资源地址
mode				图片裁剪、缩放的模式
lazy-load			图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
binderror			当错误发生时触发，，event.detail = {errMsg}
bindload			当图片载入完毕时触发，event.detail = {height, width}

mode 的合法值

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

1.tip：image组件默认宽度300px、高度225px
2.tip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

注：详细讲解可前往官网查看