1.什么是小程序？ 2017年百度百科十大热词之一，微信小程序（wei xin xiao xu），简称Mini ，英文名称为Mini，是一款无需下载安装即可使用的应用程序（张小龙的它的定义是不需要安装，用即走，其实是需要安装的，但是小程序的体积很小，下载速度很快，用户感觉不到下载过程) 限制：同一个分包内的页面共享相同的预下载大小限制2M，在工具中打包时会验证该限制。 2017年1月9日零点，万众期待的首批微信小程序正式低调上线。 2、小程序能做什么？它是App的补充，提供与App类似的功能。 轻应用比App操作更简单。 通过微信扫一扫或者搜索，就可以下载用户不经常使用但又不得不使用的功能软件。 目前看来，小程序是连接线上线下开发的首选，门槛低、成本低。 三、相关信息

官方网站：微信公众平台

第一个小程序

开发小程序的第一步就是拥有一个小程序账号。 通过该账号，您可以管理您的小程序。

跟着本教程开始你的小程序之旅吧！

1. 申请账户

进入小程序注册页面，按照指引填写信息并提交相应材料，即可拥有自己的小程序账号。

在这个小程序管理平台中，您可以管理您的小程序的权限、查看数据报表、发布小程序等操作。

登录小程序后台，我们可以在菜单“开发”-“开发设置”中看到小程序。

小程序相当于小程序平台上的身份证，以后你会在很多地方使用到它（注意，这与服务号或订阅号不同）。

当我们有了小程序账号之后，我们就需要一个开发小程序的工具。

2. 测试号申请

请先完成测试号的申请任务。

3.安装开发工具

进入开发者工具下载页面，根据您的操作系统下载对应的安装包并安装。 更详细的开发者工具介绍请参见《开发者工具简介》。

打开小程序开发者工具，使用微信扫描二维码登录开发者工具，准备开发你的第一个小程序吧！

4.你的第一个小程序

新建项目，选择小程序项目，选择存放代码的硬盘路径，填写刚刚申请的小程序，给项目起一个好听的名字，勾选“不使用云服务”（注意：您需要选择一个空目录来创建项目），单击“新建”，您将获得您的第一个小程序。 单击顶部菜单上的“编译”即可在微信开发者工具中预览您的第一个小程序。

接下来我们来预览一下这个小程序的效果。

5.编译预览

点击工具上的编译按钮，可以在工具左侧的模拟器界面上看到这个小程序的性能。 您还可以通过微信扫一扫，点击预览按钮，体验手机上的第一个小程序。 （下图不是原图，下图是我已经写好的，原图忘记截图了）

通过本章，您已经成功创建了您的第一个小程序，并体验了它在微信客户端上的流畅表现。

6.目录结构

小程序由一个描述整个程序的应用程序和多个描述各自页面的页面组成。

一个小程序的主体部分由三个文件组成，必须放在项目的根目录下，如下：

文档

必需的

影响

应用程序.js

是的

小程序逻辑

应用程序.json

是的

小程序公共配置

应用程序.wxss

不

小程序公共样式表

小程序页面由四个文件组成，分别是：

文件类型

必需的

影响

js

是的

页面逻辑

wxml

是的

页面结构

json

不

页面配置

西西

不

页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径和文件名。

第一个小程序项目中生成了不同类型的文件：

.json 后缀为 JSON 配置文件 .wxml 后缀为 WXML 模板文件 .wxss 后缀为 WXSS 样式文件 .js 后缀为 JS 脚本逻辑文件

接下来我们分别看看这四个文件的作用。

7.JSON配置

JSON 是一种数据格式，而不是一种编程语言。 在小程序中，JSON起到静态配置的作用。

我们可以看到项目根目录下有一个app.json和..json，/logs目录下还有一个logs.json。 我们依次解释一下它们的用途。

8.小程序配置app.json

app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面性能、网络超时、底部标签等。 项目中app.json配置内容如下：

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" } }

复制

我们简单说一下这个配置中每一项的含义：

——用于描述当前小程序所有页面的路径。 这是为了让微信客户端知道你的小程序页面当前定义在哪个目录下。 字段 - 定义小程序所有页面的顶部背景颜色、文字颜色定义等。

其他配置项详情请参考文档小程序的配置app.json。

9.工具配置..json

通常大家在使用一个工具的时候，都会根据自己的喜好进行一些个性化的配置，比如界面颜色、编译配置等，当你换到另一台电脑，重新安装该工具时，就得重新配置。 考虑到这一点，小程序开发者工具会在每个项目的根目录下生成一个..json。 您对该工具所做的任何配置都将写入此文件。 当您重新安装工具或者换电脑工作时，只要加载同一个项目的代码包，开发者工具就会自动帮您恢复开发项目时的个性化配置，包括编辑器的颜色、自动上传代码时的压缩，以及一系列选项。其他配置项详细请参考文档开发者工具配置

10.页面配置page.json

这里的page.json实际上是用来表示/logs目录下的logs.json等小程序页面相关的配置。 如果你的整个小程序的风格是蓝色，那么你可以在app.json中声明顶部颜色为蓝色。 实际情况可能并非如此。 也许你的小程序中的每个页面都有不同的色调来区分不同的功能模块。 因此，我们提供了page.json，以便开发者可以独立定义每个页面的一些属性，比如刚才讲的顶部颜色、是否允许下拉刷新等。其他配置项的详细信息请参考文档页面配置。

11.JSON语法

以下是小程序中JSON配置的一些注意事项。 JSON文件用大括号{}包裹开发微信小程序的工具，数据以key-way表示。 JSON 的 Key 必须用双引号括起来。 实践中，在编写JSON时，忘记在Key值上加双引号或者写双引号而不是单引号是一个常见的错误。

JSON的值只能是以下数据格式。 任何其他格式都会触发错误，例如 in.

数字，包括浮点数和整数字符串，需要用双引号引起来。 Bool 值，true 或数组，需要用方括号括起来 [] 对象，需要用大括号括起来 {} Null

还需要注意的是，JSON 文件中不能使用注释，尝试添加注释会导致错误。

12.WXML

从事过Web编程的人都知道，Web编程使用的是HTML+CSS+JS的组合。 HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于对页面进行处理。 与用户的互动。

同样的，在小程序中也有同样的作用，其中WXML扮演着与HTML类似的角色。 打开//.wxml，您将看到以下内容：

获取头像昵称 {{userInfo.nickName}} {{motto}}

复制

与 HTML 非常相似，WXML 由标签、属性等组成。 但也有很多区别，我们一一解释一下：

标签名称有点不同。 在编写HTML时，经常使用的标签是div、p和span。 在编写页面时，开发者可以根据这些基本标签组合不同的组件，例如日历、弹窗等。 换句话说，既然大家都需要这些组件，那我们为什么不把这些常用的组件封装起来，大大提高我们的开发效率呢。 从上面的例子可以看到，小程序的WXML中使用的标签有view、text等，这些标签是小程序为开发者封装的基础能力。 我们还提供地图、视频、音频等组件能力。 。 更详细的组件说明请参考下一章。 小程序有更多的属性如wx:if和表达式如{{ }}。 在一般的网页开发过程中，我们通常会通过JS操作DOM（对应HTML描述生成的树）来引起界面的一些变化，以响应用户的行为。 例如，当用户点击某个按钮时，JS 会将一些状态记录到 JS 变量中，同时通过 DOM API 操作 DOM 的属性或行为，从而引起界面的一些变化。 当项目变大时，你的代码中会充满大量的界面交互逻辑和程序的各种状态变量。 显然这不是一个好的开发模式，于是就有了MVVM开发模式（例如Vue），主张渲染和逻辑分离。 简单来说，JS不再需要直接控制DOM。 JS只需要管理状态，然后使用模板语法来描述状态和界面结构之间的关系。 小程序的框架也采用了这个思路，如果需要在界面上显示一个字符串。

WXML是这样写的：

{{msg}}

复制

JS 只需要管理状态：

this.setData({ msg: "Hello World" })

复制

通过 {{ }} 语法将变量绑定到接口称为数据绑定。 仅数据绑定不足以完全描述状态和接口之间的关系。 还需要 if/else 和 for 等控制功能。 在小程序中，这些控制能力是通过wx:开头的属性来表达的。

更详细的文档请参考WXML 13, WXSS

WXSS具备了CSS的大部分功能，小程序也在WXSS上做了一些扩展和修改。

添加了新的尺寸单位。 在编写CSS样式时，开发人员需要考虑到移动设备的屏幕会有不同的宽度和设备像素比例，并使用一些技术来转换一些像素单位。 WXSS底层支持新的尺寸单位rpx。 开发者可以免去转换的麻烦，直接交给小程序底层来做转换即可。 由于转换使用浮点运算，计算结果会与预期结果略有不同。 提供全局样式和局部样式。 app.json 和 page.json 的概念与之前相同。 你可以将app.wxss编写为全局样式，该样式将应用于当前小程序的所有页面。 本地页面样式page.wxss只会在当前页面生效。 另外，WXSS仅支持部分CSS选择器。 有关更详细的文档，请参阅 WXSS.14。 JS逻辑交互

一个服务仅仅有界面展示是不够的，它还需要与用户进行交互：响应用户点击、获取用户位置等。在小程序中，我们通过编写JS脚本文件来处理用户操作。

{{ msg }} 点击我

复制

当我们点击按钮的时候，我们希望界面上的msg显示为“”，所以我们在on:上声明了一个属性，并在JS文件中声明了一个方法来响应这次点击：

Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } })

复制

响应用户操作就是这么简单。 有关更详细的事件，请参阅文档 WXML - 。

另外，你还可以在JS中调用小程序提供的丰富的API。 使用这些API，你可以轻松激活微信提供的能力，比如获取用户信息、本地存储、微信支付等。在前面的例子中，wx. //.js中调用获取微信用户的头像和昵称，最终将获取到的信息展示在界面上。 更多API请参考文档小程序的API。 通过本章，您已经了解了小程序中涉及到的文件类型以及对应的角色。 下一章我们将把本章涉及的文件通过“小程序框架”“串起来”，让它们都可以开始工作。

15. util公共函数定义及阅读

util目录下的util.js文件专门用于小程序项目中公共函数的定义。 项目开发过程中的公共代码方法可以提取并封装到util.js文件中。

1.util/util.js中定义的公共方法

const toStr = s =>{ s="你好，"+s; return s; } module.exports = { formatTime,toStr }

复制

2、将指定页面的js中引入的js文件模块化

//通过require方式引入整个util //const util=require("../../utils/util") //通过import方式引入整个util //import util from "../../utils/util" //引入指定的模块 import {formatTime} from "../../utils/util"

复制

采用整体介绍法。 调用时请使用实例名和模块名，例如：util.(new Date());

3.使用页面事件完成数据赋值和显示

onLoad() { this.setData({ loginTime:formatTime(new Date()) }); if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } }

复制

小程序配置 1.全局配置

小程序根目录下的app.json文件用于全局配置微信小程序，确定页面文件的路径、窗口性能、设置网络超时、设置多个标签页等。

完整的配置项说明请参考小程序全局配置。

以下是一个app.json，其中包含一些常见的配置选项：

{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/index", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

复制

完整的配置项说明请参见小程序全局配置二。 页面配置

每个小程序页面还可以使用同名的.json文件来配置该页面的窗口性能。 页面中的配置项会覆盖app.json中的相同配置项。

完整的配置项说明请参考小程序页面配置。

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

复制

配置小程序/配置

微信现在允许在小程序内搜索。 开发者可以通过.json配置或者管理后台页面包含开关来配置自己的小程序页面是否允许微信索引。 当开发者允许微信索引时，微信会以爬虫的形式索引小程序的页面内容。 当用户的搜索词触发索引时，小程序的页面可能会显示在搜索结果中。 爬虫在访问小程序中的页面时，会携带具体的user-:和场景值：1129。需要注意的是，如果小程序爬虫发现的页面数据与真实用户的呈现不一致，页面将不会包含在索引中。

具体配置说明

页面采集设置：可以关闭整个小程序的索引。 小程序管理后台-功能-页面内容接入-页面收藏切换； 详细配置：可以关闭特定页面的索引 3.配置

小程序根目录下的.json文件用于配置小程序及其页面是否允许微信索引。完整的配置项说明请参考小程序配置

所有页面都会被微信索引（默认）

{ "rules":[{ "action": "allow", "page": "*" }] }

复制

配置path/to/page页面不被索引，其他页面允许被索引

{ "rules":[{ "action": "disallow", "page": "path/to/page" }] }

复制

配置path/to/page页面要被索引，其他页面不被索引

{ "rules":[{ "action": "allow", "page": "path/to/page" }, { "action": "disallow", "page": "*" }] }

复制

注意：如果没有.json，则默认所有页面都可以被索引。 注意：{"": "", "page": "\*"} 是优先级最低的默认规则。 那些没有明确指定“”的将默认被索引。

小程序项目中设置配置文件（默认为.json）时，开发者工具控制台可以显示当前页面是否被索引的调试信息（开发者工具最新版本支持索引提示）

注意：默认情况下启用索引提示。 如果需要关闭索引提示，可以在小程序项目配置文件..json中将该字段配置为

注意：文件内容最大为 5120 个 UTF8 字符