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

关注

原创最新推荐文章于 2026-08-11 23:14:18 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

微信小程序 --- 小程序基础知识什么是微信小程序微信小程序是一种运行在微信内部的轻量级应用程序。在使用小程序时不需要下载安装，用户扫一扫或搜一下即可打开应用。它也体现了 “用完即走” 的理念，用户不用关心安装太多应用的问题。它实现了应用“触手可及”的梦想，应用无处不在，随时可用，但又无须安装卸载。特点小程序的四大特性：无须安装、用完即走、无须卸载、触手可及无须安装：体积小，用户感知不到下载的过程触手可及：用户扫一扫或搜一下即可打开应用，通过下拉能访问使用的小程序用完即走，无须卸载。阅读详情

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

课程分三天：

有任何问题欢迎大家加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。

最终的预览效果如下：

收录于

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

标签

#微信小程序 #notepad++ #小程序

微信小程序的基础知识主要是为了学习微信小程序才做的，黑马还是不错的，挺新的，一起来学习吧。主要是原生的微信小程序的基础知识阅读详情