「大众点评点餐」小程序开发经验 02:视图

2017-3-17 23:03| 发布者: 自媒圈| 查看: 662| 评论: 6| 查看评论

文 | 何延希

何延希,美团点评工程师,4 年 web 开发经验,现在是美团点评点餐团队的一员。

上一期,知晓程序(微信号 zxcx0101)与大家分享了「大众点评点餐」小程序团队带来的小程序技术分析。

本期,我们想要和大家分享下大众点评点餐小程序中,有关 View 视图层的一些开发经验。

本文部分示例来自于「大众点评点餐」小程序的菜单页面。

页面代码结构为:

menu
├── menu.html
├── menu.js
├── menu.json
└── menu.less

我们将要说的小程序的 View 视图层,是由 WXML(menu.html)与 WXSS(menu.less)两大部分组成,由组件——也就是视图的最小单元——进行展示。

视图层将逻辑层的数据(menu.jsmenu.json)反应为视图,同时将视图层中定义的事件发送给逻辑层。

WXML

WXML(WeiXin Markup Language)与 HTML 对应,用于描述页面的结构,可以类比 React 的 JSX。项目中 menu.html 使用 WXML 语法,一个页面的顶层是 page 节点。

在 WXML 中获取逻辑层定义的数据后,我们通过一系列自己的语法和逻辑展示出这些数据。

结构上,组件是视图层的最小单元。我们可以通过以下方式,进行动态渲染。

1. 数据绑定

数据绑定是最简单的使用数据方式。采用 Mustache 语法的变量替换,用双大括号将变量名包起来,包括组件的属性也可以使用变量。

class="dish-item" data-id="{{dishId}}">
  <text class="name">{{dishName}}text>
view>

小程序还支持 ES 6 规范的扩展运算符 ... 和解构赋值。

最新评论

  • 回复 LillianDix 2017-11-22 19:07
    <a href=https://vehnocti.blox.ua>ne uverena chto ehto tak) hotya spasib</a>|
    <a href=https://znayomstvabezmezh.blox.ua>Spasibochki:) Klassnaya tema, pishite chashe – u vas otlichno poluchaetsya :)</a>|
    <a href=https://prygodyinozemtsiv.blox.ua>Razmestil na svoem narodovskom sajte ssylku na ehtot post. Dumayu, mnogim budet interesno!</a>|
    <a href=https://iac.blox.ua>Spasibo, ochen' interesnaya zametka.</a>|
    <a href=https://dwworld.blox.ua>I vse zhe, mnogoe ostaetsya ne yasnym. Esli ne zatrudnit, raspishite podrobnee.</a>|
  • 回复 KeithDeave 2017-10-19 00:06
    Хочу с вами поделиться одной полезной хостинговой компанией под названием ProHoster, которая предллагает  доступный веб хостинг с бесплатным конструктором сайтов, SSL сертификатом, профессиональная ДДОС защита и еще много других полезных и бесплатных фишек. Так-же у данной компании можно заказать виртуальный сервер, аренду выделенного сервера, продажа SSL сертификатов различных типов. Я уже несколько лет работаю с ProHoster и очень этому рад. Вот реф. ссыылка на регистрацию.
  • 回复 Richardlalse 2017-9-12 14:05
    valium for withdrawal
    <a href="http://drugrehabtrustedclinic.com/">drug addiction rehab centers</a>
    addiction treatment programs
    [url=http://drugrehabtrustedclinic.com/]rehab addict[/url]
    symptoms of cocaine use in men
  • 回复 FransdfsUtill 2017-9-12 13:28
    casino online usa
    [url=http://slotsmegacasino.com/]casino online usa[/url]
    casino online
    <a href="http://slotsmegacasino.com/"> casino online usa</a>
  • 回复 FransdfsUtill 2017-9-8 13:57
    casino online
    [url=http://slotsmegacasino.com/]casinos online[/url]
    casino games
    <a href="http://slotsmegacasino.com/"> online casino</a>
  • 回复 FransdfsUtill 2017-9-7 08:36
    online casino
    casinos online
    casinos online
    <a href="http://slotsmegacasino.com/"> casino online usa</a>

您需要登录才可以回帖 登录 | 立即注册

返回
顶部