258资源分享网

微信小程序从发布开始，可谓赚足了眼球，一度引发了开发界“全民学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框架)等，对于“数据驱动”肯定一点都不陌生了，没错，小程序毫无疑问吸收了这一开发理念。