小程序入门教程之微信-03-脚本编程
本篇的难度要大于前两篇,如果觉得不好理解,可以先跟着例子,动手做一遍,然后再读文字说明,可能就容易理解了。
所有示例的完整代码,都可以从 GitHub 的代码仓库下载。
一、数据绑定
前面的所有示例,小程序的页面都是写死的,也就是页面内容不会变。但是,页面数据其实可以通过脚本传入,通过脚本改变页面,实现动态效果。
小程序提供了一种特别的方法,让页面可以更方便地使用脚本数据,叫做"数据绑定"(data binding)。
所谓"数据绑定",指的是脚本里面的某些数据,会自动成为页面可以读取的全局变量,两者会同步变动。也就是说,脚本里面修改这个变量的值,页面会随之变化;反过来,页面上修改了这段内容,对应的脚本变量也会随之变化。这也叫做 MVVM 模式。
下面看一个例子。打开home.js
文件,改成下面这样。
Page({data: {name: '张三'}
});
上面代码中,Page()
方法的配置对象有一个data
属性。这个属性的值也是一个对象,有一个name
属性。数据绑定机制规定,data
对象的所有属性,自动成为当前页面可以读取的全局变量。也就是说,home
页面可以自动读取name
变量。
接着,修改home.wxml
文件,加入name
变量。
<view><text class="title">hello {{name}}</text>
</view>
上面代码中,name
变量写在{{...}}
里面。这是小程序特有的语法,两重大括号表示,内部不是文本,而是 JavaScript 代码,它的执行结果会写入页面。因此,{{name}}
表示读取全局变量name
的值,将这个值写入网页。
注意,变量名区分大小写,name
和Name
是两个不同的变量名。
开发者工具导入项目代码,页面渲染结果如下。
可以看到,name
变量已经自动替换成了变量值"张三"。
这个示例的完整代码,可以查看代码仓库。
页面和脚本对于变量name
是数据绑定关系,无论哪一方改变了name
的值,另一方也会自动跟着改变。后面讲解到事件时,会有双方联动的例子。
二、全局数据
数据绑定只对当前页面有效,如果某些数据要在多个页面共享,就需要写到全局配置对象里面。
打开app.js
,改写如下。
App({globalData: {now: (new Date()).toLocaleString()}
});
上面代码中,App()
方法的参数配置对象有一个globalData
属性,这个属性就是我们要在多个页面之间分享的值。事实上,配置对象的任何一个属性都可以共享,这里起名为globalData
只是为了便于识别。
然后,打开home.js
,改成下面的内容,在页面脚本里面获取全局对象。
const app = getApp();Page({data: {now: app.globalData.now}
});
上面代码中,getApp()
函数是小程序原生提供的函数方法,用于从页面获取 App 实例对象。拿到实例对象以后,就能从它上面拿到全局配置对象的globalData
属性,从而把app.globalData.now
赋值给页面脚本的now
属性,进而通过数据绑定机制,变成页面的全局变量now
。
最后,修改一下页面代码home.wxml
。
<view><text class="title">现在是 {{now}}</text>
</view>
开发者工具导入项目代码,页面渲染结果如下。
可以看到,页面读到了全局配置对象app.js
里面的数据。
这个示例的完整代码,可以查看代码仓库。
三、事件
事件是小程序跟用户互动的主要手段。小程序通过接收各种用户事件,执行回调函数,做出反应。
小程序的常见事件有下面这些。
tap
:触摸后马上离开。longpress
:触摸后,超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件,tap
事件将不被触发。touchstart
:触摸开始。touchmove
:触摸后移动。touchcancel
:触摸动作被打断,如来电提醒,弹窗等。touchend
:触摸结束。
上面这些事件,在传播上分成两个阶段:先是捕获阶段(由上层元素向下层元素传播),然后是冒泡阶段(由下层元素向上层元素传播)。所以,同一个事件在同一个元素上面其实会触发两次:捕获阶段一次,冒泡阶段一次。详细的介绍,请参考我写的事件模型解释。
小程序允许页面元素,通过属性指定各种事件的回调函数,并且还能够指定是哪个阶段触发回调函数。具体方法是为事件属性名加上不同的前缀。小程序提供四种前缀。
capture-bind
:捕获阶段触发。capture-catch
:捕获阶段触发,并中断事件,不再向下传播,即中断捕获阶段,并取消随后的冒泡阶段。bind
:冒泡阶段触发。catch
:冒泡阶段触发,并取消事件进一步向上冒泡。
下面通过一个例子,来看如何为事件指定回调函数。打开home.wxml
文件,改成下面的代码。
<view><text class="title">hello {{name}}</text><button bind:tap="buttonHandler">点击</button>
</view>
上面代码中,我们为页面加上了一个按钮,并为这个按钮指定了触摸事件(tap
)的回调函数buttonHandler
,bind:
前缀表示这个回调函数会在冒泡阶段触发(前缀里面的冒号可以省略,即写成bindtap
也可以)。
回调函数必须在页面脚本中定义。打开home.js
文件,改成下面的代码。
Page({data: {name: '张三'},buttonHandler(event) {this.setData({name: '李四'});}
});
上面代码中,Page()
方法的参数配置对象里面,定义了buttonHandler()
,这就是<button>
元素的回调函数。它有几个地方需要注意。
(1)事件回调函数的参数是事件对象event
,可以从它上面获取事件信息,比如事件类型、发生时间、发生节点、当前节点等等。
(2)事件回调函数内部的this
,指向页面实例。
(3)页面实例的this.setData()
方法,可以更改配置对象的data
属性,进而通过数据绑定机制,导致页面上的全局变量发生变化。
开发者工具导入项目代码,点击按钮后,页面渲染结果如下。
可以看到,点击按钮以后,页面的文字从"hello 张三"变成了"hello 李四"。
这个示例的完整代码,可以查看代码仓库。
这里要强调一下,修改页面配置对象的data
属性时,不要直接修改this.data
,这不仅无法触发事件绑定机制去变更页面,还会造成数据不一致,所以一定要通过this.setData()
去修改。this.setData()
是一个很重要的方法,有很多细节,详细介绍可以读一下官方文档。
四、动态提示 Toast
小程序提供了很多组件和方法,用来增强互动效果。比如,每次操作后,都显示一个动态提示,告诉用户操作的结果,这种效果叫做 Toast。
打开home.js
文件,为this.setData()
加上第二个参数。
Page({data: {name: '张三'},buttonHandler(event) {this.setData({name: '李四'}, function () {wx.showToast({title: '操作完成',duration: 700});}),}
});
上面代码中,this.setData()
方法加入了第二个参数,这是一个函数,它会在页面变更完毕后(即this.setData()
执行完)自动调用。
这个参数函数内部,调用了wx.showToast()
方法,wx
是小程序提供的原生对象,所有客户端 API 都定义在这个对象上面,wx.showToast()
会展示微信内置的动态提示框,它的参数对象的title
属性指定提示内容,duration
属性指定提示框的展示时间,单位为毫秒。
开发者工具导入项目代码,点击按钮后,页面渲染结果如下。
过了700毫秒,提示框就会自动消失。
这个示例的完整代码,可以查看代码仓库。
五、对话框 Modal
下面,我们再用小程序提供的wx.showModal()
方法,制作一个对话框,即用户可以选择"确定"或"取消"。
打开home.js
文件,修改如下。
Page({data: {name: '张三'},buttonHandler(event) {const that = this;wx.showModal({title: '操作确认',content: '你确认要修改吗?',success (res) { if (res.confirm) {that.setData({name: '李四'}, function () {wx.showToast({title: '操作完成',duration: 700});});} else if (res.cancel) {console.log('用户点击取消');}}});}
});
上面代码中,用户点击按钮以后,回调函数buttonHandler()
里面会调用wx.showModal()
方法,显示一个对话框,效果如下。
wx.showModal()
方法的参数是一个配置对象。title
属性表示对话框的标题(本例为"操作确认"),content
属性表示对话框的内容(本例为"你确认要修改吗?"),success
属性指定对话框成功显示后的回调函数,fail
属性指定显示失败时的回调函数。
success
回调函数里面,需要判断一下用户到底点击的是哪一个按钮。如果参数对象的confirm
属性为true
,点击的就是"确定"按钮,cancel
属性为true
,点击的就是"取消"按钮。
这个例子中,用户点击"取消"按钮后,对话框会消失,控制台会输出一行提示信息。点击"确定"按钮后,对话框也会消失,并且还会去调用that.setData()
那些逻辑。
注意,上面代码写的是that.setData()
,而不是this.setData()
。这是因为setData()
方法定义在页面实例上面,但是由于success()
回调函数不是直接定义在Page()
的配置对象下面,this
不会指向页面实例,导致this.setData()
会报错。解决方法就是在buttonHandler()
的开头,将this
赋值给变量that
,然后在success()
回调函数里面使用that.setData()
去调用。关于this
更详细的解释,可以参考这篇教程。
这个示例的完整代码,可以查看代码仓库。
今天的教程就到这里,对于初学者来说,已经讲了很多东西,可能需要慢慢消化。如果对网页开发和 JavaScript 语言不熟悉,你也许会觉得不容易完全理解,不用担心,初学者只需要知道加入脚本的方法,以及脚本可以达到的效果就可以了,后面做到实际的项目,慢慢就会加深理解。
有了脚本以后,就可以通过小程序 API,去调用微信的各种内置能力。下一篇教程将重点讲解如何使用小程序 API。
小程序入门教程之微信-01-功能介绍
小程序入门教程之微信-02-页面样式
小程序入门教程之微信-04-API使用
小程序入门教程之微信-03-脚本编程相关推荐
- 小程序入门教程之微信-02-页面样式
这个系列的,上一篇教程教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
- 从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
- 从零开始的微信小程序入门教程
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
- 微信小程序入门教程---列表渲染多层嵌套循环及wx:key的使用(双层for循环)
前言 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...
- 微信小程序入门教程 --(保姆级)
一.小程序注册 1.首先,到小程序官网注册自己的小程序账号,以下附有地址和教程: 小程序官网 进入这个地址之后,会看到这样的页面,点击立即注册按钮 2.在接下来的页面,选择小程序 3.然后根据提示完成 ...
- 微信小程序入门1--新建微信小程序页面
微信小程序入门1–新建微信小程序页面 在新建微信小程序后会自动生成一个DEMO实例,我们可以在实例中修改自己所需的内容,当内容过多时,实例中的页面不足以满足我们的需求,因此需要新建微信小程序页面. 本 ...
- 微信小程序入门教程学习笔记
写在前面: 作为一个刚刚入坑微信小程序的小白,以下是我在学习中的笔记,因为我真的太健忘了... 文章中可能会有错误,但是我会不断的修正的. 谢谢浏览,如有错误烦请指正 (≧∀≦)ゞ 微信官方的小程序开 ...
- repost-微信小程序入门教程之一:初次上手
repost 4 http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html 微信是中国使用量最大 ...
最新文章
- 区块链简史:解读这场技术革命的前世今生
- 二分法典例:木棒切割问题
- 【组队学习】【27期】动手学数据分析
- Deepmind最新研究:从图表示学习看算法推理
- python威氏符号秩次检验(Wilcoxon Signed-Rank Test)
- Kattis之旅——Prime Reduction
- Android studio 使用SVN需要忽略的文件
- 【软件工程】软件文档
- 最新java初级高级,python基础进阶,机器学习视频资料
- php重写curl_setopt函数,PHP curl_share_setopt函数
- AI 实战:GPS实景识别网络项目(源码共享)
- 文档中某些特定数据查询
- Spring Cloud入门-Oauth2授权之JWT集成(Hoxton版本)
- Deepin和Windows10双系统,如何修改默认启动项
- 我的漫漫程序人生路(真诚的长文,慎点)
- 征途服务器文件,如何使用云服务器架设征途
- Bouncing Ball
- 解决docker容器中使用composer,无法解析安装包
- 将PSD文件导出图层
- 网络爬虫playwright实现网站自动登录并签到