小程序入门

小程序是什么？

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了

小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很 大 的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是 二者还是有些许区别的

1.网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导 致页面失去响应。而在小程序中，二者是分开的，分别运行在不同的线程中

2.网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操 作。程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏 览器对象，因而缺少相关的DOM API和BOM API 这一区别导致了前端开发非常熟悉 的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的

3.网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、 QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各 式 WebView 小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微 信客户端，以及用于辅助开发的小程序开发者工具

4.网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或 者编辑器即可。 小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开 发者工具、配置项目等等过程方可完成

创建小程序的准备工作

1.申请小程序账号获得小程序绑定的appid

进入小程序注册页面注册页面地址为 (https://mp.weixin.qq.com/wxopen/waregister?action=step1) 然后根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

2.安装开发者工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载地址

通过以上两个步骤小程序的开发准备已经可以了,然后我们打开下载好的小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序

创建小程序

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序

编译预览：点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序

小程序文件结构

在刚才我们创建好的项目中，我们可以看到项目内生成了不同类型的文件有:
1…json 后缀的 JSON 配置文件

2…wxml 后缀的 WXML 模板文件

3…wxss 后缀的 WXSS 样式文件

4…js 后缀的 JS 脚本逻辑文件

我们来分别熟悉一下这四种文件

1.JSON配置文件

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
例如我们刚才快速创建的项目里的app.json配置内容

其中pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等
点击此处前往微信官方文档

project.config.json工具配置 工具上做的任何配置都会写入到这个文件例如界面颜色、编译配置等 这个文件的作用就是当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

pages.json页面配置 独立定义每个页面的一些属性，例如页面顶部导航栏颜色、是否允许下拉刷新等

2.在创建好的项目内我们可以看到一个pages文件夹 这个文件夹里放置的的就是我们的小程序的页面 其中每个页面文件里都有以上4中类型的文件

(1).wxml 充当的就是网页编程内的HTML

(2).wxss 充当的就是网页编程内的css

(3).js 就是处理用户交互的逻辑

此处为关于小程序代码构成的官方文档地址

3.除了app.json全局配置与pages.json页面配置外还有有一种配置 即sitemap配置 用来配置小程序及其页面是否允许被微信索引

发布上线

当项目配置好完成编写之后我们需要将小程序发布上线这样才可以让别人看到我们的小程序
一个小程序从开发到上线一般要经过预览 > 上传代码 > 提交审核 > 发布四个步骤

预览

使用开发者工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。
点击开发者工具顶部操作栏的预览按钮，开发者工具会自动打包当前项目，并上传小程 序代码至微信的服务器，成功之后会在界面上显示一个二维码。使用当前小程序开发者 的微信扫码即可看到小程序在手机客户端上的真实表现

上传代码

同预览不同，上传代码是用于提交体验或者审核使用的。

点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这 里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际 要求来填写这两个字段。

上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传 的版本了。可以将这个版本设置 体验版 或者是 提交审核

小程序管理后台地址

提交审核

为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。
在开发者工具中上传了小程序代码之后，登录 小程序管理后台 - 开发管理 - 开发版 本 找到提交上传的版本。
在开发版本的列表中，点击 提交审核 按照页面提示，填写相关的信息，即可以将小程 序提交审核。
需要注意的是，请开发者严格测试了版本之后，再提交审核， 过多的审核不通过，可 能会影响后续的时间

发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录 小程序管理 后台 - 开发管理 - 审核版本中可以看到通过审核的版本。

点击发布后，即可发布小程序。小程序提供了两种发布模式：全量发布和分阶段发布。 全量发布是指当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本。分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布我们也 称为灰度发布。

一般来说，普通小程序发布时采用全量发布即可，当小程序承载的功能 越来越多，使用的用户数越来越多时，采用分阶段发布是一个非常好的控制风险的办法