三周学会小程序第二讲：客户端代码准备和基础功能讲解

经过上一讲你们已经申请了小程序了，这一讲咱们主要讲解三部分，小程序开发工具使用，客户端代码准备，和基础的客户端讲解，而且运行第一预览版本。
本文不会带你从零搭建一个小程序，而是直接提供一个可预览版本。总结小编本身的编程经历，若是让你从基本类型，控制语句，for循环开始学 JAVA，那么可能几个月之后你才能真正动手作项目，因此咱们按照“拿来主义”，直接拿来就读，读懂就改，改完就上线。不过你不用担忧这样学习的不完全，由于开发过程当中你已经融会贯通了。

代码准备

想必你们都用过Github吧，小编把每期的源码直接开源到了 Github，地址 https://github.com/codedrinke... ，而且为中途加入的小伙伴考虑，源码会按照每一章节打一个 Tag，因此本期的 Tag 是 V2。你能够选择 fork 代码到你本身的 Github 仓库，而后再克隆到本地。代码准备好咱们就进行下一步下载工具运行开发了。

开发工具使用

首先介绍一下小程序官网文档地址
https://developers.weixin.qq....
这个你要存一个书签，由于后面可能一直用的到。他包括简要教程、框架、组件、API和工具，对了还有一个论坛，遇到一些标签，API的用法这里来这里查询，不过你在开发过程当中遇到的问题，能够直接在小编建立的群里讨论，加群方式见文末。
如今咱们下载开发工具，由于小程序开发是微信团队本身开发的引擎，因此须要使用它们本身的工具。下载地址：
https://developers.weixin.qq....
下载完成之后进行安装，安装之后按照以下步骤导入源码并运行。
首先咱们须要扫码登陆，扫码的微信是你注册小程序的微信，你也能够经过开发者登陆(经过公众平台->用户身份->编辑添加开发者)。

其次咱们须要选择小程序选项，另外一个是公众号开发。

最后咱们导入源码，项目目录选择咱们刚才克隆好的源码，会自动的关联一个 AppID，这个ID 是个人小程序的，你须要去上一节你注册好的帐号下面寻找，公众平台->设置->开发设置->AppID获取本身的小程序ID并填写到此处，最后修更名称为你的名称，点击肯定便可。

导入成功之后你就看到了以下界面。

咱们按照下图简单讲解一下使用，仍是老的原则，咱们就讲立刻可能用到的功能。
1，模拟器，打开左边的实时预览小程序的界面。
2，编辑器，打开右边编写代码的界面。
3，调试器，默认不打开，至关于 Chrome 的控制台。由于自己微信小程序的代码源于前端，因此他的调试方式基本和 Web 的调试方式同样。
4，编译，代码有修改之后点击一下会保存编译，或者你直接用 CTRL+S 保存，也会自动编译，同时更新左边的模拟器。
5，预览，编写告一段落之后，想本身在手机上面看下，点击这个按钮，扫码查看。
6，模拟器视图。
7，编辑器视图。
这时候你能够点击预览，而后经过手机扫码试一下，就能够看到本身的第一个小程序喽。下面咱们把目光回到编辑器。

项目结构

如图，小编搭建了一个基础的小程序架子：

images，存放一些图片资源，目前就放了一个Logo。
pages，是小程序全部的功能页面，目前只有一个首页，另外pages是一个顶级目录，若是有其余的模块须要区分不一样的子目录，这个具体咱们后面开发过程当中你就会理解。
pages/question， 每个页面目录都有四个文件，js是用于逻辑控制，json是一些基础的配置，wxml能够直接理解为html页面，用于呈现页面，而wxss是咱们熟知的 css文件，一个目录下面相同前缀的会自动关联到一块儿，因此这里咱们所有命名为index前缀。
.gitignore，Git的忽略文件。
app.js，是项目总的逻辑入库文件，好比咱们想打开APP的时候作一些数据的初始化，都在这个文件，后面咱们会详细讲解。
app.json，是项目总体配置文件，里面会包括小程序包含页面的配置，小程序名称，背景颜色，标题颜色等基础配置。
app.wxss，是项目的总体样式文件，一些通用的样式代码能够放在这里。
project.config.json，这里就是一些基本的配置，小程序库的版本，包括咱们刚才填写的AppID都是在这里配置。

首页讲解

下面咱们回到咱们最关心的首页布局。

如图，其实布局起来仍是比较简单的，咱们只要想好本身写成什么样子就能够。小编的布局比较简单。
view 你能够直接理解成为 div，页面的基础布局元素，同时他也是块级元素。
如图能够看出，小编经过 view 把首页分红了上中下三个部分，简介包括一个 image(img)标签和一个text(span)，登陆是一个 button标签最后的社区规则是一个 view标签。为了美观小编简单的调整了一下样式，固然 css的语法和基础的 web的语法是同样的，咱们在 wxml 文件的标签里面定义 class，而后再 wxss里面实现这个样式就能够，若是你有CSS 基础应该一看就懂，若是你不了解基础的 HTML，CSS语法，请恶补一下。或者直接切换wxml和wxss文件，对照一下就明白了。

做业

为了让你更简单的上手，小编本身给了你框架，可是你须要学会怎么修改。因此这一节的做业是：
1，修改首页左边的 LOGO 为你的LOGO。
2，修改描述为你的描述。
3，修改社区规则为你的规则。
4，修改主色调为你的颜色，提示一下颜色的设置有三个文件 app.wxss,app.json,pages/question/index.wxss。

问答

若是您对本系列文章有兴趣，欢迎置顶本订阅号，第一时间获取更新。
若是有任何问题，欢迎加入下方交流群。请添加小编微信，切记备注“小程序”，小编拉你进去。【只讨论技术，非诚勿扰】

关注

小编运营的订阅号 “码匠笔记”，就前后就任于 ThoughtWorks、阿里巴巴等互联网公司的经验分享，包含但不限于 JAVA、并发编程、性能优化、架构设计、小程序、开源软件等。有兴趣能够关注一波，一块儿学习、讨论。