怎么看微信小程序和WXML | 牧天的酒吧

怎么看微信小程序和WXML

2017-01-12 11:38:00 于 技术

一、什么是WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。用以下一些简单的例子来看看 WXML 具有什么能力：

数据绑定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

二、小程序与HTML5
微信小程序用的是QQ浏览器x5内核，但又不是完全使用。wxml被翻译成html后，有部分组件还是用的native方式，例如canvas。

小程序不但颠覆了开发方式，还颠覆了分发方式。开发方式上，小程序颠覆了原生的模式，一套wxml，可以跑在安卓和ios平台。分发方式上，小程序靠着微信这个大后台，加上安装方便，对app的开发商有巨大的吸引力。开发商终于可以摆脱安卓一堆垃圾应用市场了。

而H5只是一种纯开发方式，没有小程序的后台背景和分发渠道，但H5的开发者前端人员众多，再加上H5也是跨平台（虽然跨的不完美），再加上天生的动态能力，对于一些内容类的app的开发商有巨大吸引力。

要说商机的话，小程序潜力巨大，关键就是背靠微信这个平台，用户在安装的门槛上，比传统app要低的多。这促使app开发商不得不同时也做小程序版。因为你不做，可能别人就抢做了。同样的功能，用户可能更愿意用小程序版的。如果你不做，就把流量分给对手了。

用户在有小程序版后，很可能就把原版app卸载了，特别是对一类功能单一的app，如摩拜单车等。这就导致一个巨大的，潜在的影响，这类app的流量锐减，被分流到小程序里。但小程序的限制非常多，如果不允许弹推荐，没有外链等，安装大小有限制，这类app可能收入反而下降了。但整个市场被规范了，相当于是次洗牌。

QQ浏览器x5内核正在升级到可以支持web assembly的版本，那就可以彻底取代app了，性能上几乎没区别。

三、WXML的考虑

1、可以借此“以原生组件替换 web 组件的方式进行优化”

每一个使用原生 UI 渲染、或在自定义 WebView 中优化过的组件都对应着 Mobile Web 中的一个老大难问题。比如在 iOS 上让顶部或底部的 Tab Bar "Fixed"，比如视频的自动播放与控制力，比如地图、textarea 等，可以说利用有限的资源显著提高了小程序的可用性。

2、约束

由于 Web 前端开发者的良莠不齐，小程序通过限定一组 Web 技术的子集，可以很好的约束开发者写出性能与体验不低于基线的代码，这与 Google 的 AMP 异曲同工。

3、后续优化的可能

由于小程序中的 wxml 与 wxss 都是比较 high-level 的抽象，所以微信团队可以在不影响开发者源代码的情况下，通过升级 Runtime 与组件的实现不断优化小程序的性能，比如完全迁移到类似 React Native 或 Weex 这样的 JS-to-Native 方案。

四、了解更多信息

1、如何客观地评价「小程序」的体验?

2、你好，我是小程序

3、这里有些小程序，等你来扫

4、张小龙首次全面阐述小程序

5、微信小程序带来的失业恐慌

五、微信小程序指南图

回主页