空间logo

以土豆之名，行学习之实

微信小程序开发

微信小程序开发完整教程

1 微信小程序概述

1.1 什么是微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。小程序具有以下特点：

  • 无需安装，即用即走

  • 体积小，单个包不能超过2MB

  • 开发门槛低，使用前端技术栈

  • 依托微信平台，拥有庞大的用户基础

1.2 注册微信小程序账号

  1. 访问微信公众平台（https://mp.weixin.qq.com/）

  2. 点击"立即注册"，选择"小程序"

  3. 填写邮箱、密码等基本信息

  4. 登录邮箱激活账号

  5. 选择主体类型（个人、企业、政府等）

  6. 登记主体信息并完成注册

1.3 微信小程序配置

注册成功后需要进行基本配置：

  • 设置小程序名称（一年可修改2次）

  • 上传小程序头像

  • 填写小程序介绍

  • 设置服务类目

  • 配置服务器域名（request、socket、uploadfile、downloadfile）

1.4 微信小程序开发流程

  1. 注册小程序账号

  2. 安装开发者工具

  3. 创建小程序项目

  4. 开发调试

  5. 上传代码

  6. 提交审核

  7. 发布上线

1.5 微信小程序成员

小程序团队包含以下角色：

  • 管理员：拥有所有权限

  • 开发者：可开发、调试、上传代码

  • 体验者：可体验未发布的小程序

  • 运营者：可管理小程序后台

2 创建微信小程序项目

2.1 创建项目流程

  1. 下载并安装微信开发者工具

  2. 使用小程序账号扫码登录

  3. 创建新项目

  4. 配置项目信息

  5. 开始开发

2.2 创建项目

在微信开发者工具中：

  1. 点击"+"或"新建项目"

  2. 填写项目信息：

    • 项目名称

    • 目录位置

    • AppID（测试可使用测试号）

    • 开发模式：小程序

    • 后端服务：不使用云服务

  3. 点击"新建"完成创建

2.3 本地开发支持 http

在开发阶段，如需使用http接口：

  1. 在开发者工具中点击"详情"

  2. 勾选"不校验合法域名..."

  3. 注意：上线前必须配置https域名

3 项目目录结构

3.1 项目目录结构

3.1.1 目录介绍

miniprogram/
├── pages/          // 页面文件目录
│   ├── index/      // index页面
│   │   ├── index.js     // 页面逻辑
│   │   ├── index.json   // 页面配置
│   │   ├── index.wxml   // 页面结构
│   │   └── index.wxss   // 页面样式
├── utils/          // 工具类文件
├── app.js          // 小程序逻辑
├── app.json        // 小程序公共配置
├── app.wxss        // 小程序公共样式
└── project.config.json // 项目配置文件

3.1.2 配置文件

  • app.json: 全局配置，包括页面路径、窗口表现、tabBar等

  • page.json: 页面级配置，覆盖app.json中的window配置

  • project.config.json: 项目配置，包含开发者工具配置

3.2 webview 渲染和纯净项目

  • webview渲染: 小程序支持内嵌网页，使用webview组件

  • 纯净项目: 不包含云开发等额外功能的精简项目结构

3.3 新建页面

  1. 在pages目录下新建文件夹

  2. 创建页面文件：.js、.json、.wxml、.wxss

  3. 在app.json的pages数组中添加页面路径

  4. 保存后自动生成页面

3.4 启动页面调整

在app.json中修改pages数组顺序，第一个页面为启动页：

{
  "pages": [
    "pages/home/home",
    "pages/index/index"
  ]
}

3.5 调试小程序

3.5.1 调试小程序基础库

  • 在开发者工具中可切换不同基础库版本

  • 测试兼容性和新特性

3.5.2 调试窗口

开发者工具提供多个调试面板：

  • Console: 控制台，查看日志和错误

  • Sources: 源码调试

  • Network: 网络请求监控

  • Storage: 本地存储查看

  • AppData: 实时查看数据

3.5.3 真机调试

  1. 点击"预览"，生成二维码

  2. 使用微信扫码在真机上体验

  3. 可开启真机调试模式，在手机上查看日志

4 快速上手

4.1 小程序常用组件

小程序提供丰富的内置组件：

  • 视图容器: view、scroll-view、swiper

  • 基础内容: text、icon、progress

  • 表单组件: button、input、picker

  • 导航组件: navigator

  • 媒体组件: image、video

示例：

<view class="container">
  <text>Hello World</text>
  <button type="primary">点击我</button>
  <image src="/images/logo.png"></image>
</view>

4.2 尺寸单位和样式

  • rpx: 响应式像素，根据屏幕宽度自适应

  • 设计稿通常以750rpx为基准

  • 支持大部分CSS特性

  • 样式文件扩展名为.wxss

示例：

.container {
  width: 750rpx;  /* 满屏宽度 */
  padding: 20rpx;
}
.text {
  font-size: 32rpx;
  color: #333;
}

4.3 tabbar 配置

在app.json中配置底部tabbar：

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/icon_home.png",
        "selectedIconPath": "images/icon_home_active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/profile/profile",
        "iconPath": "images/icon_user.png",
        "selectedIconPath": "images/icon_user_active.png",
        "text": "我的"
      }
    ]
  }
}

总结

本教程涵盖了微信小程序开发的基础知识，从账号注册到项目创建，再到基础开发配置。通过学习这些内容，您已经具备了开发简单小程序的能力。建议在实际开发中多练习，参考官方文档，不断提升开发技能。

下一步可以学习：

  • 小程序API的使用

  • 数据绑定和事件处理

  • 网络请求和数据缓存

  • 用户登录和授权

  • 小程序云开发

祝您开发顺利！