微信小程序开发文档
大部分只支持HexColor颜色十六进制颜色
程序
App({
onLaunch: function(options) {},
onShow: function(options) {},
onHide: function() {},
onError: function(msg) {},
globalData: 'global data',
})
页面
Page({
data: { text: "This is page data" },
onLoad: function(options) { },
onShow: function() { },
onReady: function() { },
onHide: function() { },
onUnload: function() { },
onPullDownRefresh: function() { }, // 监听用户下拉动作
onReachBottom: function() { }, // 页面上拉触底事件的处理函数
onShareAppMessage: function () { }, // 用户点击右上角转发
onPageScroll: function() { }, // 页面滚动触发事件的处理函数
})
大部分api都有success、fail、complete方法
tabBar
color: 文字未选中时的颜色
selectedColor: 文字选中时的颜色
backgroundColor: 背景颜色
borderStyle: 边框样式 只支持white和black
list: 数组，只能配置最少2个、最多5个tab
text：文字
pagePath：对应的路由组件的路径
iconPath：未选中时的图片路径
selectedIconPath：选中时的图片路径
// 显示/隐藏 tabBar 某一项的右上角的红点
wx.showTabBarRedDot({
index: 0, // tabBar 的哪一项，从左边算起
})
wx.hideTabBarRedDot({
index: 0,
})
// 设置/移除 tabBar 某一项的右上角添加文本
wx.setTabBarBadge({ index: 0, text: 'text'})
wx.removeTabBarBadge({ index: 0})
// 显示/隐藏tabBar
wx.showTabBar({
animation: false, // 是否需要动画效果，默认值false
})
wx.hideTabBar({
animation: true,
})
// 动态设置 tabBar 某一项的内容
wx.setTabBarItem({
index: 0,
iconPath: 'iconPath',
selectedIconPath: 'selectedIconPath',
text: 'text',
})
// 动态设置 tabBar 的整体样式
wx.setTabBarStyle({
backgroundColor: 'backgroundColor',
borderStyle: 'borderStyle',
color: 'color',
selectedColor: 'selectedColor',
})
json
navigationBarBackgroundColor：导航栏背景颜色，默认值 `#000000`
navigationBarTextStyle：导航栏标题颜色，仅支持 `black`(黑色)/`white`(白色默认值)
navigationBarTitleText：导航栏标题文字
navigationStyle：导航栏样式
仅支持：`default`默认值/`custom` 自定义导航栏，只保留右上角胶囊按钮
backgroundTextStyle：下拉loading的样式，仅支持 `dark`(深色默认)/ `light`(浅色)
backgroundColor：窗口的背景颜色，下拉部分的背景颜色
enablePullDownRefresh：Boolean下拉刷新是否开启
js
插值表达式：{{}}
通过 this.data.xxx 访问data数据
修改data的数据this.setData({})
绑定事件
绑定事件使用bind
tap：点击事件；
longtap：长按事件；
touchstart：触摸开始；
touchend：触摸结束；
touchcansce：取消触摸；
bind绑定；
catch绑定；（能阻止事件冒泡）
例如：绑定点击事件 bindtap
wx:for、wx:key
/**
* wx:key不用{{}}插值表达式：有两种形式
* 1.*this 表示item本身，但是要确保item本身是唯一
* 2.item是对象的话，直接写属性名，比如id
* wx:for和wx:key必须写在一起，不然有警告
* wx:for="{{}}" 注意引号不能去掉
**/
data: {
arr: [1, 2, 3, 4, 5, 6],
}
<view wx:for="{{arr}}" wx:key="*this">
<view >{{item}}</view>
</view>
/**
* 修改默认的item、index
* wx:for-item="item1"
* wx:for-index="index1"
**/
data: {
arr: [
{
id: 1,
name: "l",
},
{
id: 2,
name: "x",
},
{
id: 3,
name: "h",
},
]
}
<view wx:for="{{arr}}" wx:key="id" wx:for-item="itemXXX" wx:for-index="indexXXX">
<view>{{itemXXX.name}}--{{indexXXX}}</view>
</view>
wx:if
wx:if wx:elif wx:else
<view wx:if="{{}}"> 1 </view>
<view wx:elif="{{}}"> 2 </view>
<view wx:else> 3 </view>
动态绑定class、style
<view class="box {{age > 10 ? 'active' : ''}}"></view>
<view style="color: {{styleObj.color}}"></view>
wxml
标签
div -> view
span -> text
img -> image
wxss
wxss与css相比，扩展两个特性：
尺寸单位：rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
样式导入：使用`@import`语句可以导入外联样式表
`@import`后跟需要导入的外联样式表的相对路径
用`;`表示语句结束
生命周期
// 初次先执行这三个生命周期（顺序：onLoad->onShow->onReady）
onLoad(options){}监听页面加载
onShow(){}监听页面显示
onReady(){}监听页面初次渲染完成
onHide(){}监听页面隐藏，wx.navigateTo()，会执行
onUnload(){}监听页面卸载，wx.redirectTo()，会执行
子组件生命周期
组件的的生命周期也可以在 `lifetimes` 字段内进行声明（这是推荐的方式，其优先级最高）
Component({
// 组件生命周期，最重要的生命周期是created、attached、detached
lifetimes: {
// 组件实例刚刚被创建时执行，还不能调用setData，一般给组件this添加一些自定义属性字段
created() {},
attached() {}, // 组件实例进入页面节点树时执行
detached() {}, // 组件实例被从页面节点树移除时执行，页面销毁时
ready() {}, // 组件在视图层布局完成后执行，等同于onLoad
moved() {}, // 组件实例被移动到节点树另一个位置时执行
error() {}, // 每当组件方法抛出错误时执行
},
// 旧的用法
created() {},
attached() {},
detached() {},
ready() {},
moved() {},
error() {},
})
组件所在页面的生命周期
Component({
pageLifetimes: {
show() {
// 页面被展示
},
hide() {
// 页面被隐藏
},
resize(size) {
// 页面尺寸变化
}
}
})
路由跳转和传参
wx.navigateTo()
保留当前页面，跳转到应用内的某个页面,但是不能跳到 tabbar 页面。
使用`wx.navigateBack`可以返回到原页面。
小程序中页面栈最多十层。
wx.navigateTo({
url: 'url',
events: {}, // 用于监听被打开页面发送到当前页面的数据
})
例子：
wx.navigateTo({
url: '/pages/about/about',
events: {
// 获取被打开页面传送到当前页面的数据
lxh: (e) => {
console.log(e)
// 没有发现有什么特别的
}
},
})
/pages/about/about
onLoad: function (options) {
const event = this.getOpenerEventChannel()
console.log(event)
event.emit("lxh", {name: "lxh", age: 25})
},
wx.navigateBack()
关闭当前页面，返回上一页面或多级页面。
可通过`getCurrentPages`获取当前的页面栈，决定需要返回几层。
getCurrentPages()返回一个数组，数组中第一个元素为首页，最后一个元素为当前页面
wx.navigateBack({
delta: 1, // 默认值是1，返回的页面数，如果delta大于现有页面数，则返回到首页
})
wx.redirectTo()
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.redirectTo({
url: 'url',
})
wx.reLaunch()
关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
url: 'url',
})
wx.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
url: 'url',
})
传参
通过url直接传递参数,类似于get请求传参的方式
在跳转之后的页面, onLoad这个生命周期会自带一个参数,options就是路由传递过来的参数对象
如果数据过于多或者复杂,可能就会出bug,数据传递不完整或者数据丢失
本地存储
- 用有sync的这类的方法,代表同步存储,如果在操作过程当中失败,程序会终止,会给你错误提示
- 存数据: wx.setStorageSync(key, value)，不需要转成字符串,直接存
- 取数据: wx.getStorageSync(key)
- 清除单个数据: wx.removeStorageSync(key)
- 清除全部: wx.clearStorage()
微信小程序常用方法
如果wx的方法里面有成功和失败的回调函数, 写成箭头函数的形式,这样才能保证this的指向为当前组件
轻提示
icon 默认success,如果设置图标为success/error/loading, title最多只能7个字，none不显示图标，此时 title 文本最多可显示两行
wx.showToast({
title: 'title',
duration: 1500, // 默认值1500，提示的延迟时间
icon: "success",
image: 'image', // 自定义图标的本地路径，image 的优先级高于 icon
mask: false, // 默认值false，是否显示透明蒙层，防止触摸穿透
})
注意：
wx.showLoading和wx.showToast同时只能显示一个
wx.showToast 应与 wx.hideToast 配对使用
loading提示
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: 'title',
mask: false, // 是否显示透明蒙层，防止触摸穿透，默认值false
})
显示模态对话框
wx.showModal({
cancelColor: 'cancelColor',
cancelText: 'cancelText', // 取消按钮的文字，最多 4 个字符
confirmColor: 'confirmColor',
confirmText: 'confirmText', // 确认按钮的文字，最多 4 个字符
title: 'title',
content: 'content',
editable: false, // 是否显示输入框，默认值为false
placeholderText: 'placeholderText', // 显示输入框时的提示文本
showCancel: true, // 是否显示取消按钮，默认值true
success: (result) => {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
底部弹出操作菜单
wx.showActionSheet({
itemList: [],
alertText: 'alertText', // 警示文案
itemColor: 'itemColor', // 按钮的文字颜色
success: (result) => {
console.log(res.tapIndex)
},
fail: (res) => {
console.log(res.errMsg)
},
})
动态NavigationBar导航栏
wx.setNavigationBarTitle({
title: 'title',
})
wx.setNavigationBarColor({
backgroundColor: 'backgroundColor', // 背景颜色值
// 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
frontColor: 'frontColor',
animation: {
duration: 0, // 动画变化时间
/* 'linear' | 动画从头到尾的速度是相同的
'easeIn' | 动画以低速开始
'easeOut' | 动画以低速结束
'easeInOut' | 动画以低速开始和结束 */
timingFunc: "linear", // 动画变化方式
},
})
// 在当前页面显示导航条加载动画
wx.showNavigationBarLoading()
// 在当前页面隐藏导航条加载动画
wx.hideNavigationBarLoading()
// 隐藏返回首页按钮，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮
// 开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏
wx.hideHomeButton()
下拉刷新
需要开启"enablePullDownRefresh": true
默认持续4秒关闭下拉
// 开始下拉
wx.startPullDownRefresh()
// 停止下拉
wx.stopPullDownRefresh()
// 监听用户下拉动作
onPullDownRefresh() {}
组件
文件夹右击新建Component是创建一般组件
文件夹右击新建Page是创建路由组件
一般组件：json文件："component": true
一般组件就不会去设置标题之类的东西
js文件：properties: 等同于vue一般组件当中的props
methods: 用来写组件自己的方法
路由组件使用一般组件：
json文件当中配置: usingComponents: { 值:该一般组件的路径 }
直接使用刚刚你注册的名字,就被映射成了html标签了
组件通信
父组件传
<view>
<navHeader info="{{'数据'}}"></navHeader>
</view>
子组件接收数据:
properties: {
// 对象形式
info: {
type: String, // 类型
value: '', // 默认值
},
// 简化形式
info: String,
}
注意：在子组件的方法当中使用properties传递过来的数据,通过this.properties.xxx来获取
子传父
传递
send() {
this.triggerEvent('send', '数据')
}
接收
<view>
<navHeader bind:send='send'></navHeader>
</view>
send(e) {
console.log(e.detail)
},
注意：父组件可以通过 `this.selectComponent` 方法获取子组件实例对象，访问子组件的数据和方法
<child id="childId" />
const childId = this.selectComponent('#childId')
slot插槽
默认情况下，一个组件的 wxml 中只能有一个 slot 。
父组件：
<child>xxxx</child>
子组件：
<view>
<slot></slot>
</view>
需要使用多 slot 时，可以在组件 js 中声明启用。
Component({
options: {
multipleSlots: true // 启用多slot支持，默认false
},
})
<!-- 父组件 -->
<view>
<child>
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</child>
</view>
<!-- 子组件 -->
<view>
<slot name="before"></slot>
<slot name="after"></slot>
</view>
数据监听器
observers：只有子组件才有observers
Component({
data: {
numberA: 1,
numberB: 2,
},
observers: {
'numberA, numberB': (numberA, numberB) => {
// 在 numberA 或 numberB 被上面定义时，会执行这个函数
this.setData({
sum: numberA + numberB
})
},
'some.subfield': (subfield) => {
// 使用 setData 设置 this.data.some.subfield 时触发
// 使用 setData 设置 this.data.some 也会触发
subfield === this.data.some.subfield
},
'arr[12]': (arr) => {
// 使用 setData 设置 this.data.arr[12] 时触发
// 使用 setData 设置 this.data.arr 也会触发
arr === this.data.arr[12]
},
// 监听所有子数据字段的变化，可以使用通配符 **
'some.field.**': (field) => {
// 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
// 使用 setData 设置 this.data.some 也会触发
field === this.data.some.field
},
// 仅使用通配符 ** 可以监听全部 setData
'**': () => {
// 每次 setData 都触发
},
},
})
