# threedaystudyminiprogram
**Repository Path**: SimonFighter/threedaystudyminiprogram
## Basic Information
- **Project Name**: threedaystudyminiprogram
- **Description**: 三天学会微信小程序开发
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-18
- **Last Updated**: 2024-07-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 从零开始三天学会微信小程序开发
## 前言
### （一）本课程适合的人群
本课程由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和navigator我们称为组件（更多小程序组件请查看附件）。
view是容器组件，我们可以在view组件中放任何的其他组件。navigator是导航组件，可以用这个组件来实现点击跳转的功能，url里面的内容是点击之后跳转的地址。这个例子中，当我们点击“小学期末”之后，会跳到“/pages/detail/detail”这个页面去。
保存之后，页面效果如下：
4.美化小程序首页界面效果
现在的页面还很丑陋，需要进一步美化。修改index.wxml文件如下：
```
减轻您的工作，一键生成各种评语
小学期末
```
打开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文件
```
{{info}}
{{links}}
```
可以看到，index.js定义的变量用{{}}包着。
现在，我们再预览页面效果，和之前是一样的。
### （十）给页面绑定数组数据
本案例中，我们的分类不只是“小学期末”一个，还有很多。那么，我们应该如何绑定更多的数据呢？
- 修改index.js文件，这次，给links变量赋值的是数组，如下图所示：
- 修改index.wxml文件的navigator组件，添加wx:for和wx:for-item，如下：
```
{{link}}
```
了解for循环语句的人应该能够猜到，这是表示对links数组进行遍历，每次获取一个，获取到的那个项的值存储在link变量中（对应wx:for-item），所以，导航的文字是{{link}}。
我们再次预览页面的效果时，发现出现了三个链接，但是这三个链接非常挤，如下图所示。
- 修改index.wxss文件，给btn样式添加多一行“margin-right: 28rpx;”，表示当前这个组件相隔右边的组件28rpx。
最终的预览效果如下：
## 三、第二天：给小程序接入云端数据
### （一）为什么要接入云端数据服务
1.微信小程序对单个文件的大小是有限制的，js文件不能超过2MB，其他类型的文件不能超过10MB。如果要在小程序中呈现视频文件或者其他比较大一点的文件的话，就必须将这些文件放在云端，而不是放在小程序里面。
2.更多的时候，小程序上呈现的数据是在变化着的，比如用户的评论信息、发布的商品信息等等，我们需要随时添加、修改、删除或者查询。
### （二）什么是Bmob后端云
Bmob后端云（官网地址：https://www.bmobapp.com/）是国内最早的后端服务平台，能够让开发者专注于前端的业务开发，而不需要花费太多的精力在服务端的设计、开发和部署，不需要考虑服务器或者集群的运维。
我们可以放心地把所有的数据都放到Bmob后端云上，通过它提供的开发工具包，让我们在非常短的时间内开发好产品，快速迭代，满足当前飞速变化的市场。
经过多年的发展，Bmob后端云在小程序的支持上已经非常完善，使用也非常简单。
### （三）创建Bmob后端云应用
打开Bmob后端云网址：
https://www.bmobapp.com/
注册、登录并创建应用。如果是初次使用，还需要进行实名认证。如下图所示：
### （四）数据表的设计和内容填充
我们先分析“学生评语大全”这个小程序：首页是评语分类的信息，有多行，每行不同的颜色。点击进入某个分类页面后，看到的是一条详细的评语内容，点击“换一个”按钮，可以看到新的一条评语。点击“分享”按钮，可以把小程序分享给其他用户。点击“复制”按钮，可以把评语的内容复制到剪切板。
由此可见，我们要创建两张表，一张是评语分类表，存储分类名称、按钮的颜色和属于第几行。另一张是评语内容表，存储评语内容和属于哪个分类。
经过分析，设计数据表如下：
表1：Category表（评语分类表）
|字段名称|字段类型|备注|
|----|----|----|
|name|string |分类名称|
|column| number| 第几行|
|color| string| 按钮的颜色|
表2：Comment表（评语表）
|字段名称|字段类型|备注|
|----|----|----|
|categorymame |string |所属分类名称|
|content| string| 评语内容|
设计好数据表之后，我们就可以把相应的结构添加到Bmob后端云上了。
过程如下：
- 点击刚创建的应用，如下图所示：
- 进入默认的数据表设计。
- 创建好表之后，我们还需要往这个表添加字段。下面以添加name字段为例，点击“添加列”按钮，在弹出界面中输入列名称，选择这个列的类型，输入列的注释之后，再点击“确定”按钮。
- 重复上面的步骤，在Category表中添加column和color字段，完成之后，Category表如下：
用同样的方法，完成Comment表的设计，最终如下所示：
现在两个表还没有任何内容的，我们还需要给表添加数据，如下图所示：
重复上面的动作，完成两个表的内容添加，如下图所示：
### （五）在小程序中初始化Bmob SDK
1.下载Bmob小程序SDK
打开下面的网址，下载最新的SDK版本：
https://gitee.com/bmober/hydrogen-js-sdk/tree/master/dist
本课程中下载的是Bmob-2.5.2.min.js，如下图所示：
2.Sdk放置到utils文件夹下
把刚刚下载的Bmob-2.5.2.min.js文件拖拽到小程序的utils文件夹下，如下图所示：
3.初始化SDK
打开app.js文件，在最顶部添加如下代码：
```
const Bmob = require('/utils/Bmob-2.5.2.min.js');
Bmob.initialize("你的Secret Key", "你的API 安全码");
wx.Bmob = Bmob;
```
如下图所示：
其中，Secret Key和API安全码是每个应用都不一样的（你要替换上面"你的Secret Key"和"你的API 安全码"里面的内容）。我们可以在Bmob后端云的控制台 --> 设置 --> 应用密钥 中获取和设置得到，如下图所示：
### （六）获取Category分类表数据
打开index页面中的index.js文件，将页面的初始数据代码修改如下：
```
data: {
info:'减轻您的工作，一键生成各种评语',
links:[]
},
```
接着，修改页面加载的代码如下：
```
onLoad(options) {
wx.showLoading({
title: '加载中',
})
const query = wx.Bmob.Query("Category");
query.find().then(res => {
wx.hideLoading()
this.setData({
links:res
})
})
},
```
这里有几个地方需要说明：
1、onLoad事件发生在页面加载时，我们通常可以把数据初始化的代码放在这个事件里。
2、为了让数据的加载具有动态效果，我们在数据获取之前，先调用wx.showLoading()方法把加载效果呈现出来。当数据获取到之后，再调用wx.hideLoading()把加载的界面效果隐藏起来。
3、我们从Bmob后端云Category表获取数据的代码非常简单，只有下面几行：
```
const query = wx.Bmob.Query("Category");
query.find().then(res => {
})
```
4、查询到的数据我们要存储起来，以便页面绑定使用，需要调用this.setData()方法。
### （七）完成学生评语大全的首页界面
现在我们刷新页面，会发现首页的界面效果并不是我们想要的效果，如下图所示：
我们还需要修改index.wxml文件中的navigator组件：
```
{{link.name}}
```
其实我们只是把原来的{{link}}改成{{link.name}}。这是因为我们从Bmob后端云获取的Category表数据是数据对象，包含了name、column、color等字段信息。
完成之后的首页界面效果如下：
我们继续修改navigator组件，把按钮的颜色也呈现出来，修改后的代码和界面效果如下：
```
{{link.name}}
```
### （八）进一步美化首页界面
到目前为止，首页界面还是不符合我们要求的。所有的按钮都挤在一行，超出的部分看不到。而我们设计数据表的时候，有一个column（分类所属的行）字段还没有使用。
我们稍加思考前面获取Category表数据的代码，可以发现，这段代码获取到的结果是一个一维数组，数组里面的一个元素对应Category表中的一行记录。
现在要调整界面，按行呈现分类按钮。也就是说，我们要对获取到的一维数据进行二维化，转变成类似于[[Item1, Item2], [Item3, Item4, Item5]]这样的二维数组，方便我们绑定到界面上。
为实现这个效果，修改index.js里面的onLoad代码如下：
```
onLoad(options) {
wx.showLoading({
title: '加载中',
})
const query = wx.Bmob.Query("Category");
query.order('column');
query.find().then(res => {
wx.hideLoading();
let lastColumn;
let resultLinks = [];
res.forEach(r=>{
if(r.column==lastColumn){
resultLinks[resultLinks.length-1].push(r);
}
else{
resultLinks.push([r]);
lastColumn = r.column;
}
})
this.setData({
links:resultLinks
})
})
},
```
这里有几个地方需要说明：
1、我们在调用find()方法获取数据之前，先调用了query.order('column')，即希望获取回来的数据是按column这个字段的值进行顺序排列的。
2、Bmob后端云返回的数据放在res变量中，我们要对数据进行二次处理，需要调用forEach方法对这个一维数组进行循环遍历，每次拿到的一条记录放在r这个变量中。
3、resultLinks存储处理好的二维数组，lastColumn记录我们在遍历一维数组时，上一条记录是属于第几行的。如果当前记录所属的行和上一条记录所属的行是一样的，我们就把当前记录放到和上一条记录同一个数组中（resultLinks[resultLinks.length-1].push(r)）。如果不一样，我们将开辟一个新的数组（resultLinks.push([r])），作为resultLinks这个二维数组的第二维。
上面虽然几行代码，但包含的知识点比较多，如果大家不理解的话，建议多练习几遍，可以用console.log打印一下中间值。
获取数据的代码我们已经写好了，但还没有结束。有了解过二维数组遍历的同学应该知道，我们要遍历一个二维数组，需要有两个for循环语句套用才行。为此，我们修改index.wxml文件如下：
```
{{link.name}}
```
预览效果如下：
我们还需要进一步调整分类按钮的样式，以便第四行中的按钮不是分行显示。修改index.wxss文件里面的.btn样式，把文字的大小减小，如下图所示：
