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

【小程序开发总结】微信小程序开发常用技术方法总结的更多相关文章

  1. 介绍web开发中实现会话跟踪的常用技术方法

    由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,例如购物车程序,客户在购物车中添加了商品,服务器如何知道购物车已有的物品呢?为了支持客户端与服务器之间的交互,为了弥补http ...

  2. 开发一个微信小程序教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...

  3. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  4. 如何开发一个微信小程序

    一.概述     特点:对商家来说,小程序的开发成本低(有丰富的组件.api等).运营成本低(有数据日志等).稳定.互动流畅,便于分享.传播(基本微信平台的大量用户).对用户来说,扫码即可获取服务,随 ...

  5. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  6. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  7. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  8. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  9. 全栈开发工程师微信小程序-上(下)

    全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...

  10. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

随机推荐

  1. Android获取长按按键响应

    Android获取长按按键响应http://www.2cto.com/kf/201312/261719.html Android下Listview的onItemClick以及onItemLongCli ...

  2. SIFT算法学习

    几个关于SIFT算法的blog,写的很好,链接学习一下 小北的家谈谈SIFT.PCA-SIFT.SURF及我的一点思考http://blog.csdn.net/ijuliet/article/deta ...

  3. ORB算法介绍(转)

    本文为原创文章,转载请注明出处:http://blog.csdn.net/yang843061497/article/details/38553765 绪论 假如我有2张美女图片,我想确认这2张图片中 ...

  4. 前缀、中缀、后缀表达式以及简单计算器的C++实现

    前缀表达式(波兰表达式).中缀表达式.后缀表达式(逆波兰表达式) 介绍 三种表达式都是四则运算的表达方式,用以四则运算表达式求值,即数学表达式的求解. 前缀表达式 前缀表达式是一种没有括号的算术表达式 ...

  5. Java入门:构造方法

    什么是构造方法 类体中有两大形式的成员,其中一个是成员方法(另一个就是成员变量啦~).成员方法又分两种,一种是普通成员方法,另一种是构造方法(有的资料中也称之为构造函数). 所谓构造方法,就是这个类在 ...

  6. Dockerfile基本语法

    Dockerfile的组成 Dockerfile分为四部分: 基础镜像信息 维护者信息 镜像操作指令 容器启动时执行指令 Dockerfile指令说明 FROM 格式为FROM <image&g ...

  7. 科学计算三维可视化---TVTK管线与数据加载(用IVTK根据观察管线)

    一:用IVTK根据观察管线 (一)引入该工具 from tvtk.tools import ivtk 可能需要安装pygments pip3 install pygments (二)使用ivtk显示立 ...

  8. Kafka 0.8 Producer处理逻辑

    Kafka Producer产生数据发送给Kafka Server,具体的分发逻辑及负载均衡逻辑,全部由producer维护. 1.Kafka Producer默认调用逻辑 1.1 默认Partiti ...

  9. soj1049.Mondriaan

    1049. Mondriaan Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description Squares and rectangl ...

  10. mysql sql优化实例1(force index使用)

    今天和运维同学一块查找mysql慢查询日志,发现了如下一条sql: SELECT sum(`android` + ios) total,pictureid,title,add_time FROM `j ...