微信小程序开发的常见问题

持续更新~

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