微信小程序--代码构成---JS 交互逻辑
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。
此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中,在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。
通过这个章节,你了解了小程序涉及到的文件类型以及对应的角色,在下个章节中,我们把这一章所涉及到的文件通过 “小程序的框架” 给 “串” 起来,让他们都工作起来。
微信小程序--代码构成---JS 交互逻辑的更多相关文章
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
		微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ... 
- 从微信小程序到鸿蒙js开发【15】——JS调用Java
		鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ... 
- 从微信小程序到鸿蒙js开发【11】——页面路由
		目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ... 
- 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部
		鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ... 
- 微信小程序结合原生JS实现电商模板(二)
		接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ... 
- 微信小程序代码片段
		微信小程序代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验.展示组件和 API 的使用.复现开发问题等等.分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段. ... 
- 微信小程序引入md5.js
		今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ... 
- [RN] React Native代码转换成微信小程序代码的转换引擎工具
		React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita 
- 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录
		鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ... 
随机推荐
- Keepalived+LVS-DR+Nginx高可用故障切换模式
			LVS架构中,不管是NAT模式还是DR模式,当后端的RS宕掉后,调度器依然会把请求转发到宕掉的RS上,这样的结果并不是我们想要的.其实,keepalived就可以解决问题,它不仅仅有高可用的功能,还有 ... 
- Rasterization 学习笔记
			======================Barycentric interpolation====================================== <1>2d/3d ... 
- 嵌入式系统C编程之堆栈回溯【转】
			转自:https://www.cnblogs.com/clover-toeic/p/3949896.html 前言 在嵌入式系统C语言开发调试过程中,常会遇到各类异常情况.一般可按需添加打印信息,以便 ... 
- u3d摇杆
			using UnityEngine; using System.Collections; public class JoystickController : MonoBehaviour { priva ... 
- Linux中OCI开发库的配置
			Oracle调用接口(Oracle Call Interface,简称OCI)提供了一组可对Oracle数据库进行存取的接口子例程(函数),通过在第三代程序设计语言(如C语言)中进行调用可达到存取Or ... 
- 微信小程序弹出层点击穿透问题
			问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ... 
- Kubernetes重要概念理解
			Kubernetes重要概念理解 kubernetes是目前最主流的容器编排工具,是下一代分布式架构的王者.2018年的kubernetes第一个版本1.10已经发布.下面整理一下,kubernete ... 
- Centos 6 安装FreeSWITCH
			为了安装FreeSWITCH ,我选择的Linux是CentOS,目前最新的Centos版本是6.具体安装CentOS的是步骤详见网上的其它资料,本节的主要目的是为了记录FreeSWITCH的安装过程 ... 
- 前端 ---- jQuery的ajax
			14-jQuery的ajax 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下, ... 
- 【进阶3-4期】深度解析bind原理、使用场景及模拟实现(转)
			这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/23 bind() bind() 方法会创建一个新函数,当这个新函 ... 
