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