前言：参考文档 微信开放文档
一、起步
首先注册小程序。然后下载微信开发者工具。
1. 注册
2. 安装
下载稳定版 Stable，微信开发者工具
3. 获取 AppId
小程序管理登录，在菜单 “开发”-“开发设置” 看到小程序的 AppID
二、快速上手
1. 创建项目
创建初始项目。
2. 启动项目
通过预览、真机调试在手机查看小程序。
三、目录结构
1. 文件类型
基本由 .json、.wxml、.wxss、.js 构成。
1.1 .json 文件
配置文件。app.json 全局配置、project.config.json 个性化配置、page.json 页面配置
1.2 .wxml 文件
模板文件。结合基础组件、事件系统，可以构建出页面的结构。
1.3 .wxss 文件
样式文件。新增了尺寸单位 rpx。提供了全局的样式 app.wxss 和局部样式 page.wxss。
1.4 .js 文件
脚本文件。处理用户交互。对数据进行操作。
四、配置详情
1. app.json
小程序的全局配置。可以配置小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。详情配置
// pages：必填，页面路径列表
// sitemapLocation：必填，指明 sitemap.json 的位置
// entryPagePath：小程序默认启动首页
// window：全局的默认窗口表现
// | navigationBarBackgroundColor：导航栏背景颜色，如 #000000
// | navigationBarTextStyle：导航栏标题、状态栏颜色，仅支持 black / white
// | navigationBarTitleText：导航栏标题文字内容
// | navigationStyle：导航栏样式，仅支持：default 默认样式、custom 自定义导航栏，只保留右上角胶囊按钮。
// | homeButton：在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键
// | backgroundColor：窗口的背景色
// | backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light
// | backgroundColorTop：顶部窗口的背景色，仅 iOS 支持
// | backgroundColorBottom：底部窗口的背景色，仅 iOS 支持
// | enablePullDownRefresh：是否开启全局的下拉刷新。
// | onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位为 px。
// | pageOrientation：屏幕旋转设置，支持 auto / portrait / landscape
// | restartStrategy：重新启动策略配置
// | initialRenderingCache：页面初始渲染缓存配置，支持 static / dynamic
// | visualEffectInBackground：切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
// | handleWebviewPreload：控制预加载下个页面的时机。支持 static / manual / auto
// tabBar：底部 tab 栏的表现
// | color：必填，tab 上的文字默认颜色，仅支持十六进制颜色
// | selectedColor：必填，tab 上的文字选中时的颜色，仅支持十六进制颜色
// | backgroundColor：必填，tab 的背景色，仅支持十六进制颜色
// | list：必填，tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
// | pagePath：必填，页面路径，必须在 pages 中先定义
// | text：必填，tab 上按钮文字
// | iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
// | selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
// | borderStyle：tabbar 上边框的颜色， 仅支持 black / white
// | position：tabBar 的位置，仅支持 bottom / top
// | custom：自定义 tabBar
// networkTimeout：网络超时时间
// | request：wx.request 的超时时间，单位：毫秒。
// | connectSocket：wx.connectSocket 的超时时间，单位：毫秒。
// | uploadFile：wx.uploadFile 的超时时间，单位：毫秒。
// | downloadFlie：wx.downloadFile 的超时时间，单位：毫秒。
{
"pages": ["pages/index/index", "pages/logs/logs"],
"sitemapLocation": "",
"entryPagePath": "pages/index/index",
"window": {
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "",
"navigationStyle": "custom",
"homeButton": false,
"backgroundColor": "#ffffff",
"backgroundTextStyle": "dark",
"backgroundColorTop": "#ffffff",
"backgroundColorBottom": "#ffffff",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50,
"pageOrientation": "portrait",
"restartStrategy": "homePage",
"initialRenderingCache": "",
"visualEffectInBackground": "none",
"handleWebviewPreload": "static"
},
"tabBar": {
"color": "#ffffff",
"selectedColor": "#000000",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "",
"text": "",
"iconPath": "",
"selectedIconPath": ""
}
],
"borderStyle": "black",
"position": "bottom",
"custom": false
},
"networkTimeout": {
"request": 60000,
"connectSocket": 60000,
"uploadFile": 60000,
"downloadFlie": 60000
}
}2. project.config.json
个性化配置。编辑器的颜色、代码上传时自动压缩等等一系列选项。当你换电脑工作时，开发者工具会根据这个文件帮你恢复之前项目的个性化配置。详情配置
// compileType：编译类型，miniprogram 当前为普通小程序项目，plugin当前为小程序插件项目
// setting：项目设置
// | condition：启用条件编译
// | es6：是否启用 es6 转 es5
// | enhance：是否打开增强编译
// | postcss：上传代码时样式是否自动补全
// | minified：上传代码时是否自动压缩脚本文件
// | minifyWXSS：上传代码时是否自动压缩样式文件
// | minifyWXML：上传代码时是否自动压缩 WXML 文件
// | swc：开启 swc 编译模式
// | uglifyFileName：上传时进行代码保护
// | ignoreUploadUnusedFiles：上传时是否过滤无依赖文件
// | autoAudits：是否自动运行体验评分
// | urlCheck：是否检查安全域名和 TLS 版本
// | compileHotReLoad：是否开启文件保存后自动热重载
// | preloadBackgroundData：小程序加载时是否数据预拉取
// | lazyloadPlaceholderEnable：是否启用懒注入占位组件调试
// | useStaticServer：仅在小游戏项目有效，是否开启静态资源服务器
// | bigPackageSizeSupport：预览及真机调试的时主包、分包体积上限调整为4M（小程序）、8M（小游戏）
// | skylineRenderEnable：是否开启 skyline 渲染调试
// libVersion：基础库版本
// appid：项目的 appid
// projectname：项目名字
// packOptions：打包配置选项
// debugOptions：调试配置选项
// watchOptions：文件监听配置设置
// scripts：自定义预处理
// staticServerOptions：仅在小游戏项目中有效
// editorSetting：指定自动生成的文件的 tabIndent 和 tabSize
// skeletonConfig：骨架屏相关设置
{
"compileType": "miniprogram",
"setting": {
"condition": false,
"es6": false,
"enhance": false,
"postcss": false,
"minified": false,
"minifyWXSS": false,
"minifyWXML": false,
"swc": false,
"uglifyFileName": false,
"ignoreUploadUnusedFiles": false,
"autoAudits": true,
"urlCheck": true,
"compileHotReLoad": true,
"preloadBackgroundData": true,
"lazyloadPlaceholderEnable": true,
"useStaticServer": true,
"bigPackageSizeSupport": true,
"skylineRenderEnable": true
},
"libVersion": "",
"appid": "",
"projectname": "",
"packOptions": {},
"debugOptions": {},
"watchOptions": {},
"scripts": {},
"staticServerOptions": {},
"editorSetting": {},
"skeletonConfig": {}
}3. page.json
小程序单页配置。每个单页都有 .json 文件，来对当前页面窗口进行配置，页面中配置项会覆盖 app.json 的相同配置项。详情配置
// navigationBarBackgroundColor：导航栏背景颜色，如 #000000
// navigationBarTextStyle：导航栏标题、状态栏颜色，仅支持 black / white
// navigationBarTitleText：导航栏标题文字内容
// navigationStyle：导航栏样式，仅支持以下值：default 默认样式，custom 自定义导航栏，只保留右上角胶囊按钮。
// homeButton：在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键
// backgroundColor：窗口的背景色
// backgroundColorContent：页面容器背景色
// backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "",
"navigationStyle": "default",
"homeButton": false,
"backgroundColor": "#ffffff",
"backgroundColorContent": "#RRGGBBAA",
"backgroundTextStyle": "dark"
}五、WXML 模板
1. 数据绑定
<!--wxml-->
<view> {{message}} </view>// page.js
Page({
data: {
message: "Hello MINA!",
},
});2. 列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>// page.js
Page({
data: {
array: [1, 2, 3, 4, 5],
},
});3. 条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>// page.js
Page({
data: {
view: "MINA",
},
});4. 模板
<!--wxml-->
<template name="staffName">
<view> FirstName: {{firstName}}, LastName: {{lastName}} </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>// page.js
Page({
data: {
staffA: { firstName: "Hulk", lastName: "Hu" },
staffB: { firstName: "Shang", lastName: "You" },
staffC: { firstName: "Gideon", lastName: "Lin" },
},
});5. 双向绑定
5.1 普通双向绑定
<input model:value="{{myValue}}" />5.1 自定义组件双向绑定
<custom-component model:my-value="{{pageValue}}" />// custom-component.js
Component({
properties: {
myValue: String,
},
methods: {
update: function () {
// 更新 myValue
this.setData({
myValue: "leaf",
});
},
},
});6. 事件
bindtap：点击事件
catchtap：点击事件，阻止事件冒泡
touchstart：手指触摸动作开始
touchmove：手指触摸后移动
touchcancel：手指触摸动作被打断，如来电提醒，弹窗
touchend：手指触摸动作结束
tap：手指触摸后马上离开
longpress：手指触摸后，超过 350ms 再离开，如果指定了事件回调函数并触发了这个事件，tap 事件将不被触发
longtap：手指触摸后，超过 350ms 再离开（推荐使用 longpress 事件代替）
transitionend：会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart：会在一个 WXSS animation 动画开始时触发
animationiteration：会在一个 WXSS animation 一次迭代结束时触发
animationend：会在一个 WXSS animation 动画完成时触发
touchforcechange：在支持 3D Touch 的 iPhone 设备，重按时会触发
六、内置组件
1. 容器组件
1.1 image
图片，支持 JPG、PNG、SVG、WEBP、GIF 等格式。
<!--
- 通用属性
src：图片资源地址 。
mode：图片裁剪、缩放的模式
| scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
| aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
| aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
| widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
| heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
| top：裁剪模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持。
| bottom：裁剪模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持。
| center：裁剪模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持。
| left：裁剪模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持。
| right：裁剪模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持。
| top left：裁剪模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持。
| top right：裁剪模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持。
| bottom left：裁剪模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持。
| bottom right： 裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持。
-->
<image
style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="{{item.mode}}"
src="{{src}}"
></image>1.2 view
视觉容器
<view></view>1.3 match-media
media query 匹配检测节点。通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
<!--
min-width：页面最小宽度（ px 为单位）
max-width：页面最大宽度（ px 为单位）
min-height：页面最小高度（ px 为单位）
max-height：页面最大高度（ px 为单位）
-->
<match-media min-width="300" max-width="600">
<view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
</match-media>
<match-media min-height="400" orientation="landscape">
<view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>1.4 movable-area
movable-view 的可移动区域
<!--
scale-area：当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area
-->
<movable-area scale-area="{{isScaleArea}}">
<movable-view class="max" direction="all">text</movable-view>
</movable-area>1.5 movable-view
可移动的视图容器。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
<!--
direction：movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia：movable-view是否带有惯性
out-of-bounds：超过可移动区域后，movable-view是否还可以移动
x：定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画；单位支持px（默认）、rpx；
y：定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画；单位支持px（默认）、rpx；
damping：阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction：摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled：是否禁用
scale：是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min：定义缩放倍数最小值
scale-max：定义缩放倍数最大值
scale-value：定义缩放倍数，取值范围为 0.1 - 10
animation：是否使用动画
bindchange：拖动过程中触发的事件，event.detail = {x, y, source}
bindscale：缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持
htouchmove：初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove：初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch
-->
<movable-area>
<movable-view
direction="{{direction}}"
inertia="{{isInertia}}"
out-of-bounds="{{isOutOfBounds}}"
x="100"
y="100"
damping="20"
friction="2"
disabled="{{isDsiabled}}"
scale="{{isScale}}"
scale-min="0.1"
scale-max="10"
scale-value="1"
animation="{{isAnimation}}"
bindchange="onChange"
bindscale="onScale"
htouchmove="onHtouchMove"
vtouchmove="onVtouchMove"
>text</movable-view
>
</movable-area>1.6 page-container
页面容器。类似于 popup 弹出层，页面内容存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。
<!--
show：是否显示容器组件
duration：动画时长，单位毫秒
z-index：z-index 层级
overlay：是否显示遮罩层
position：弹出位置，可选值为 top bottom right center
round：是否显示圆角
close-on-slide-down：是否在下滑一段距离后关闭
overlay-style：自定义遮罩层样式
custom-style：自定义弹出层样式
bind:beforeenter：进入前触发
bind:enter：进入中触发
bind:afterenter：进入后触发
bind:beforeleave：离开前触发
bind:leave：离开中触发
bind:afterleave：离开后触发
bind:clickoverlay：点击遮罩层时触发
-->
<page-container
show="{{isShow}}"
duration="{{duration}}"
z-index="{{zIndex}}"
overlay="{{overlay}}"
position="{{position}}"
round="{{isRound}}"
close-on-slide-down="{{isCloseOnSlideDown}}"
overlay-style="{{overlayStyle}}"
custom-style="{{customStyle}}"
bindbeforeenter="onBeforeEnter"
bindenter="onEnter"
bindafterenter="onAfterEnter"
bindbeforeleave="onBeforeLeave"
bindleave="onLeave"
bindafterleave="onAfterLeave"
bindclickoverlay="onClickOverlay"
>
<view class="detail-page">
<button type="primary" bindtap="exit">推出</button>
</view>
</page-container>1.7 root-portal
使整个子树从页面中脱离出。类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
<!--
enable：是否从页面中脱离出来
-->
<root-portal root-portal="{{isRootPortal}}"> </root-portal>1.8 scroll-view
可滚动视图区域。使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为 px，2.4.0 起支持传入单位(rpx/px)。
<!--
scroll-x：允许横向滚动
bind:scroll：滚动事件，多返回 isDrag 字段，仅支持非 worklet 的组件方法作为回调。event.detail = { isDrag }
-->
<scroll-view
class="scroll-view_H"
scroll-x="true"
bindscroll="scroll"
style="width: 100%"
>
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>1.9 swiper
滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。
<!--
autoplay：是否自动切换
interval：自动切换时间间隔
duration：滑动动画时长
-->
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
>
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>1.10 swiper-item
仅可放置在 swiper 组件中，宽高自动设置为 100%。
<!--
item-id：该 swiper-item 的标识符
skip-hidden-item-layout：是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
-->
<swiper>
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view
class="swiper-item {{item}}"
item-id="{{item-id}}"
skip-hidden-item-layout="{{isSkipHiddenItemLayout}}"
></view>
</swiper-item>
</block>
</swiper>2. 基础组件
2.1 icon
图标组件
<!--
type：icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size：icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color：icon的颜色，同css的color
-->
<icon class="icon-box-img" type="success" size="93"></icon>2.2 progress
进度条。组件属性的长度单位默认为 px，2.4.0 起支持传入单位(rpx/px)。
<!--
percent：百分比0~100
show-info：在进度条右侧显示百分比
border-radius：圆角大小
font-size：右侧百分比字体大小
stroke-width：进度条线的宽度
color：进度条颜色（请使用activeColor）
activeColor：已选择的进度条的颜色
backgroundColor：未选择的进度条的颜色
active：进度条从左往右的动画
active-mode：backwards: 动画从头播；forwards：动画从上次结束点接着播
duration：进度增加1%所需毫秒数
bindactiveend：动画完成事件
-->
<progress percent="20" show-info stroke-width="3" />2.3 rich-text
富文本。
<!--
- 通用属性
nodes：节点列表/HTML String
space：显示连续空格
user-select：文本是否可选，该属性会使节点显示为 block
- Skyline 特有属性
mode：布局兼容模式
-->
<rich-text nodes="{{htmlSnip}}"></rich-text>2.4 text
文本。
<!--
- 通用属性
selectable：文本是否可选 (已废弃)
user-select：文本是否可选，该属性会使文本节点显示为 inline-block
- Skyline 特有属性
overflow：文本溢出处理
max-lines：限制文本最大行数
- WebView 特有属性
space：显示连续空格
decode：是否解码
-->
<text>{{text}}</text>3. 表单组件
3.1 button
按钮。
<!--
size：按钮的大小
type：按钮的样式类型
plain：按钮是否镂空，背景色透明
disabled：是否禁用
loading：名称前是否带 loading 图标
-->
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>3.2 checkbox
多选项目。
<!--
value：checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked：当前是否选中，可用来设置默认选中
-->
<checkbox value="cb" checked="true" />选中3.3 checkbox-group
多项选择器，内部由多个 checkbox 组成。
<!--
bindchange：checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
-->
<checkbox-group bindchange="checkboxChange">
<label
class="weui-cell weui-check__label"
wx:for="{{items}}"
wx:key="{{item.value}}"
>
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}" />
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>3.4 editor
富文本编辑器，可以对图片、文字进行编辑。
3.5 form
表单。
<!--
catchsubmit：携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
catchreset：表单重置时会触发 reset 事件
-->
<form catchsubmit="formSubmit" catchreset="formReset"></form>3.6 input
输入框
<input class="weui-input" auto-focus placeholder="将会获取焦点" />3.7 keyboard-accessory
设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
<textarea hold-keyboard="{{true}}">
<keyboard-accessory class="container" style="height: 50px;">
<cover-view bindtap="tap" style="flex: 1; background: green;">1</cover-view>
<cover-view bindtap="tap" style="flex: 1; background: red;">2</cover-view>
</keyboard-accessory>
</textarea>3.8 label
用来改进表单组件的可用性。
<label>
<checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
<text class="label-1-text">{{item.value}}</text>
</label>3.9 picker
从底部弹起的滚动选择器。
<!--
range：mode 为 selector 或 multiSelector 时，range 有效
value:表示选择了 range 中的第几个（下标从 0 开始）
bindchange：value 改变时触发 change 事件，event.detail = {value}
-->
<view class="section">
<view class="section__title">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker"> 当前选择：{{array[index]}} </view>
</picker>
</view>3.10 picker-view、picker-view-column
嵌入页面的滚动选择器、滚动选择器子项。
<picker-view
indicator-style="height: 50px;"
style="width: 100%; height: 300px;"
value="{{value}}"
bindchange="bindChange"
>
<picker-view-column>
<view
wx:for="{{years}}"
wx:key="{{years}}"
style="line-height: 50px; text-align: center;"
>{{item}}年</view
>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{months}}"
wx:key="{{months}}"
style="line-height: 50px; text-align: center;"
>{{item}}月</view
>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{days}}"
wx:key="{{days}}"
style="line-height: 50px; text-align: center;"
>{{item}}日</view
>
</picker-view-column>
<picker-view-column>
<view class="icon-container">
<image class="picker-icon" src="../lib/daytime.png" />
</view>
<view class="icon-container">
<image class="picker-icon" src="../lib/night.png" />
</view>
</picker-view-column>
</picker-view>3.11 radio、radio-group
单选项目、单项选择器，内部由多个 radio 组成。
<radio-group bindchange="radioChange">
<label
class="weui-cell weui-check__label"
wx:for="{{items}}"
wx:key="{{item.value}}"
>
<view class="weui-cell__hd">
<radio value="{{item.value}}" checked="true" />
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</radio-group>3.12 slider
滑动选择器。
<slider
bindchange="slider1change"
left-icon="cancel"
right-icon="success_no_circle"
/>3.13 switch
开关选择器。
<switch checked="{{switch1Checked}}" bindchange="switch1Change" />3.14 textarea
多行输入框。
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />4. 导航组件
4.1 functional-page-navigator
仅在插件中有效，用于跳转到插件功能页。
<!--
name：要跳转到的功能页
bindsuccess：功能页返回，且操作成功时触发， detail 格式与具体功能页相关
-->
<functional-page-navigator
name="loginAndGetUserInfo"
bind:success="loginSuccess"
>
<button>登录到插件</button>
</functional-page-navigator>4.2 navigator
页面链接。
<!--
url：当前小程序内的跳转链接
hover-class：指定点击时的样式类，当hover-class="none"时，没有点击态效果
open-type：跳转方式
target：在哪个目标上发生跳转，默认当前小程序
app-id：当target="miniProgram"且open-type="navigate"时有效，要打开的小程序 appId
path：当target="miniProgram"且open-type="navigate"时有效，打开的页面路径，如果为空则打开首页
extra-data：当target="miniProgram"且open-type="navigate/navigateBack"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情
version：当target="miniProgram"且open-type="navigate"时有效，要打开的小程序版本
-->
<view class="btn-area">
<navigator
url="/page/navigate/navigate?title=navigate"
hover-class="navigator-hover"
>跳转到新页面</navigator
>
<navigator
url="../../redirect/redirect/redirect?title=redirect"
open-type="redirect"
hover-class="other-navigator-hover"
>在当前页打开</navigator
>
<navigator
url="/page/index/index"
open-type="switchTab"
hover-class="other-navigator-hover"
>切换 Tab</navigator
>
<navigator
target="miniProgram"
open-type="navigate"
app-id=""
path=""
extra-data=""
version="release"
>打开绑定的小程序</navigator
>
</view>4.3 navigation-bar
页面导航条配置节点，用于指定导航栏的一些属性。
<!--
title：导航条标题
loading：是否在导航条显示 loading 加载提示
front-color：导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
background-color：导航条背景颜色值，有效值为十六进制颜色
color-animation-duration：改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果）
color-animation-timing-func：改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut
-->
<navigation-bar
title="{{nbTitle}}"
loading="{{nbLoading}}"
front-color="{{nbFrontColor}}"
background-color="{{nbBackgroundColor}}"
color-animation-duration="2000"
color-animation-timing-func="easeIn"
/>5. 媒体组件
5.1 audio
音频。
<!--
poster：默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name：默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author：默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
src：要播放音频的资源地址
id：audio 组件的唯一标识符
controls：是否显示默认控件
loop：是否循环播放
-->
<audio
poster="{{poster}}"
name="{{name}}"
author="{{author}}"
src="{{src}}"
id="myAudio"
controls
loop
></audio>5.2 camera
系统相机。
<!--
device-position：摄像头朝向
flash：闪光灯，值为auto, on, off
binderror：用户不允许使用摄像头时触发
-->
<camera
device-position="back"
flash="off"
binderror="error"
style="width: 100%; height: 300px;"
></camera>5.3 channel-live
小程序内嵌视频号直播组件，展示视频号直播状态和封面，并无弹窗跳转至视频号。
5.4 channel-video
小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号。
5.5 live-player
实时音视频播放（v2.9.1 起支持同层渲染）。
<!--
src：音视频地址。目前仅支持 flv, rtmp 格式
mode：模式
autoplay：自动播放
bindstatechange：播放状态变化事件，detail = {code}
-->
<live-player
src="https://domain/pull_stream"
mode="RTC"
autoplay
bindstatechange="statechange"
binderror="error"
style="width: 300px; height: 225px;"
/>5.6 live-pusher
实时音视频录制（v2.9.1 起支持同层渲染）。
<!--
url：推流地址。目前仅支持 rtmp 格式
mode：SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话
autopush：自动推流
bindstatechange：状态变化事件，detail = {code}
-->
<live-pusher
url="https://domain/push_stream"
mode="RTC"
autopush
bindstatechange="statechange"
style="width: 300px; height: 225px;"
/>5.7 video
视频（v2.4.0 起支持同层渲染）。
<!--
src：要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID（2.3.0）
binderror：视频播放出错时触发
danmu-list：弹幕列表
enable-danmu：是否展示弹幕，只在初始化时有效，不能动态变更
danmu-btn：是否显示弹幕按钮，只在初始化时有效，不能动态变更
show-center-play-btn：是否显示视频中间的播放按钮
show-play-btn：是否显示视频底部控制栏的播放按钮
controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
picture-in-picture-mode：设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）
bindenterpictureinpicture：播放器进入小窗
bindleavepictureinpicture：播放器退出小窗
-->
<video
id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
binderror="videoErrorCallback"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
show-center-play-btn="{{false}}"
show-play-btn="{{true}}"
controls
picture-in-picture-mode="{{['push', 'pop']}}"
bindenterpictureinpicture="bindVideoEnterPictureInPicture"
bindleavepictureinpicture="bindVideoLeavePictureInPicture"
></video>5.8 voip-room
多人音视频对话。需用户授权 scope.camera、scope.record。
<!--
openid：进入房间用户的 openid
mode：对话窗口类型
-->
<voip-room
openid="{{item}}"
mode="{{selfOpenId === item ? 'camera' : 'video'}}"
>
</voip-room>6. 地图组件
6.1 map
地图 v2.7.0 起支持同层渲染。
7. 画布
7.1 canvas
画布。
<!--
type：指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0)
-->
<canvas type="2d" id="myCanvas"></canvas>8. 开放组件
8.1 ad、ad-custom
Banner 广告、原生模板 广告。
8.2 official-account
公众号关注组件。
<official-account></official-account>8.3 open-data
用于展示微信开放的数据。
<!--
type：开放数据类型
open-gid：当 type="groupName" 时生效, 群id
-->
<open-data type="groupName" open-gid="xxxxxx"></open-data>8.4 web-view
承载网页的容器。
七、JS 逻辑交互
1. app.js
onLaunch：生命周期回调——监听小程序初始化。
onShow：生命周期回调——监听小程序启动或切前台。
onHide：生命周期回调——监听小程序切后台。
onError：错误监听函数。
onPageNotFound：页面不存在监听函数。
onUnhandledRejection：未处理的 Promise 拒绝事件监听函数。
onThemeChange：监听系统主题变化
其他：可以定义全局变量，通过 getApp() 访问
App({
onLaunch(options) {
// Do something initial when launch.
},
onShow(options) {
// Do something when show.
},
onHide() {
// Do something when hide.
},
onError(msg) {
console.log(msg);
},
globalData: "I am global data",
});2. page.js
data：页面第一次渲染使用的初始数据。
onLoad：页面加载时触发。
onShow：页面显示/切入前台时触发。
onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide：页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload：页面卸载时触发。
onRouteDone：路由动画完成时触发。
onPullDownRefresh：监听用户下拉刷新事件。
onReachBottom：监听用户上拉触底事件。
onPageScroll：监听用户滑动页面事件。
onAddToFavorites：监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
onShareAppMessage：监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
onShareTimeline：监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。
onResize：页面尺寸改变时触发。
onTabItemTap：点击 tab 时触发
onSaveExitState：每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。
注意：修改 data 里的数据需要使用 setData()。
// index.js
Page({
data: {
text: "init data",
num: 0,
array: [{ text: "init data" }],
object: {
text: "init data",
},
},
changeText: function () {
// this.data.text = 'changed data' // 不要直接修改 this.data
// 应该使用 setData
this.setData({
text: "changed data",
});
},
changeNum: function () {
// 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
this.data.num = 1;
this.setData({
num: this.data.num,
});
},
changeItemInArray: function () {
// 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
this.setData({
"array[0].text": "changed data",
});
},
changeItemInObject: function () {
this.setData({
"object.text": "changed data",
});
},
addNewField: function () {
this.setData({
"newField.text": "new data",
});
},
});3. 自定义组件
behaviors：类似于 mixins 和 traits 的组件间代码复用机制
properties：组件的对外属性，是属性名到属性设置的映射表
data：组件的内部数据，和 properties 一同用于组件的模板渲染
lifetimes：组件生命周期声明对象
pageLifetimes：组件所在页面的生命周期
Component({
behaviors: [],
properties: {
myProperty: {
type: String,
value: "",
},
myProperty2: String,
},
data: {},
lifetimes: {
created: function () {}, // 在组件实例刚刚被创建时执行
attached: function () {}, // 在组件实例进入页面节点树时执行
ready: function () {}, // 在组件在视图层布局完成后执行
moved: function () {}, // 在组件实例被移动到节点树另一个位置时执行
detached: function () {}, // 在组件实例被从页面节点树移除时执行
error: function () {}, // 每当组件方法抛出错误时执行
},
pageLifetimes: {
show: function () {}, // 组件所在的页面被展示时执行
hide: function () {}, // 组件所在的页面被隐藏时执行
resize: function () {}, // 组件所在的页面尺寸变化时执行
routeDone: function () {}, // 组件所在页面路由动画完成时执行
},
methods: {
onMyButtonTap: function () {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
});
},
// 内部方法建议以下划线开头
_myPrivateMethod: function () {
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
"A[0].B": "myPrivateData",
});
},
_propertyChange: function (newVal, oldVal) {},
},
});4. 页面跳转
// index/index.js
Page({
wxNavAction: function () {
wx.navigateTo({
url: "./new-page",
});
},
routerNavAction: function () {
this.pageRouter.navigateTo({
url: "./new-page",
});
},
});八、API
自行查找 小程序 API
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
