2018 年过了不到一个月,时间虽短但有一样新东西在这短短时间里就火了起来。从“跳一跳”,到“坦克大战”,再到“头脑王者”,微信小游戏好像突然将时间拉回到了过去。餐桌上、休息时大家不再是各自刷着微博、段子,而是聚在一起开始一场场紧(ge)张(zhong)刺(zhuang)激(bi)的对战。小游戏充分利用了人们零碎的时间,并将娱乐和社交有效地结合起来。

在小游戏推出之前,本人是看衰小程序的,所以一直没有入坑。然而,小游戏狠狠地打了我的脸,它的出现让我眼前一亮,不单单让我觉得小游戏有着很大的想象空间,更让我觉得微信这个平台有着无限的可能。

当前,微信是将小游戏作为小程序的一个分类,所以暂时先亡羊补牢看看什么是小程序。

小程序

要学一样新东西的最好办法自然是看官网教程。

小程序的官网是微信公众平台,其他什么乱七八糟的都是外包广告啦~

在官网上可以轻松地找到小程序和小游戏的教程。微信的教程也相当详细,这边就不再赘述了。

如果跟着教程走,其中第二步微信会推荐你安装一个开发者工具,这里要吹一波这个工具。

接近完美的开发者工具

新版的开发者工具和之前仅能够用于调试的代理工具完全不同,可以说是鸟枪换炮。

接着就来看一下这个工具到底惊艳在哪里?

首次打开工具,你会看到一个类似下图的界面,会让你填一些项目的基础信息。其中的 AppID 可以通过注册获得,不过即使没有 AppID 也可以先创建项目进行开发,这里先选体验小程序。

如果,选择一个空文件夹作为项目的目录,那么,在工具的最下方就会出现一个模板项目的选项。勾选它,创建的项目就包含了一个微信的 Demo 项目。这个小功能当然不是这个工具的亮点所在,这里先点确定生成一个 Demo 项目。

登登登等~

有没有被惊艳到?

工具左上角的 3 个按钮分别控制模拟器、编辑器和调试器区域的显示与否。模拟器和调试器的模样是不是非常熟悉?[滑稽]

这个开发者工具可以说是集成了浏览器和 IDE,以及代理等工具于一身,所有的开发工作几乎可以在这一个工具中完成,再也不用在一个个应用之间来回切换了。

整洁、干净、完美!(要被吸粉了...)

PS: 虽然,可以在设置里修改编辑器的配置,不过和真正的 IDE 比样子还是丑了一点。

开发工具就说到这,更多功能等你自己去探索。看完了酷炫的工具,平复一下心情,继续来看 Demo 项目。

WXML, WXSS 和 WXS

在 Demo 项目中,你会看到两种新类型的文件:.wxml 和 .wxss。这也是我之前看(xian)衰(qi)小程序的主要原因,它并没有使用标准的文件类型及语法,而是创立了一套微信自己的标准。

WXML

先看一下 wxml 里面究竟有什么名堂?

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

是不是又很熟悉?这不就是多了些默认组件的 vue 嘛。

需要注意的是,{{}} 与引号之间不能有空格,否则会解析为字符串。其他语法层面就没有什么难点了,再撸一遍基础组件文档就差不多了。

WXSS

wxss 的变化就更小了,就多提供了一个单位 rpx

1rpx 等于屏幕尺寸的 1/750。(UI 出 750 的图就很好做啦...)

剩下就提供了一些简单的选择器,类、Id、元素和前后的伪类,没有其他的学习成本。

最后说一下 wxs(Demo 项目中没有用到)。

WXS

什么是 WXS?微信官方是这样说的:

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。

但是,整个文档看下来,除了在模块的处理上有些许的不同之外,其他可以说是破产版的 js 吧。既然,它是 js 的子集,那么,都用 js 来写也没什么毛病,暂时也没有看出什么场景必须使用它。

感觉整套都是 kpi 的产物哪...

小程序其他的配置文件文档里已经写得很清晰了。至此,小程序的基础就暂告一段落,下篇将关于小游戏相关内容,敬请期待。