web前端 -- 微信小程序总结
滚动 scroll-view
1、属性：
scroll-x：横向滚动，默认为 false。
scroll-y：纵向滚动，默认为 false。
upper-threshold：距顶部/左边多远时，触发 scrolltoupper 事件。
lower-threshold：距底部/右边多远时，触发 scrolltolower 事件。
scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。
scroll-with-animation：在设置滚动条位置时使用动画过渡，默认为 false。
paging-enabled：分页滑动效果 (同时开启 enhanced 属性后生效)，默认为 false。
2、事件：
bindscrolltoupper：滚动到顶部/左边时触发。
bindscrolltolower：滚动到底部/右边时触发。
bindscroll：滚动时触发，event.detail。
按钮 button
1、属性：
size：按钮的大小，（default：默认，mini：小尺寸）。
type：按钮的样式类型，（default：默认白色，primary：绿色，warn：红色）。
plain：按钮是否镂空，背景色透明，默认为 false。
disabled：是否禁用，默认为 false。
loading：名称前是否带 loading 图标，默认为 false。
form-type：用于form组件，点击触发form事件，（submit：提交，reset：重置）。
open-type：微信开放能力，（contact：客服会话，getPhoneNumber：获取用户手机号，launchApp：APP，openSetting：授权设置页，feedback：“意见反馈”页面）。
hover-class：指定按钮按下去的样式类。
hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态，默认为 false。
show-message-card：是否显示会话内消息卡片。
2、事件：
bindcontact：客服消息回调，open-type="contact"时有效。
bindgetphonenumber：获取用户手机号回调，open-type=getPhoneNumber时有效。
binderror：当使用开放能力时，发生错误的回调，open-type=launchApp时有效。
bindopensetting：在打开授权设置页后回调，open-type=openSetting时有效。
bindlaunchapp：打开 APP 成功的回调，open-type=launchApp时有效。
输入框 input
1、属性：
value：输入框的初始内容；
type：类型，（text：文本，number：数字，idcard：身份证，digit：小数点）；
placeholder：输入框为空时的提示；
placeholder-style：指定的样式；
placeholder-class：指定的样式类；
disabled：是否禁用，默认为 false；
maxlength：最大输入长度，设置为 -1 的时候不限制最大长度；
focus：获取焦点；
confirm-type：键盘右下角按钮的文字，（send：发送，search：搜索，next：下一个，go：前往，done：完成）。
2、事件：
bindinput：键盘输入时触发，event.detail。
bindfocus：输入框聚焦时触发，event.detail。
bindblur：输入框失去焦点时触发，event.detail。
bindconfirm：点击完成按钮时触发，event.detail。
3、input的双向绑定：
{{age}}
文本 text
user-select：文本是否复制，该属性会使文本节点显示为 inline-block，默认为 false。
space：连续空格，（ensp：中文字符空格一半大小，emsp：中文字符空格大小，nbsp：根据字体设置的空格大小）。
decode：解码，默认为 false。
进度条 progress
percent：百分比0~100；
show-info：在进度条右侧显示百分比；
border-radius：圆角大小；
font-size：右侧百分比字体大小；
stroke-width：进度条线的宽度；
color：进度条颜色（请使用activeColor）；
activeColor：已选择的进度条的颜色；
backgroundColor：未选择的进度条的颜色；
active：进度条从左往右的动画；
active-mode：backwards: 动画从头播；forwards：动画从上次结束点接着播；
duration：进度增加1%所需毫秒数；
bindactiveend：动画完成事件。
富文本 rich-text
nodes：节点列表。
space：连续空格，（ensp：中文字符空格一半大小，emsp：中文字符空格大小，nbsp：根据字体设置的空格大小）。
图片 image
1、lazy-load：懒加载，在即将进入一定范围（上下三屏）时才开始加载，默认为 false。
2、show-menu-by-longpress：长按图片显示识别小程序码菜单，默认为 false。
3、mode：图片的显示方式（裁切、缩放）
scaleToFill：（默认值），图片变形充满整个容器，不保持纵横比缩放图片；
aspectFit：使图片的长边能完全显示出来，缩放图片，不裁切；
aspectFill：使图片的短边能完全显示出来，缩放图片，裁切图片；
widthFix：宽度不变，缩放图片，不裁切；
heightFix：高度不变，缩放图片，不裁切；
center：图片居中，不缩放，裁切图片。
富文本编辑器 editor
1、属性
read-only：设置编辑器为只读，默认为 false；
placeholder：提示信息；
show-img-size：点击图片时显示图片大小控件，默认为 false；
show-img-toolbar：点击图片时显示工具栏控件，默认为 false；
show-img-resize：点击图片时显示修改尺寸控件，默认为 false。
2、事件：
bindready：编辑器初始化完成时触发；
bindfocus：编辑器聚焦时触发，event.detail；
bindblur：编辑器失去焦点时触发，detail；
bindinput：编辑器内容改变时触发，detail；
bindstatuschange：通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式。
快速新建页面
小程序中的每个页面，都有4个文件组成，建议把他们放在同一个文件夹下，并且文件夹的名字和页面名字保持一致，在微信小程序开发工具中进行新建，4个页面会自动生成
定时器
Timeout：只触发一次。
setTimeout(function, number)：设定一个定时器。
clearTimeout(timeoutID)：取消由 setTimeout 设置的定时器。
Interval：循环触发。
setInterval(function, number)：设定一个定时器。
clearInterval(intervalID)：取消由 setInterval 设置的定时器。
data
自定义属性名，事件传参中使用
111
Page({
data:{
age:18，
arr:[4,6]
}
})
1、读取
var a=this.data.age;
2、修改
this.setData({
age:20,
“arr[0]”:88
})事件
tap：单击。
longpress：长按（按下>350ms）。
touchmove：按下并且手指滑动。
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递，例如：bindtap。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递，例如：catchtap。
互斥事件绑定：例如：mut-bind:tap。
wxml页面:
Click me!
js页面：
Page({
tapName: function(event) {
console.log(event)
}
})事件传参
小程序的事件传参和vue的不一样，它把参数写在data-*中，通过e.currentTarget.dataset接收。
wxml页面:
点我
js页面:
data:{
num:8
}，
// 触发事件
tap1(e){
var obj = e.currentTarget.dataset;//{age:67,num:8}
} 数据绑定
关键字(需要在双引号之内)：boolean 类型的 true，代表真值。boolean 类型的 false，代表假值。
wxml页面：
{{ message }}
js页面：
Page({
data: {
message: 'Hello MINA!'
}
})
不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。条件渲染
wx:if：是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染，具有更高的切换消耗。
hidden：组件始终会被渲染，只是简单的控制显示与隐藏，有更高的初始渲染消耗。
如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
1
2
3 列表渲染 wx:for
wx:key：唯一的标识符，（字符串，保留关键字*this 两种形式）。
wx:for-item：元素的变量名。
wx:for-index：下标的变量名。
{{i}} * {{j}} = {{i * j}}
路由
wx.switchTab(object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
wx.reLaunch(object)：关闭所有页面，打开到应用内的某个页面。
wx.redirectTo(object)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateBack(object)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
页面跳转有2种方法：
1、navigator组件跳转
跳到帮助页面
wx.switchTab
2、navigateTo编程跳转
wx.navigateTo({
url:""
})
wx.navigateBack跳转
wx.navigateBack({
delta: 2
}) 页面传参
页面跳转的时候，把参数放在地址栏后面，参数之间用&符隔开。
跳转方式1：
跳到帮助页面
跳转方式2：
wx.navigateTo({
url:"../about/about?age=6&num=9"
})
接收参数：
在目标页面，通过onLoad声明周期接收参数，参数以对象的方式，放在函数的形参中。
onLoad(option){
console.log(option.num);
} 弹框
wx.showToast(object)：消息提示框。
wx.showModal(object)：模态对话框。
wx.showLoading(object)：loading 提示框，需主动调用 wx.hideLoading 关闭提示框。
wx.showActionSheet(object)：操作菜单。
wx.hideToast(object)：隐藏消息提示框。
wx.showLoading 和 wx.showToast 同时只能显示一个；wx.showToast 与 wx.hideToast 配对使用。
轮播swiper
indicator-dots：显示面板指示点，默认为 false。
indicator-color：指示点颜色。
indicator-active-color：当前选中的指示点颜色。
current：当前所在滑块的 index。
autoplay：自动切换，默认为 false。
interval：切换时间间隔。
duration：滑动动画时长。
circular：采用衔接滑动，默认为 false。
vertical：滑动方向是否为纵向，默认为 false。
11
22
33
包装元素 block
block是包装元素，不是一个组件，不会再页面做渲染，直接控制属性，类似vue中的template。
view1
view2
{{index}}:
{{item}}
表单 form
将form组件内的表单元素，通过name属性，以键值对的形式，汇总提交给服务器。
提交事件：bindsubmit。
提交按钮：
年龄：
提交
tabBar
在app.json中，配置底部tab切换，最少2个，最多5个，可以控制tab的文字、图标、位置、颜色、边框。
"tabBar":{
"selectedColor":"#f00",
"list":[
{
"pagePath":"pages/index/index",
"text":"首页1",
"iconPath":"./img/home-1.png",
"selectedIconPath":"./img/home-2.png"
}
]
},尺寸单位rpx
rpx全称（responsive pixel），响应式像素，它是小程序中推荐的长度单位，规定任何屏幕的宽度都是750rpx，可以把它看成是layui的栅格布局。这也是推荐美工设计图宽度为750rpx的原因。
view{
width:750rpx;
}数据缓存
小程序的本地存储比h5更强大，它可以存储任意数据类型，单个数据最大1M，总数据不得超过10M。
1、同步缓存数据
会阻塞当前任务，等保存成功，程序才会继续往下执行。
wx.setStorageSync(string key, data)：存储数据。
wx.getStorageSync(string key)：获取数据。
wx.removeStorageSync(string key)：清除指定数据。
wx.clearStorageSync()：清空所有数据。
wx.getStorageInfoSync()：获取数据大小。
2、异步缓存数据
不会阻塞当前任务，不管保没保存成功，程序都会继续往下执行。
wx.setStorage(string key, data)：存储数据。
wx.getStorage(string key)：获取数据。
wx.removeStorage(string key)：清除指定数据。
wx.clearStorage()：清空所有数据。
wx.getStorageInfo()：获取数据大小。
存储数据：
wx.setStorage({
key:"key",
data:"value"
})
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
读取数据：
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
try {
var value = wx.getStorageSync('key')
if (value) {
}
} catch (e) {
}生命周期
1、小程序的生命周期：
指的是小程序从启动到关闭的整个过程，在app.js中进行管理。
onLaunch：小程序初始化完成，全局只触发1次。
onShow：小程序初始化完成，或从后台切换到前台时。
onHide：小程序从前台进入后台时。
2、页面的生命周期：
指的是页面从打开到关闭的整个过程，在对应页面的js文件中管理。
onReady：页面初次渲染完成。
onShow：页面显示。
onLoad：页面加载。
onHide：页面隐藏。
onUnload：页面卸载。
request请求
小程序的ajax请求，默认需要在小程序后台设置接口白名单，也可以在微信小程序开发工具中设置允许绕过白名单，测试本地接口。
1、设置绕过白名单
微信小程序开发工具 --> 详情 --> 本地设置，在【不校验合法域名】上面打钩即可。
2、request请求
url：请求的接口地址。
data：请求的参数。
header：请求头部，默认为 content-type': 'application/json'。
method：请求方法，默认为GET。
dataType：返回的数据格式，默认为json。
success：请求成功的回调。
fail：请求失败的回调。
wx.request({
url:"",
method:"",
header:{},
data:{},
success:r=>{
console.log(r);
},
fail:err =>{
console.log(err);
}
})