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

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;
}
 

原文地址:https://www.cnblogs.com/xiaohuizhang/p/8884405.html