前面两节说了那么多，都没见到一个小程序是如何从无到有的，那我们今天就先解决有无的问题——先把官方DEMO界面运行到微信上。
下载官方DEMO客户端代码
我们首先要从腾讯云官方的Github上fork下来客户端代码。这里为什么要用fork呢，因为从10月起，微信小程序的某些需要授权的接口有所调整，而官方的SDK并没有同步更新，所以在我们需要对其进行一些修改。
导入客户端代码到微信小程序IDE
打开微信小程序的开发者工具，然后使用之前注册过的微信小程序管理员微信扫描二维码进行登录。
工具打开之后，我们新建一个微信小程序项目，点击下图右下角的+按钮进行操作。
然后，我们看到如下图所示的界面，需要选择项目目录并填写appID。其中，项目目录需要选择一个空目录；appID是在注册微信小程序账号时生成的，可通过微信公众平台管理页面查看；并将复选框取消。如果没有appID，也可以点击测试号自动生成一个appID。
再将我们刚才fork的代码，clone到上一步创建小程序的目录当中。这时，我们可以在小程序开发者工具当中看到如下所示的界面。
如上图所示，微信小程序开发者工具主要分为四个区域，最上面的是操作栏区域，左侧为仿真区，中间上侧为代码区，中间下侧为调试区。这样，我们就可以非常方便地调试微信小程序了。
微信小程序的代码结构
这节讲解的微信小程序的代码结构主要指的是客户端代码，其涉及到的语法类似于html、js和css，是由微信官方提供的开发语言，分别对应wxml、js、wxss。下面先介绍一下代码结构。我们直接拿官方DEMO进行讲解，这样比较直观。如果读者直接想先运行小程序，可直接跳到下一节。
启动代码
首先是必不可少的位于项目根目录下的两个文件——app.js、app.json。
app.jsonapp.json主要是对微信小程序的界面结构和界面地址进行声明，相当于告诉微信我的所有页面都在什么位置，我的整体布局是什么样子的。看DEMO代码。1
2
3
4
5
6
7
8
9
10
11
12{
"pages": [
"pages/index/index",
"pages/chat/chat"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#333",
"navigationBarTitleText": "腾讯云小程序解决方案",
"navigationBarTextStyle": "white"
}
}app.json代码中的pages就是声明该小程序有两个页面，地址分别是pages/index/index和pages/chat/chat，其中第一个页面将被默认为小程序的首页。app.jsapp.js是该小程序启动的入口程序，也就是相当于main函数。看DEMO代码。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15/**
* @fileOverview 微信小程序的入口文件
*/
var qcloud = require('./vendor/qcloud-weapp-client-sdk/index');
var config = require('./config');
App({
/**
* 小程序初始化时执行，我们初始化客户端的登录地址，以支持所有的会话操作
*/
onLaunch() {
qcloud.setLoginUrl(config.service.loginUrl);
}
});这段代码中的
onLaunch方法，就是监听小程序被加载时，需要运行的代码，其设置了服务器登陆接口url。
页面代码
讲过启动时必不可少的两个文件后，接下来讲一下小程序每个页面的代码结构。
由于在app.json中已经声明了，该DEMO共有两个页面，分别是pages/index/index和pages/chat/chat。那么，我们就拿首页为例进行讲解。
微信小程序每一个页面基本都需要包含四个元素，分别是wxml、js、json、wxss，并且这四个文件的文件名应该相同，如index.wxml、index.js、index.json和index.wxss。其中，wxml文件为页面文本文件、js文件为脚本文件、json文件为配置文件、wxss文件为页面样式表。
编译和真机预览
编译
小程序的编译只需要点击
编译按钮即可，编译完成后，在仿真区就可以预览到小程序的界面，并可以点击操作。真机预览
小程序的真机预览功能也非常简单，只需要点击
预览按钮，就会自动在手机上弹出你的小程序界面（前提是微信要开启，且亮屏）。
结束语
由于今天讲的内容并没有涉及到服务端程序，所以手机预览的微信小程序DEMO并不能运行所有功能。小编也将在后续章节继续讲解其他方面内容，使得官方DEMO可以完整地运行。
今天的内容就讲完了，怎么样，还不快去试试？！
