猫拽低代码

主题

小程序开发入门教程 ​

小程序开发入门教程微信小程序新手指南
... 次阅读 2025年5月18日

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

开发前准备 ​

1. 注册小程序账号 ​

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

提示

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

2. 下载开发工具 ​

下载微信开发者工具：

3. 了解小程序结构 ​

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

创建第一个小程序 ​

1. 新建项目 ​

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

2. 理解页面结构 ​

WXML（页面结构）：

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

WXSS（页面样式）：

css
.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（页面逻辑）：

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

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

3. 添加新页面 ​

在app.json中配置：

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

4. 页面跳转 ​

javascript
// 保留当前页面，跳转到新页面
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可移动视图拖拽元素

示例：轮播图

html
<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 改变

示例：表单输入

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

导航组件 ​

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

常用API ​

网络请求 ​

javascript
// 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)
  }
})

数据缓存 ​

javascript
// 同步存储数据
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()

用户信息 ​

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

交互反馈 ​

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

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

// 隐藏加载
wx.hideLoading()

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

实战项目：待办事项 ​

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

页面结构（index.wxml） ​

html
<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） ​

css
.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） ​

javascript
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. 上传代码 ​

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

2. 提交审核 ​

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

3. 发布上线 ​

审核通过后：

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

注意

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

学习建议 ​

学习资源 ​

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

进阶方向 ​

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

学习路径 ​

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

替代方案 ​

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

猫拽低代码平台优势 ​

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

推荐场景

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

常见问题（FAQs） ​

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

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

Q2: 如何获取用户OpenID？ ​

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

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

javascript
// 登录流程
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: 如何解决跨域问题？ ​

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

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

Q5: 如何调试小程序？ ​

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

总结 ​

小程序开发入门要点：

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

学习建议

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