从零开始三天学会微信小程序开发（一）

看到不少入门的小程序开发者不断的问重复性的问题，我们从实战角度开发了这个课程，希望能够帮助大家了解小程序开发。

课程分三天：

• 第一天：微信小程序开发入门
• 第二天：给小程序接入云端数据
• 第三天：完善我的小程序

有任何问题欢迎大家加v：xiaowon12 ，一起交流技术，享受写程序的乐趣。

前言

（一）本课程适合的人群

本课程由Bmob后端云开发制作，旨在帮助有兴趣接触微信小程序开发的初学者，快速掌握微信小程序开发的能力。

本课程不讲理论知识，一切以实践为主。

（二）本课程的学习成果

学习完毕本课程，你可以自主开发类似于下面的微信小程序：学生评语大全。

（三）本课程的学习路径

实践出真理，模仿和动手是本课程推荐的学习路径。

对于这种技能型的课程，反复不断的依葫芦画瓢，按课程的指引敲去代码，你将快速掌握小程序开发所需要的各种能力，内心产生成就感，才会有动力和激情去实现更复杂的功能。

在不断反复练习的过程中，你将在某一时刻产生顿悟，从而深刻领悟编程的美妙。

Enjoy yourself！

（四）需要了解的前置知识

本课程假设学习者掌握了最基本的编程知识，包括if条件语法、for循环语法、css样式的基本知识。

当然了，如果你是编程方面的新手，也无所谓，你只要严格遵循上面的学习路径的原则，反复去依葫芦画瓢，去敲代码，你也一样可以顺利完成本课程的学习内容。

二、第一天：微信小程序开发入门

（一）注册微信小程序

浏览器打开https://mp.weixin.qq.com/，点击右上角的立即注册链接，按指引注册小程序账号，如下图所示。

注册完成之后，进入小程序控制台。

点击 “开发 --> 开发管理”，你可以在“开发者ID”中看到“小程序ID”，如下图所示。这个小程序ID将会在下面的开发中使用到。

同时在这个页面的“服务器域名”中，“request合法域名”中添加 https://api.bmobcloud.com ，如下图所示：

（二）下载安装小程序开发工具

打开下面的网址：

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

根据你的电脑系统版本，下载合适的开发工具。对于大部分学习者来说，都是选择“稳定版 Windows 64”开发工具，如下图所示：

下载完成后，按默认的指引安装即可。

（三）创建小程序项目

打开微信开发者工具，用微信扫码登录，然后点击“ + ”按钮，如下图所示：

在创建小程序的对话框中，输入项目名称（如 StudentComment），选择项目存放的目录，AppID一栏填写你在微信小程序官方后台中获取到的AppID，后端服务选择“不使用云服务”，模板选择“JS-基础模板”，然后点击“确认”按钮，如下图所示：

（四）预览和发布小程序

现在，开发工具已经自动生成了一些简单的示例代码。下面，我们对自动生成的代码进行“预览”和“上传”到微信小程序中心。

点击“预览”按钮，在弹出界面中选择“启动PC端自动预览”，然后点击“编译并预览”按钮，如下图所示：

待编译成功，会自动弹出小程序的最终运行效果，如下图所示：

当我们开发好小程序之后，还需要把小程序上传到微信的服务器上。点击开发工具右上角的“上传”按钮，在弹出界面中输入更新类型、版本号和项目备注，然后点击上传，如下图所示。

如果代码不存在任何问题，很快就会弹出“代码上传成功”的提示框，表示上传成功。

上传成功后，我们回到微信小程序官方后台。点击“版本管理” 链接，可以看到上传的小程序版本。如下图所示。

点击“提交审核”按钮，按要求填写资料。完成之后，会在审核版本中看到刚刚申请的审核版本，如下图所示。

等到负责审核的工作人员通过之后，我们再执行最终的“发布”动作，我们开发的小程序才会出现在大众面前。

（五）了解项目目录结构

我们回到微信开发工具，看看自动生成的项目结构和文件，如下图：

不同于其他的移动开发框架，小程序的目录结构非常简单，因为微信内部帮我们完成了复杂的设备兼容、屏幕适配、权限申请等一系列繁琐的工作，让我们的开发变得轻松自在。

下面，简单带大家来认识一下这些文件。

• 项目的根目录下面有3个文件：app.js、app.json、app.wxss。这3个文件都是主管整个小程序的，它们的作用如下表所示：

文件	作用
app.js	整个小程序的代码文件
app.json	整个小程序的配置文件
app.wxss	整个小程序的样式文件

• 我们还看到，默认的pages文件夹下面有2个文件夹，一个为index，另一个为logs。顾名思义，pages是页面的意思，也就是说，pages文件夹下存放的都是小程序的页面。每个页面文件夹下面有4个文件，它们的作用如下表所示：

文件类型	作用
js	这个页面的代码文件
wxml	这个页面的页面结构
wxss	这个页面的样式文件
json	这个页面的配置信息

• utils是小程序的公共工具文件夹，目前放了一个util.js文件。

（六）删除一个页面

logs页面在本课程中用不到，我们可以直接删除（文件夹和文件），删除后的结构如下图所示：

可我们对项目进行预览的时候，会提示下面的错误：

我们按照提示，打开根目录下的app.json文件，去掉pages配置下的"pages/logs/logs" 这行，即可正常运行。修改后的app.json文件如下：

（七）添加一个新的页面

我们这个项目要做的小程序只有两个页面，一个是首页，展示评语的分类信息，一个是内容页面，可以看到这个分类下面的评语内容。index页面我们可以用来做首页，那么，我们还需要添加一个内容页面。

方法如下（先创建文件夹，再创建page页面）：

• 选中pages文件夹，然后鼠标移动到pages上方的“新建文件夹”按钮处，并点击它。

• 在弹出的界面中输入文件夹的名称，如detail，如下图所示：

• 鼠标选中新建的detail文件夹，点击右键，在弹出的菜单中，选择“新建Page”

• 在弹出的界面中输入页面名称，如detail。

这样，新的页面就创建好了。这时候，我们再次打开app.json文件，会发现pages节点下自动增加了一行 “pages/detail/detail”，如下图所示：

这里需要说明一点的是，如果我们调换一下app.json中的2个页面的顺序，如下图，默认的小程序首页则变成了刚刚创建的页面。

（八）编写第1个界面

1.由于默认的index页面有很多我们不需要用到的内容，这会影响我们的理解，所以，先重复（六）、（七）的操作，删除index文件夹，再重新创建新的index页面。这里需要注意的是：请确认app.json文件里面的pages节点中的pages/index/index排在第1位，这样打开小程序的时候，首先显示的才是index页面的内容。

2.设置小程序的标题
系统默认生成的小程序标题是“Weixin”，而我们这个项目的名称是“学生评语大全”，所以要修改过来：打开app.json文件，把navigationBarTitleText的值改为“学生评语大全”。

保存之后，会发现标题已经自动更改了。如下图所示：

3.修改首页index.wxml的页面内容
打开index.wxml文件，把里面的内容修改为：

<view>
  减轻您的工作，一键生成各种评语
</view>
<view>
  <navigator url="/pages/detail/detail">小学期末</navigator>
</view>

view和navigator我们称为组件（更多小程序组件请查看附件）。

view是容器组件，我们可以在view组件中放任何的其他组件。navigator是导航组件，可以用这个组件来实现点击跳转的功能，url里面的内容是点击之后跳转的地址。这个例子中，当我们点击“小学期末”之后，会跳到“/pages/detail/detail”这个页面去。

保存之后，页面效果如下：

4.美化小程序首页界面效果

现在的页面还很丑陋，需要进一步美化。修改index.wxml文件如下：

<view class="head">
  减轻您的工作，一键生成各种评语
</view>
<view class="links">
  <navigator class="btn" url="/pages/detail/detail">小学期末</navigator>
</view>

打开index.wxss文件，添加下面的样式内容：

.head{
  display: flex;
  font-size: 36rpx;
  justify-content: center;
  margin-top: 40rpx;
}

.links{
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.btn{
  border: 2px solid #5db59d;
  padding: 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}

修改后的界面效果如下：

可以看到，在index.wxml文件中，组件里面多了class=”***”，***对应index.wxss里面的样式块。我们可以给这些组件赋予不同的样式，从而改变页面的界面效果。

本教程不打算对所有的样式都进行解释，大家可以自行搜索css的相关内容进行学习。这里需要大家重点去了解Flex布局，也就是上面样式块中的“display: flex;”。

Flex也称为弹性布局，是W3C组织在2009年提出的一个新的布局方案，旨在让页面的布局更简单，以便更好的支持响应式布局。有了Flex布局，我们就可以很好的解决传统布局中很难解决的，比如垂直居中的问题。

（九）给页面绑定数据

到目前为止，我们呈现在页面上的数据都是固定的，写死在页面中的。而在实际应用中，我们的数据往往是动态的，由代码获取或者生成的。这就涉及到了数据的绑定。

下面我们给页面绑定数据。

• 修改index.js文件，在data里面新增info和link两项内容（info和link是我们定义的名称，你在练习时可以修改为其他的名称）。我们可以称info和link为变量。如下图所示：

• 修改index.wxml文件

<view class="head">
  {{info}}
</view>
<view class="links">
  <navigator class="btn" url="/pages/detail/detail">{{links}}</navigator>
</view>

可以看到，index.js定义的变量用{{}}包着。

现在，我们再预览页面效果，和之前是一样的。

（十）给页面绑定数组数据

本案例中，我们的分类不只是“小学期末”一个，还有很多。那么，我们应该如何绑定更多的数据呢？

• 修改index.js文件，这次，给links变量赋值的是数组，如下图所示：

• 修改index.wxml文件的navigator组件，添加wx:for和wx:for-item，如下：

<view class="links">
  <navigator class="btn" url="/pages/detail/detail" wx:for="{{links}}" wx:for-item="link">{{link}}</navigator>
</view>

了解for循环语句的人应该能够猜到，这是表示对links数组进行遍历，每次获取一个，获取到的那个项的值存储在link变量中（对应wx:for-item），所以，导航的文字是{{link}}。

我们再次预览页面的效果时，发现出现了三个链接，但是这三个链接非常挤，如下图所示。

• 修改index.wxss文件，给btn样式添加多一行“margin-right: 28rpx;”，表示当前这个组件相隔右边的组件28rpx。

最终的预览效果如下：