-
事件绑定
bindtap:类似click
bindinput:文本框的输入事件
bindchange:状态改变时触发
事件对象的属性列表event
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。
bindtap
<button bindtap="btnTapHandler">按钮</button>
// 页面的js文件
Page({
data:{
count:0
}
btnTapHandler(e){
console.log(e)
this.setData({
count:this.data.count+1
})
}
})
事件传参:只能用data-*传参
<button bindtap="btnTap" data-step="{{2}}">按钮</button>
值在e.target.dataset.step
bindInput
<input value="{{msg}}"bindinput="inputHandler">输入<input>
data:{
msg:"hh"
}
inputHandler(e){
this.setData({
msg:e.detail.value
})
}
条件渲染:wx:if、hidden
wx:if:以动态创建和移除元素的方式,控制元素和展示与隐藏
hidden:以切换样式的方式控制
列表渲染:wx:for
<view wx:for="{{array}}">
索引是:{{index}} 当前项是:{{item}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是:{{idx}} 当前项是:{{itemName}}
</view>
// 加key值,不用{{}}
<view wx:for="{{array}}" wx:key="id"></view>
全局配置app.json
window结点常用配置项
下拉刷新:enablePullDownRefresh:true
tabBar导航栏
配置项 app.json,与page平级
每个tab项的配置选项
页面配置中常用的配置项
下拉刷新项建议不要全局配置,放到具体页面配置
网络数据请求
限制:(1)只能请求HTTPS类型的接口
(2)必须将接口的域名添加到信任列表中
配置request合法域名
配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意事项:(1)域名不能使用IP地址或localhost
(2)域名必须经过ICP备案
(3)一个月最多可申请5次修改
发起GET请求
wx.request({
url: 'https://www.escook.cn/api/get',
method: 'GET',
data: {
name: 'zs',
age: 22
},
success: (res) => {
console.log(res.data) //data是服务器返回的数据
}
})
发起POST请求
wx.request({
url: 'http://www.escook.cn/api/post',
method: "POST",
data: {
name: 'ls',
age: 22
},
success: (res) =>{
console.log(res.data)
}
})
onLoad:监听页面加载
onLoad:function(option){
}
跨域
跨域问题只存在于基于浏览器的Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax请求”,而是叫做“发起网络数据请求”。
页面导航
声明式导航+传参
// 导航到tabBar页面,url必须以'/'开头,open-type必须是'switchTab'
<navigator url="/pages/message/message?name=zs&age=20" open-type="switchTab">
导航到tabBar页面
</navigator>
// 导航到非tabBar页面,url必须以'/'开头,open-type必须是'navigate'
<navigator url="/pages/message/message" open-type="navigate">
导航到非tabBar页面
</navigator>
//非tabBar页面可以不写open-type
// 后退导航,open-type必须navigateBack,delta表示后退的层级
<navigator open-type="navigateBack" delta="1">
返回上一页
</navigator>
编程式导航
// 导航到tabBar页面,有success、fail、complete
gotoMessage(){
wx.switchTab({
url: '/pages/message/message'
})
}
// 导航到非tabBar页面,有success、fail、complete
gotoInfo(){
wx.navigateTo({
url: '/pages/info/info'
})
}
// 后退导航,有success、fail、complete参数
goBack(){
wx.navigateBack({
delta: 1
})
}
页面事件
下拉刷新
// 页面json文件
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
// 页面js文件,监听用户下拉动作
onPullDownRefresh:function(){
//处理
//调用此函数,关闭下拉刷新效果,不调用就不会关闭
wx.stopPullDownRefresh()
}
上拉触底事件
// js文件
onReachBottom:function(){
}
生命周期
应用生命周期:特指小程序从启动->运行->销毁的过程
// app.js文件
App({
// 小程序初始化完成时,执行此函数,全局只触发一次,可以做一些初始化的工作
onLaunch: function(options){ },
// 小程序启动,或从后台进入前台显示时触发
onShow: function(options){ },
// 小程序从前台进入后台时触发
onHide: function(){ }
})
页面生命周期:特指小程序中,每个页面的加载->渲染->销毁的过程
// 页面的.js文件
Page({
// 监听页面加载,一个页面只调用1次
onLoad:function(options) { },
// 监听页面显示
onShow:function(options) { },
// 监听页面初次渲染完成,一个页面只调用一次
onReady:function(options) { },
// 监听页面隐藏
onHide:function(options) { },
// 监听页面卸载,一个页面只调用1次
onUnLoad:function(options) { },
})
WXS脚本
wxml中无法调用在页面的.js 中定义的函数,但是,wxml中可以调用wxs 中定义的函数。因此,小程序中wxs的典型应用场景就是“过滤器”,经常配合Mustache语法进行使用,不能作为组件的诗句回调函数。
wxs不能调用js中定义的函数,wxs不能调用小程序提供的API
wxs和JavaScript的关系
基本用法:常用于过滤器
<view>{{m1.toUpper.username}}</view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.toUpperCase()
}
</wxs>
外联的wxs脚本
// tools.wxs 文件
function toLower(str){
return str.toLowerCase
}
modules.export = {
toLower: toLower
}
// .wxml文件
<view>{{m2.toLower(country)}}</view>
//src必须是相对路径
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
自定义组件
局部引用组件:在页面的json配置文件中;全局引用组件:app.json配置文件
{
"usingComponents":{
"my-test1": "/components/test1/test1"
}
}
//wxml
<my-test1></my-test1>
组件和页面的区别
从表面来看,组件和页面都是由.js、.json、.wxml和.ws这四个文件组成的。但是,组件和页面的.js 与.json文件有明显的不同:
组件的.json文件中需要声明"component": true
属性组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义到methods节点中
修改组件的样式隔离选项
// 组件的.js
Component({
option: {
styleIsolation: 'isolated'
}
})
// 或在组件的.json文件中新增如下配置
{
"styleIsolation": "isolated"
}
properties是组件的对外属性,用来接受外界传递到组件中的数据
Component({
properties:{
// 完整定义属性的方式,需要指定属性默认值
max:{
type: Number,
value:10
}
// 简化定义属性的方式
max:Number
}
})
// 应用
<my-test max="10"></my-test>
数据监听器
Component({
observers: {
'n1, n2': function(n1,n2){
this.setData({ sum: n1 + n2 })
}
}
})
// 监听对象上所有属性的变化
'rgb.**': function(obj){
this.setData({
fullColor: `${obj.r},${obj.g},${obj.b}`
})
}
纯数据字段
不用于界面渲染的data字段,有助于提升页面更新的性能
在Component 构造器的options节点中,指定pureDataPattern为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:
Component({
options:{
pureDataPattern: /^_/
},
data: {
a: true, // 普通数据字段
_b: true, // 纯数据字段
}
})
组件的生命周期
在小程序组件中,最重要的生命周期函数有3个,分别是created、attached、detached。它们各自的特点如下:
(1)组件实例刚被创建好的时候,created生命周期函数会被触发
- 此时还不能调用setData
- 通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段
(2)在组件完全初始化完毕、进入页面节点树后,attached生命周期函数会被触发
- 此时, this.data已被初始化完毕
- 这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
(3)在组件离开页面节点树后,detached 生命周期函数会被触发
- 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
- 此时适合做一些清理性质的工作
Component({
lifetimes: {
attached() { }, // 在组件实例进入页面节点树时执行
detached() { }, // 在组件实例被从页面节点树移除时执行
}
})
组件所在页面的生命周期
自定义组件的行为依赖于页面状态的变化
Component({
pageLifetime:{
show: function() { }, // 页面被展示
hide: function() { }, // 页面被隐藏
resize: function(size) { } // 页面尺寸变化
}
})
插槽
<view>
<slot></slot>
</view>
多个插槽
// 在组件的js文件,启用多个插槽
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot文件
},
properties: { },
methods: { }
})
// 组件模板
<view class="wrapper">
<slot name="before"></slot>
<slot name="after"></slot>
</view>
// 填充
<view slot="before">before</view>
父子组件之间的通信
属性绑定:用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据
只能父传子,且只能传递普通类型的数据
// 父组件的data节点
data:{
count: 0
}
// 父组件的wxml结构
<my-test count="{{count}}"></my-test>
// 子组件的properties节点
properties:{
count:Number
}
// 子组件的wxml结构
<view>count值为:{{count}}</view>
事件绑定:用于子组件向父组件传递数据,可以传递任意数据
// 第一步:在父组件中定义syncCount方法
syncCount(){
console.log("")
}
// 第二步:在父组件的wxml中通过自定义事件传递给子组件
<my-test count="{{count}}" bind:sync="syncCount"></my-test>
// 第三步: 子组件的js,用this.triggerEvent()
methods:{
addCount(){
this.triggerEvent('sync',{value:this.properties.count})
}
}
// 第四步:在父组件的js中,通过e.detail获取
syncCount(e){
this.setData({
count: e.detail.value
})
}
获取组件实例:父组件还可以通过this.selectComponent("id选择器或class选择器")获取子组件实例对象
// 父组件的wxml
<my-test5 count="{{count}}" bind:sync="syncCount" class="customA" id="cA">
<my-test5>
<button bindtap="getChild">btn</button>
// 父组件的js
getChild(){
const child = this.selectComponent('.customA')
child.setData({
count: child.properties.count + 1
})
}
behaviors:用于实现组件间代码共享的特性
每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中。每个组件可以引用多个behavior,behavior也可以引用其它behavior。
// 创建behavior
module.export = Behavior({
properties:{},
data:{},
methods:{},
// 其他节点....
})
// 导入并使用
const myBehavior = require("../../behavior")
Compnent({
behaviors:[myBehavior]
})
CSS变量
html{
--main-color: #efefef
}
.box{
background-color: var(--main-color)
}