微信小程序——初体验

微信小程序初体验

腾讯在2017年1月9日发布了微信小程序，距离今天已经过了一周，业界评价褒贬不一。小程序的目的是清理我们手机的空间，将不常用的应用从我们的手机中干掉，然后已小程序的方式打开，类似于C/S转向B/S。
举个栗子，在外打工的同学一般都会租房，租房的渠道由最早的中介，网站，到现在流行的APP。但是我们租房的状态不是一个常态，房子搞定了，APP也就没用了，要么找到房子后就把APP直接干掉，要么留在手机里一直耗费资源还时不时弹一个广告。对于这种短期使用的APP，我们不得不进入手机应用中心，搜索下载然后安装，耗了时间又费了流量。小程序的出现即打破了这种状态，通过微信找到对应小程序的入口，即可以享受到类似于APP的服务，用完后退出即可，省去了下载安装卸载的步骤。
当然小程序无法完全取代APP的，就像网页游戏做的再好也无法做到本地游戏的效果，所以小程序是APP的一个补集，另一种提供服务的形态。

---

Hello World

小程序开发需要使用腾讯专门的IDE，相关账号注册，开发工具下载省略。

创建项目
首先添加一个项目

输入AppID，项目名称和项目目录

项目创建好后，开发目录会生成一个简单的示例，生成两个页面一个主页一个日志页面

编写代码

可以看到项目中已经包含了部分代码，主要有四个类型的文件

• .js 脚本代码，逻辑实现
• .wsml 页面，腾讯自己的前端框架
• .wxss 样式表
• .json 配置文件

首先把Pages/index/index.wxml和Pages/index/index.js清空

在index.wxml添加以下代码

<view>Hello {{name}}</view>
<button bindtap="changeName">点我</button>

在index.js中添加以下代码

var helloData = {
  name: 'Alistair'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    this.setData({
      name: 'MINA'
    })
  }
})

保存后在左侧预览窗口即可以进行查看，效果如下

当点击按钮后，文本会变为Hello MINA。

MINA

MINA是微信小程序的框架，其核心是一个相应的数据绑定系统。整个系统分为视图层和逻辑层。

视图层

• MINA的视图层由WXML与WXSS编写。
• 将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
• WXML(WeiXin Markup language)用于描述页面的结构。
• WXSS(WeiXin Style Sheet)用于描述页面的样式。
• 组件(Component)是视图的基本组成单元。

逻辑层

• 小程序开发框架的逻辑层是由JavaScript编写。