做者：知晓云 - 小程序开发快人一步json
了解小程序开发必备的基础知识以后，咱们就要开始本身动手，制做咱们本身的第一个小程序。小程序
这个小程序与开发者工具?默认新建的初始工程相似，会显示用户的头像和名字，同时会向用户显示问候语。微信小程序
准备开发
在开始开发以前，咱们须要完成一系列准备工做。数组
在开发者工具中新建工程
在昨天的文章中，咱们已经谈到如何在开发者工具中新建工程。咱们只需按照实际状况，在开发者工具中新建项目便可。微信
注意，咱们须要在项目目录中选择一个彻底空白的目录（最好直接新建），并取消最后的「创建普通快速启动模板」勾选框。这样，咱们就能新建空白的小程序项目。网络
咱们会在本章中，一步步带领你们一同彻底从零开始建立小程序文件。app
接下来，咱们就进入开发者工具中，新建几个小程序必要的文件。编辑器
调整配置文件
熟悉 iOS 或 Android 开发的?开发者都知道，App 开发会有?名叫「清单文件」的东西，它记录了 App 的图标、名称、兼容性等 App 的元信息，帮助系统更好地运行这个 App。工具
而在微信小程序中，也有功能相似的文件，就是 `app.json`。它记录小程序一些基础配置：学习
l 小程序的全部页面路径
l 小程序全局界面表现
l Tab 标签页配置
l 网络超时
l 调试模式开启或关闭
咱们能够这样新建一个 `app.json` 文件：在开发者工具的编辑器（一般在右上角）中，点击左上方的「+」号，选择 JSON，并命名为 `app.json`。
新建文件后，咱们还得在 `app.json` 写入配置，才能让小程序正常工做。在此，咱们能够直接输入如下代码直接保存。
{}
保存后，咱们能够看到编辑器依然在报错。这是由于 `app.json` 目前是空的。
小程序页面路径配置
接下来，在编辑器中新建「pages」文件夹，并对着文件夹点击右键，新建「Page」起名为 `welcome`。
保存后，`pages` 文件夹会多出几个文件，而 `app.json` 也有相应变化：
{
"pages": [
"pages/welcome"
]
}
能够看到，开发者工具已经自动地将咱们在 `pages` 文件夹中新建的 `welcome` 页面路径，放入到 `pages` 数组中。
在 `app.json` 中，`pages` 数组是必填的。它规定小程序中全部页面的地址，同时规定了小程序启动时的首页，就是 `pages` 数组的首位所指的页面。
当 `pages` 成功配置后，小程序就能够正常运行了（新建页面文件后，小程序已经正常运行无报错了）。但若是想要一些个性化配置，咱们依然能够继续修改 `app.json`。
修改小程序页面标题
咱们以修改小程序页面的全局页面标题为例，了解 `app.json` 更多个性化设置。
在 `app.json` 中，全局页面标题项目被分配在 `window` 大项中，名为 `navigationBarTitleText`。修改后的 `app.json` 形如这样：
{
"pages": [
"pages/welcome"
],
"window": {
"navigationBarTitleText": "我是标题"
}
}
保存后，咱们就能够实时看到小程序已经应用修改。
除了页面标题文字，相似标题栏颜色、Tab 栏内容等信息，均可以直接在 `app.json` 进行配置。
如今，咱们的 `app.json` 已经配置完毕。接下来，咱们就来为小程序增长几个视觉元素。
了解 WXML
插入文字
咱们打开 index 文件夹下的 index.wxml 文件，能够看到开发者工具在自动生成页面的时候，默认生成的代码。
<!--pages/welcome.wxml--> <text>pages/welcome.wxml</text>
没错，咱们在预览区看到的「welcome.wxml」语句，即是由它进行控制的。
第一行的 <!--welcome.wxml-->，是一行注释。计算机在编译代码的时候，会跳过注释，不会对注释代码进行编译。
使用注释，咱们能够对代码的功能，进行一些说明，以便将来对代码进行维护。
咱们看一下第二行的代码。咱们看到，这句代码的先后都是由尖括号包裹起来的部分，中间则是 index.wxml。
咱们试图将中间的 index.wxml 修改为 Hello World（固然，也能够改为你本身喜欢的短语）。修改后的代码变成了这样：
<!--pages/welcome.wxml--> <text>Hello World</text>
当咱们保存、编译后，咱们能够看到，预览区域中原先写着「index.wxml」的地方，已经变成了「Hello World」。
在小程序中，<text></text> 表明文字视觉组件。在它们中间插入的内容，将会直接显示在小程序的相应位置中。
插入图片
接下来，咱们试图在咱们的小程序里插入一张图片。
首先，咱们在根目录下建立一个 image 的文件夹。而后，咱们点击咱们刚才新建的 image 文件夹，点击右边的「...」按钮，选择「硬盘打开」。
这时，电脑会打开咱们的工程文件夹。咱们在文件夹里，打开咱们刚才新建的 image 文件夹，随意将一张图片放进文件夹里面。
接着，开发者工具会自动探测到文件的变化，而后从新刷新工程目录。刷新以后，咱们就能够在 image 文件夹下，看到咱们刚才放进去的文件。
以后，咱们回到 index.wxml，插入刚才放入目录中的图片。
假设咱们放入 image 目录的图片文件名称叫 avatar.jpg，那么咱们须要在文件的底部插入这段代码：
<image src='/image/avatar.jpg'></image>
插入这段代码以后，index.wxml 文件看上去应该是这样的：
<!--pages/welcome.wxml--> <text>Hello World</text> <image src='/image/image.jpg'></image>
保存后，咱们就能够在模拟器中，看到总体效果了。
与 <text> 同样，<image> 也是小程序的一个视觉组件，它表明在小程序里插入一张图片。
有所不一样的是，<image> 组件内不该该插入任何内容。咱们应该在 <image> 组件的 src 属性中，指定须要插入在小程序里的图片。
将代码保存，开发者工具会自动刷新预览。在预览中，咱们能够看到图片虽然已经成功插入，可是比例彷佛不太正确。
这是由于 <image> 自己拥有几种缩放、裁剪模式和尺寸大小，而默认尺寸为 300×225 px，默认模式为「完整填充」。
在 <image> 组件中，增长 `mode`，定义值为 `widthFix`，它可让图片比例正常，并根据设定的宽度，自动按比例调整 <image> 元素的高度。
<image src='/image/avatar.jpg' mode='widthFix'></image>
保存后，能够看到小程序的图片显示就正常了。
插给元素加「框」
在正式开发过程当中，咱们会将屏幕元素分隔成不一样部分，每一个部分能够套用相应样式，使用独立的样式代码，以提升编码效率。
例如，在传统 HTML 开发中，咱们会利用 <div> 框元素对不一样部分进行区分。而在小程序中，咱们能够利用 <view> 达成一样的效果。它的使用方法与 <div> 几乎没有什么不一样
在这里，咱们会将其中的文字、图片元素「绑定」起来，做为屏幕的组成部分。
<!--pages/welcome.wxml--> <view> <text>Hello World</text> <image src='/image/avatar.jpg' mode='widthFix'></image> </view>
这样作，咱们就能够统一处理文字和图片的样式和其余操做。在下一章中，咱们将会对屏幕上的这些元素作一些「美化」操做，并将它们换成用户的资料。
相关阅读：
访问「知晓云」（cloud.minapp.com），学习更多小程序开发课程