【小程序开发总结】微信小程序开发常用技术方法总结

1.获取input的值

<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>

 

bindKeyInput: function(e) { this.setData({ inputValue: e.detail.value }) },

1.获取标签属性的属性值data-：

<button binTap="buy" data-productid="101"></button>

//JS调用: buy:function(e){ console.log(e.target.dataset.productid); //输出结果：101 }

<view bindtap='upEwm' data-which='1' > </div>

//JS调用: buy:function(e){ console.log(e.currentTarget.dataset.which); //输出结果：1 }

 

注意：data-productid 中的productid必须为小写，驼峰式命名会undefined.

2.跳转页面说明：

（1）跳转到无底部菜单页面

wx.navigateTo({

url: '../help/help'

})

（2）跳转到有底部菜单页面

wx.switchTab({

url: '../index/index'

})

3.修改当前页面全局变量：

this.setData({

mode: mode

})

4.常见加载及提示弹窗：

wx.showToast({

title: '录音时间太短',

icon: 'loading',

mask: true,

duration: 800

})

wx.showToast({

title: '开始播放！',

icon: 'success',

duration: 1200

})

 

wx.showLoading({

title: '正在抢红包',

mask: true

})

wx.showModal({

title: '提示',

content: res.errMsg,

showCancel: false,

success: function (res) {

}

});

//封装可简单调用，减少代码量

  modal: function(title, content) {

    wx.showModal({

      title: title,

      content: content,

      showCancel: false,

    })

  }

5.全局变量，方法的调用

（1）app.js:

App({

  setConfig: {

url: 'https://redpack.topmdrt.com',

urlImg: 'http://oss-img.topmdrt.com',

urlMp: 'https://redpack-img.topmdrt.com'

  },

  onLaunch: function() {

wx.clearStorage();

    this.userLogin();

  }，

  modal: function(title, content) {

    wx.showModal({

      title: title,

      content: content,

      showCancel: false,

    })

  },

 

}）

调用方法：

//获取应用实例

const app = getApp()

 

app.setConfig.url

app.modal('温馨提示', '没有余额');

6.小程序开发常见表单提交验证：

 

formSubmit: function(e) {

if(e.detail.value.name==""){

warn = "请填写您的姓名！";

}else if(e.detail.value.tel==""){

warn = "请填写您的手机号！";

}else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){

warn = "手机号格式不正确";

}else{

}

}

 

var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

if(!regIdNo.test(e.detail.value.code)){

  alert(‘身份证号填写有误‘);

  return false;

}