持续更新~
1.不同页面之间的传值方式
1.1通过url问号传值
当前页面
wx.navigateTo({
url: '/pages/aaa/aaa?userName=norma'
})
另一个页面通过options获取到id
onLoad: function(options){
console.log(options.userName);
}
1.2通过定义全局变量
在app.js中定义全局变量
App({
globalData: {
userName: 'norma'
}
})
在页面中获取
const app = getApp();
console.log(app.globalData.userName);// 'norma'
在任何页面中设置
1.3通过本地缓存
wx.setStorage('userName','norma');
在页面中获取
wx.getStorage('userName');
2、页面与组件之间的方法调用
2.1子组件通过调用页面的方法修改页面中的数据
页面中引用组件，绑定事件
<list bind:change='change'></list>
获取
Page({
change(e) {
e.detail // 自定义组件触发事件时提供的detail对象
}
})
子组件
需要使用 triggerEvent方法，指定事件名、detail对象和事件选项，触发事件的选项包括，bubbles，composed，capturePhase
this.triggerEvent('change', {myEventDetail}, {})
2.2页面调用子组件里的方法
页面引入dialog组件中的方法
onReady: function () {
this.dialog = this.selectComponent('#dialog');
},
页面中使用dialog组件中的方法
showDialog: function(){
this.dialog.show();
}
3.实现动画效果
3.1使用官方提供的API
创建动画对象，设置动画，导出动画
let animation = wx.createAnimation({});
animation.rotate(180).step({duration:3000});
this.setData({rotateData: animation.export()})
使用动画
<view animation='{{rotateData}}'></view>
3.2动态绑定class，简单动画可参考Animate.css
<view class="test {{isActive ? 'active':'' }}"></view>
4.表单的取值
4.1 获取 event 中的值
当点击<form>表单中 form-type 为 submit 的<button>组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key
Page({
formSubmit(e) {
console.log('提交的表单数据为：', e.detail.value)
}
})
4.2通过绑定事件设置变量值保存表单数据
<input bindinput="inputTitle" />
inputTitle: function (e) {
this.setData({
title: e.detail.value,
})
},
