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

Dear 丶 2021-07-31 17:30 338阅读 0赞

![640?][640]

阅读文本大概需要 8 分钟。

通过上一讲大家已经申请了小程序了，这一讲我们主要讲解三部分，小程序开发工具使用，客户端代码准备，和基础的客户端讲解，并且运行第一预览版本。

本文不会带你从零搭建一个小程序，而是直接提供一个可预览版本。总结小编自己的编程经历，如果让你从基本类型，控制语句，for循环开始学 JAVA，那么可能几个月以后你才能真正动手做项目，所以我们按照“拿来主义”，直接拿来就读，读懂就改，改完就上线。不过你不用担心这样学习的不彻底，因为开发过程中你已经融会贯通了。

**代码准备**

想必大家都用过Github吧，小编把每期的源码直接开源到了 Github，地址

https://github.com/codedrinker/jiuask

并且为中途加入的小伙伴考虑，源码会按照每一章节打一个 Tag，所以本期的 Tag 是 V2。你可以选择 fork 代码到你自己的 Github 仓库，然后再克隆到本地。代码准备好我们就进行下一步下载工具运行开发了。

**开发工具使用**

首先介绍一下小程序官网文档地址

https://developers.weixin.qq.com/miniprogram/dev/index.html

这个你要存一个书签，因为后面可能一直用的到。他包括简要教程、框架、组件、API和工具，对了还有一个论坛，遇到一些标签，API的用法这里来这里查询，不过你在开发过程中遇到的问题，可以直接在小编创建的群里讨论，加群方式见文末。

现在我们下载开发工具，因为小程序开发是微信团队自己开发的引擎，所以需要使用它们自己的工具。下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载完成以后进行安装，安装以后按照如下步骤导入源码并运行。

首先我们需要扫码登录，扫码的微信是你注册小程序的微信，你也可以通过开发者登录(通过公众平台->用户身份->编辑添加开发者)。

![640?wx\_fmt=png][640_wx_fmt_png]

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

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

![640?wx\_fmt=png][640_wx_fmt_png 2]

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

我们按照下图简单讲解一下使用，还是老的原则，我们就讲马上可能用到的功能。

1，模拟器，打开左边的实时预览小程序的界面。

2，编辑器，打开右边编写代码的界面。

3，调试器，默认不打开，相当于 Chrome 的控制台。因为本身微信小程序的代码源于前端，所以他的调试方式基本和 Web 的调试方式一样。

4，编译，代码有修改以后点击一下会保存编译，或者你直接用 CTRL+S 保存，也会自动编译，同时更新左边的模拟器。

5，预览，编写告一段落以后，想自己在手机上面看下，点击这个按钮，扫码查看。

6，模拟器视图。

7，编辑器视图。

这时候你可以点击预览，然后通过手机扫码试一下，就可以看到自己的第一个小程序喽。下面我们把目光回到编辑器。

**项目结构**

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

![640?wx\_fmt=png][640_wx_fmt_png 4]

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都是在这里配置。

**首页讲解**

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

![640?wx\_fmt=png][640_wx_fmt_png 5]

如图，其实布局起来还是比较简单的，我们只要想好自己写成什么样子就可以。小编的布局比较简单。

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。

**我是浪漫的分割线**

**问答**

如果您对本系列文章有兴趣，欢迎置顶本订阅号，第一时间获取更新。

如果有任何问题，欢迎留言，小编很热衷和大家一起讨论技术问题。

另外小编创建了一个技术交流群，请添加小编微信，切记备注“小程序”，小编拉你进去。【只讨论技术，非诚勿扰】

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

**-END-**

本文选自「 码匠笔记」，扫码最底部二维码关注。

如何置顶、标星公众号第一时间获取小程序教程？

![640?][640 1]

文章首发于码匠笔记 ，老哥先后就职于 ThoughtWorks 、阿里巴巴等互联网公司 ，擅长 Java 、Scala 等多种语言 ，并熟悉前端开发 ，从事多年全栈开发工程师 。热衷于技术分享 ，博文创作 ，开源社区 ，开源工具等 。有兴趣的可以扫码关注他哦 。

![640?][640 2]

▲识别二维码关注

[640]: /images/20210731/7a9626551a644ee5b3562fe051c9dc50.png?
[640_wx_fmt_png]: /images/20210731/ac23c8c13b9d40678a555f7a925d6fcb.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/a72af755923d427b821373ce017b4619.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/cb716fdf049644569cd54975b0bacb29.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/e99e800ed8034cafb4150aaeea620e29.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210731/ac773689faba42d88f0b6d0111417d18.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210731/4f27e93dd3bf48c8bed6bfbab20c7719.png?wx_fmt=png
[640_wx_fmt_jpeg]: /images/20210731/5cb80d5a6c964bc497be7e57b8e48d14.png?wx_fmt=jpeg
[640 1]: /images/20210731/168f120780a04eb5b2db76e699a2d665.png?
[640 2]: /images/20210731/8da55bce60764eb5b17811c4e657580f.png?