NOW直播和微信小程序那些事

微信小程序从发布开始，可谓赚足了眼球，一度引发了开发界“全民学JavaScript”的梗。

为了跟上时代步伐，我们NOW直播团队也在发布后第一时间尝鲜，本文就来扒一扒这几天试水小程序开发的那些事。

入门

准备工作

想要开发微信小程序，首先必须要有一个微信公众平台小程序的帐号（目前帐号只有内测邀请唯一途径），此帐号用于获取app id、secret id、添加开发者等管理后台操作。

然后你需要下载官方提供的微信web开发者工具，这是一个集成了编码、调试、预览、发布功能的一个IDE。

编码功能：

调试功能，集成了chrome开发者工具，可以实现样式预览、JS断点调试等：

发布、预览功能，可以在此上传你的程序，预览生成二维码，提供在手机微信上预览小程序的功能；另外，开发者工具还集成了ES6编译、代码压缩等基础代码构建功能：

开发入门

对于哪怕是只有一点点web前端经验的开发者来说，微信小程序的入门门槛简直是低到不能再低了。

一个小程序的主要文件目录简洁到如下：

├─ app.json 
├─ app.wxss
├─ app.js
└── pages
    ├─ index
    │   ├─ index.wxml
    │   ├─ index.wxss
    │   └─ index.js
    └─ my-page
        ├─ my-page.json
        ├─ my-page.wxml
        ├─ my-page.wxss
        └─ my-page.js

一个小程序大体上分为两大块：

• 应用实例app

• 页面pages

应用实例

小程序会读取根目录的app.json，app.js，app.wxss生成程序实例，当然样式文件不是必需的。

程序配置app.json

// app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

在这个文件里可以针对以下内容作小程序的全局配置：

• 页面文件的路径

• 网络超时时间

• 程序级tab配置

• 窗口颜色

• 手机导航栏、小程序标题栏的背景色、字体色，下图是设置了导航栏颜色为绿色的效果：

• 下拉刷新行为（禁用下拉、下拉文字、图标、颜色），下图是典型的下拉刷新效果：

逻辑脚本app.js

每一个小程序都是通过App({/*configs*/})这样一个App方法来注册的，在其具体的配置中，我们可以监听并处理程序级的生命周期函数、声明全局变量。比如，需要设置程序启动、显示时的一些操作，设置一些程序全局的数据、变量、方法，都可以在这里完成。

//app.js
App({
  onLaunch: function () {
    // do something
  },
  global: {
    data: null
  }
})

在app.js里声明的属性及方法，都可以在小程序的任意页面里访问到：

// page.js

//获取应用实例
var app = getApp()
Page({
  doSth: function() {
    console.log(app.globalData);
  }
})

app.js里支持的的程序级的生命周期回调包括：

• onLaunch 小程序初始化完成时触发

• onShow 启动，从后台进入前台显示时触发

• onHide 从前台进入后台时触发

页面

一个页面简单讲可以理解成小程序的一个完整界面单元，每一次完整的界面切换就是page之间的跳转，下图演示一个典型的页面切换、回退过程：

一个页面的组成部分包括：

• 视图层

  • WXML(WeiXin Markup language) 用于描述页面的结构

  • WXSS(WeiXin Style Sheet) 用于描述页面的样式，非必需

• 逻辑层

  • JS 控制页面行为及数据变化

  • JSON 页面级配置，非必需

视图层与逻辑层的关系：数据驱动 + 事件绑定

视图层与逻辑层统一通过数据和事件相互联系起来，用一句话描述就是：数据驱动。

如果你有使用过React、Vue(或其他MVVM框架)等，对于“数据驱动”肯定一点都不陌生了，没错，小程序毫无疑问吸收了这一开发理念。

来看看一个简单页面的代码：

<!--index.wxml-->

<view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
  <text class="userinfo-nickname">
    {{userInfo.nickName}}
  </text>
</view>

//index.js

Page({
  data: {
    userInfo: {
        nickName: 'test',
        avatarUrl:  
                 
                邀请