小程序简单案例

小程序框架将整个系统划分为视图层和逻辑层,视图层是由框架设计的标签语言WXML(WeiXin Markup Language)和用于描述WXML组件样式的 WXSS(WeiXin Style Sheets)组成,它们的关系就像 HTML 和 CSS 的关系;逻辑层是一套运行在本地 JavaScript引擎的 JavaScript 代码,在此基础上框架实现了一套模块化机制,让每个 JS 文件有独立的作用域和模块化能力,这套模块化机制遵循 CommonJS 规范。

小程序中视图层和逻辑层的交互是通过数据绑定和事件响应实现的,这是一种单向绑定的机制。这套机制需要首先将逻辑层和视图层的数据和事件进行绑定,当需要修改页面时,逻辑层只需要调用特定的 setData方法修改已绑定的数据,这时框架会自动触发 WXML重新渲染,达到逻辑层对视图的控制;当框架接收到用户交互操作时,会根据视图层绑定的事件,执行逻辑层中对应的事件函数,达到逻辑层对视图层的响应。

例如:

app.json


指定默认启动页面地址

index.wxml


视图层

index.js


逻辑层

页面中的数字随着点击次数增加,这种视图层和逻辑层之间相互通信的机制便是小程序的数据绑定和事件响应系统。


双击666
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 谈谈 MVX 中的 Model 谈谈 MVX 中的 View 谈谈 MVX 中的 Controller 浅谈 MV...
    Draveness阅读 15,027评论 0 60
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,967评论 25 709
  • 一个没赚不到钱,那么就是他读的书不够多。 如何一个人读了很多书,还是没有赚到钱, 那么是他读有用的书不多。 如果一...
    K线战争阅读 1,007评论 0 0
  • 邮轮之行归来后,得知我们一大半时间都漂在海上,很多人惊诧地问:在海上会不会很无聊? 怎么会呢! 邮轮并不是普通的船...
    齐言楚羽阅读 4,044评论 0 1