微信小程序开发常见问题

1、不同页面之间的传值方式

• 通过URL问号传值

1. 当前页面

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,
  })
},