小程序开发怎么做？零基础入门教程

本文将带你从零开始学习微信小程序开发，完成你的第一个小程序。

开发前准备

1. 注册小程序账号

访问微信公众平台
点击「立即注册」
选择「小程序」类型
填写信息完成注册

注册时需要准备：邮箱、手机号、身份证信息、微信扫码验证

2. 下载开发工具

下载微信开发者工具：

Windows版本下载
Mac版本下载
安装并使用微信扫码登录

3. 了解小程序结构

project/
├── pages/              # 页面文件夹
│   └── index/          # 首页
│       ├── index.wxml  # 页面结构（类似HTML）
│       ├── index.wxss  # 页面样式（类似CSS）
│       ├── index.js    # 页面逻辑
│       └── index.json  # 页面配置
├── app.js              # 小程序入口
├── app.json            # 全局配置
├── app.wxss            # 全局样式
└── project.config.json # 项目配置

创建第一个小程序

1. 新建项目

打开开发者工具
点击「新建项目」
填入AppID（可使用测试号）
选择「不使用云服务」
点击「新建」

2. 理解页面结构

WXML（页面结构）：

<view class="container">
  <!-- 显示文本内容 -->
  <text>{{message}}</text>
  <!-- 绑定点击事件 -->
  <button bindtap="handleClick">点击我</button>
</view>

WXSS（页面样式）：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

text {
  font-size: 18px;
  color: #333;
}

button {
  margin-top: 20px;
  background-color: #07c160;
  color: white;
}

JS（页面逻辑）：

Page({
  // 页面数据
  data: {
    message: 'Hello World'
  },

  // 点击事件处理函数
  handleClick() {
    this.setData({
      message: '你点击了按钮'
    })
  }
})

3. 添加新页面

在app.json中配置：

{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序"
  }
}

4. 页面跳转

// 保留当前页面，跳转到新页面
wx.navigateTo({
  url: '/pages/about/about'
})

// 关闭当前页面，跳转到新页面
wx.redirectTo({
  url: '/pages/about/about'
})

// 跳转到tabBar页面
wx.switchTab({
  url: '/pages/index/index'
})

常用组件

视图容器

组件	说明	常用场景
`view`	视图容器	布局容器
`scroll-view`	滚动容器	长列表滚动
`swiper`	轮播图	首页Banner
`movable-view`	可移动视图	拖拽元素

示例：轮播图

<swiper indicator-dots autoplay circular>
  <swiper-item>
    <image src="/images/banner1.jpg" mode="aspectFill" />
  </swiper-item>
  <swiper-item>
    <image src="/images/banner2.jpg" mode="aspectFill" />
  </swiper-item>
</swiper>

基础内容

组件	说明	常用属性
`text`	文本	`selectable` 可选中
`image`	图片	`mode` 显示模式
`icon`	图标	`type` 图标类型
`progress`	进度条	`percent` 百分比

表单组件

组件	说明	常用事件
`button`	按钮	`bindtap` 点击
`input`	输入框	`bindinput` 输入
`checkbox`	复选框	`bindchange` 改变
`radio`	单选框	`bindchange` 改变
`picker`	选择器	`bindchange` 改变
`switch`	开关	`bindchange` 改变

示例：表单输入

<view class="form">
  <input 
    placeholder="请输入用户名" 
    bindinput="onInput"
    value="{{inputValue}}"
  />
  <button bindtap="submit">提交</button>
</view>

导航组件

<!-- navigator 导航链接 -->
<navigator url="/pages/about/about" open-type="navigate">
  跳转到关于页面
</navigator>

常用API

网络请求

// GET请求
wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success(res) {
    console.log('请求成功', res.data)
  },
  fail(err) {
    console.error('请求失败', err)
  }
})

// POST请求
wx.request({
  url: 'https://api.example.com/create',
  method: 'POST',
  data: {
    name: '张三',
    age: 25
  },
  header: {
    'content-type': 'application/json'
  },
  success(res) {
    console.log('创建成功', res.data)
  }
})

数据缓存

// 同步存储数据
wx.setStorageSync('userInfo', { name: '张三', age: 25 })

// 同步读取数据
const userInfo = wx.getStorageSync('userInfo')
console.log(userInfo)

// 异步存储数据
wx.setStorage({
  key: 'token',
  data: 'abc123',
  success() {
    console.log('存储成功')
  }
})

// 清除缓存
wx.clearStorageSync()

用户信息

// 获取用户信息（需要用户授权）
wx.getUserProfile({
  desc: '用于完善用户资料',
  success(res) {
    console.log('用户信息：', res.userInfo)
    // 更新页面数据
    this.setData({
      userInfo: res.userInfo
    })
  },
  fail(err) {
    console.error('获取失败', err)
  }
})

交互反馈

// 显示提示
wx.showToast({
  title: '操作成功',
  icon: 'success'
})

// 显示加载
wx.showLoading({
  title: '加载中...'
})

// 隐藏加载
wx.hideLoading()

// 显示确认框
wx.showModal({
  title: '提示',
  content: '确定删除吗？',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    }
  }
})

实战项目：待办事项

让我们创建一个简单的待办事项小程序，巩固所学知识。

页面结构（index.wxml）

<view class="container">
  <!-- 头部输入区域 -->
  <view class="header">
    <input 
      class="input" 
      placeholder="输入待办事项" 
      bindinput="onInput"
      value="{{inputText}}"
    />
    <button class="add-btn" bindtap="addTodo">添加</button>
  </view>

  <!-- 待办列表 -->
  <view class="list">
    <view class="item" wx:for="{{todos}}" wx:key="id">
      <text class="item-text">{{item.text}}</text>
      <button 
        class="delete-btn" 
        bindtap="deleteTodo" 
        data-id="{{item.id}}"
      >
        删除
      </button>
    </view>
    
    <!-- 空状态提示 -->
    <view class="empty" wx:if="{{todos.length === 0}}">
      <text>暂无待办事项</text>
    </view>
  </view>
</view>

页面样式（index.wxss）

.container {
  padding: 20px;
}

.header {
  display: flex;
  margin-bottom: 20px;
}

.input {
  flex: 1;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.add-btn {
  margin-left: 10px;
  background-color: #07c160;
  color: white;
}

.list {
  margin-top: 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.item-text {
  flex: 1;
}

.delete-btn {
  background-color: #ff4d4f;
  color: white;
  font-size: 12px;
  padding: 5px 10px;
}

.empty {
  text-align: center;
  padding: 40px;
  color: #999;
}

页面逻辑（index.js）

Page({
  // 页面数据
  data: {
    todos: [],      // 待办列表
    inputText: ''   // 输入内容
  },

  // 监听输入
  onInput(e) {
    this.setData({
      inputText: e.detail.value
    })
  },

  // 添加待办
  addTodo() {
    const { todos, inputText } = this.data
    
    // 校验输入
    if (!inputText.trim()) {
      wx.showToast({
        title: '请输入内容',
        icon: 'none'
      })
      return
    }

    // 添加新待办
    todos.push({
      id: Date.now(),        // 使用时间戳作为唯一ID
      text: inputText.trim(),
      completed: false
    })

    // 更新数据
    this.setData({
      todos,
      inputText: ''
    })

    wx.showToast({
      title: '添加成功',
      icon: 'success'
    })
  },

  // 删除待办
  deleteTodo(e) {
    const id = e.currentTarget.dataset.id
    const todos = this.data.todos.filter(item => item.id !== id)
    
    this.setData({ todos })

    wx.showToast({
      title: '删除成功',
      icon: 'success'
    })
  }
})

发布上线

1. 上传代码

点击开发者工具右上角「上传」按钮
填写版本号和项目备注
点击确定上传

2. 提交审核

登录微信公众平台
进入「版本管理」
点击「提交审核」
填写审核信息

3. 发布上线

审核通过后：

在「版本管理」中点击「发布」
选择发布方式（全量发布/灰度发布）
确认发布

确保内容符合小程序运营规范
隐私政策必须完整
功能必须完整可用

学习建议

学习资源

资源	说明
微信官方文档	最权威的参考资料
微信开放社区	问题交流社区
技术博客教程	实战经验分享

进阶方向

组件化开发：自定义组件、组件通信
状态管理：全局状态管理方案
云开发：云函数、云数据库、云存储
性能优化：分包加载、按需注入
TypeScript：类型安全开发

学习路径

入门阶段 → 进阶阶段 → 实战阶段
    ↓           ↓           ↓
基础语法    组件化开发    完整项目
常用组件    状态管理      性能优化
API调用     云开发        发布上线

替代方案

如果觉得原生开发复杂，可以使用猫拽低代码平台快速开发小程序。

猫拽低代码平台优势

特性	说明
可视化开发	拖拽式界面设计，所见即所得
零代码门槛	无需编程基础，快速上手
丰富模板	内置多种行业模板
一键发布	快速生成小程序并发布
适合人群	非技术人员、快速原型开发

快速验证产品想法
非技术人员开发小程序
简单业务场景应用
学习小程序开发概念

常见问题（FAQs）

Q1: 小程序和H5有什么区别？

对比项	小程序	H5
运行环境	微信App内	浏览器
性能	更流畅	相对较慢
体验	接近原生	网页体验
开发成本	中等	较低
功能权限	更多系统权限	受限

Q2: 如何获取用户OpenID？

// 云函数获取OpenID
wx.cloud.callFunction({
  name: 'getOpenId',
  success(res) {
    console.log('OpenID:', res.result.openid)
  }
})

Q3: 小程序如何实现登录？

// 登录流程
wx.login({
  success(res) {
    // 获取code
    const code = res.code
    // 发送到服务器换取openid和session_key
    wx.request({
      url: 'https://your-server.com/login',
      data: { code },
      success(res) {
        // 保存登录状态
        wx.setStorageSync('token', res.data.token)
      }
    })
  }
})

Q4: 如何解决跨域问题？

小程序不涉及浏览器跨域问题，但需要：

在后台配置合法域名
域名必须是HTTPS
域名需ICP备案

Q5: 如何调试小程序？

使用开发者工具的调试面板
console.log() 输出日志
使用 vConsole 真机调试
开发者工具「远程调试」功能

总结

小程序开发入门要点：

准备工作：注册账号、下载工具、了解结构
理解结构：WXML结构、WXSS样式、JS逻辑
学习组件：视图容器、基础内容、表单组件
掌握API：网络请求、数据缓存、用户信息
项目实践：从简单项目开始，逐步提升

持续学习，多写代码，逐步提升。遇到问题多查阅官方文档和社区资源。