小程序小白开发教程怎么学？-建站教程-锦华智联科技

第一部分：准备工作 (工欲善其事，必先利其器)
- 你需要什么？
- 注册账号
- 下载并安装开发者工具
第二部分：创建你的第一个小程序 (Hello, World!)
- 新建项目
- 初识项目结构
- 运行和预览
第三部分：小程序核心概念三件套 (学会它，你就入门了)
- .wxml (结构层)：小程序的“骨架”
- .wxss (样式层)：小程序的“衣服”
- .js (逻辑层)：小程序的“大脑”
第四部分：实战演练 - 制作一个简单的“每日一句”
- 第1步：设计页面结构
- 第2步：美化页面样式
- 第3步：添加交互逻辑
第五部分：下一步去哪里？ (进阶之路)
- 官方文档是你的好朋友
- 常用组件和API
- 持续学习

第一部分：准备工作

在开始写代码之前,我们需要准备两样东西：一个账号和一个开发工具。

（图片来源网络，侵删）

你需要什么？

一台电脑：Windows (64位)、Mac 或 Linux。
一个微信账号：用于注册小程序开发者账号。
基本的网络知识：知道什么是网址、浏览器即可。

注册账号

打开浏览器,访问微信公众平台。
点击右上角的 “立即注册”。
选择 “小程序”。
按照提示填写信息,完成邮箱验证和身份认证，这一步可能需要你提供一些个人信息。
注册成功后,登录你的微信公众平台，在 “开发” -> “开发设置” 中，找到你的 AppID(小程序ID)，这个ID非常重要，是你的小程序的唯一标识，请记下来。

下载并安装开发者工具

访问微信开发者工具下载页面。
根据你的电脑系统,下载对应的安装包。
双击安装包,按照提示完成安装。
安装后,打开开发者工具，它会提示你使用微信扫码登录，用你的微信扫码即可。

第二部分：创建你的第一个小程序

万事俱备,我们来创建第一个项目。

新建项目

打开微信开发者工具,点击号。
选择 “小程序”，然后点击 “下一步”。
项目名称：给你的项目起个名字，MyFirstApp。
目录：选择一个空文件夹来存放你的项目代码。
AppID：在这里填入你刚才注册得到的 AppID，如果你只是想先试试，可以选择 “测试号”，它会给你一个临时的 AppID。
点击 “创建”。

几秒钟后,一个完整的小程序项目就创建好了！

初识项目结构

别被一堆文件吓到,我们先看几个最重要的文件：

pages/index/index.wxml：这是小程序首页的结构文件。
pages/index/index.wxss：这是首页的样式文件。
pages/index/index.js：这是首页的逻辑文件。
app.json：这是小程序的全局配置文件，比如页面路径、窗口样式等。
app.js：这是小程序的全局逻辑文件。
app.wxss：这是小程序的全局样式文件。

运行和预览

在开发者工具的右上角,有一个 “编译” 按钮（通常是一个绿色的三角形）。
点击它,左侧的模拟器区域就会显示你的小程序界面。
你还可以用手机扫描开发者工具上的二维码,在真机上预览你的小程序。

恭喜你,你的第一个小程序已经跑起来了！

（图片来源网络，侵删）

第三部分：小程序核心概念三件套

小程序的开发模式借鉴了 Web 开发，但有自己的规则，记住下面三个文件，你就掌握了小程序开发的核心。

`.wxml` (结构层) - 骨架

.wxml 文件负责定义页面的结构，就像 HTML 一样，但它不是 HTML，它有一套自己的标签，

<view>：相当于 <div>，一个块级容器。
<text>：相当于 <span>，用于显示文本。
<button>：一个按钮。
<image>：一张图片。

示例： pages/index/index.wxml

<!-- 一个最简单的页面结构 -->
<view>
  <text>Hello, 小程序!</text>
  <button>点击我</button>
</view>

`.wxss` (样式层) - 衣服

.wxss 文件负责美化页面，就像 CSS 语法几乎一样，你可以用它来设置颜色、大小、布局等。

（图片来源网络，侵删）

示例： pages/index/index.wxss

/* 给整个页面加一个背景色 */
page {
  background-color: #f0f0f0;
}
/* 给view容器加一些样式 */
view {
  padding: 20px;
  text-align: center; /* 文字居中 */
}
/* 给文字加样式 */
text {
  font-size: 20px;
  color: #333;
}
/* 给按钮加样式 */
button {
  margin-top: 20px;
  background-color: #07C160; /* 微信绿 */
  color: white;
}

`.js` (逻辑层) - 大脑

.js 文件是小程序的灵魂，负责处理所有的逻辑，比如用户点击按钮后发生什么、从服务器获取数据等。

示例： pages/index/index.js

// 这是小程序页面的生命周期函数，页面加载时自动执行
Page({
  data: {
    // data 对象用来存放页面需要用到的数据
    message: '初始消息',
    count: 0
  },
  // 定义一个函数，当按钮被点击时触发
  handleButtonClick: function() {
    // this.setData 是更新页面数据的方法
    this.setData({
      count: this.data.count + 1,
      message: '你点击了 ' + (this.data.count + 1) + ' 次!'
    });
  }
});

如何让逻辑和页面关联？ 我们需要在 .wxml 中使用 bindtap 事件绑定来调用 .js 中的函数。

修改 index.wxml：

<view>
  <text>{{message}}</text> <!-- {{message}} 会显示 data 中 message 的值 -->
  <button bindtap="handleButtonClick">点击我</button>
</view>

当你点击按钮时,count 会增加，message 也会更新，页面会自动刷新。

第四部分：实战演练 - 制作一个简单的“每日一句”

让我们用学到的知识,做一个能显示每日一句名言的小程序。

第1步：设计页面结构

打开 pages/index/index.wxml，修改为：

<view class="container">
  <text class="quote-text">{{quote}}</text>
  <text class="quote-author">—— {{author}}</text>
  <button bindtap="getNewQuote" type="primary">换一句</button>
</view>

第2步：美化页面样式

打开 pages/index/index.wxss，修改为：

page {
  background-color: #f5f5f5;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}
.quote-text {
  font-size: 24px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20px;
}
.quote-author {
  font-size: 16px;
  color: #888;
  margin-bottom: 40px;
}
button {
  width: 200px;
}

第3步：添加交互逻辑

打开 pages/index/index.js，修改为：

Page({
  data: {
    quote: '路漫漫其修远兮，吾将上下而求索。',
    author: '屈原'
  },
  // 页面加载时，获取第一句名言
  onLoad: function() {
    // 这里我们先写死数据，后面会教如何从网络获取
    this.setData({
      quote: '生活不止眼前的苟且，还有诗和远方。',
      author: '许巍'
    });
  },
  // 点击按钮时，获取新的名言
  getNewQuote: function() {
    // 准备一个名言列表
    const quotes = [
      { text: '山重水复疑无路，柳暗花明又一村。', author: '陆游' },
      { text: '海内存知己，天涯若比邻。', author: '王勃' },
      { text: '天生我材必有用，千金散尽还复来。', author: '李白' },
      { text: '己所不欲，勿施于人。', author: '孔子' }
    ];
    // 随机选择一个
    const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
    // 更新页面数据
    this.setData({
      quote: randomQuote.text,
      author: randomQuote.author
    });
  }
});

编译你的小程序,你应该能看到一个漂亮的“每日一句”界面，点击“换一句”按钮，名言会随机改变。

第五部分：下一步去哪里？

恭喜！你已经完成了小程序入门，你可以探索更广阔的世界。

官方文档是你的好朋友

遇到任何问题,第一反应应该是 微信小程序官方文档，文档非常详尽，是开发者最好的老师。

常用组件和API

组件：就像乐高积木，你可以直接拿来用，比如轮播图、地图、画布等，在文档中搜索“组件”即可。
API：小程序提供的各种能力，比如获取用户信息、发起网络请求、调用手机摄像头等，在文档中搜索“API”。

持续学习

模仿：找你喜欢的小程序，尝试模仿它的功能。
开源项目：在 GitHub 等平台搜索 "miniprogram"，看看别人是怎么写的。
社区：加入微信开发者社区、掘金、SegmentFault 等技术社区，向别人学习，也帮助别人。

小程序开发的世界非常有趣,祝你玩得开心！

小程序小白开发教程怎么学？

目录

第一部分：准备工作

你需要什么？

注册账号

下载并安装开发者工具

第二部分：创建你的第一个小程序

新建项目

初识项目结构

运行和预览

第三部分：小程序核心概念三件套

.wxml (结构层) - 骨架

.wxss (样式层) - 衣服

.js (逻辑层) - 大脑

第四部分：实战演练 - 制作一个简单的“每日一句”

第1步：设计页面结构

第2步：美化页面样式

第3步：添加交互逻辑

第五部分：下一步去哪里？

官方文档是你的好朋友

常用组件和API

持续学习

`.wxml` (结构层) - 骨架

`.wxss` (样式层) - 衣服

`.js` (逻辑层) - 大脑