微信小程序开发入门教程 – 从零创建第一个小程序

微信小程序简介

微信小程序是一种不需要下载即可使用的应用，通过微信即可访问。它拥有巨大的用户流量，是很多产品和服务的首选载体。

优势

• 无需安装 – 扫码即用，用完即走
• 流量巨大 – 微信月活 13 亿
• 开发成本低 – 比 App 开发更简单
• 分享方便 – 一键分享到微信

开发环境搭建

1. 注册小程序账号

1. 访问 微信公众平台
2. 选择「小程序」，注册账号
3. 完成主体认证

2. 下载开发者工具

访问 微信开发者工具下载页，下载最新版本。

3. 创建项目

1. 打开开发者工具
2. 点击「新建项目」
3. 填写 AppID（从公众平台获取）
4. 选择「JavaScript」或「TypeScript」

项目结构

project/
├── app.js           # 小程序入口
├── app.json         # 全局配置
├── app.wxss         # 全局样式
├── pages/           # 页面目录
│   ├── index/       # 首页
│   │   ├── index.js
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   └── index.json
│   └── logs/        # 日志页
└── utils/           # 工具函数

基础组件

视图容器

<view> - 容器组件
<scroll-view> - 可滚动视图
<swiper> - 轮播组件
<movable-area> - 可移动区域

基础内容

<text> - 文本
<icon> - 图标
<progress> - 进度条
<rich-text> - 富文本

表单组件

<button> - 按钮
<input> - 输入框
<textarea> - 多行输入
<checkbox> - 复选框
<radio> - 单选框
<picker> - 选择器
<switch> - 开关

第一个页面

// pages/index/index.wxml
<view class="container">
  <text class="title">{{title}}</text>
  <button bindtap="onTap">点击我</button>
  <view wx:for="{{list}}" wx:key="id">
    {{item.name}}
  </view>
</view>

// pages/index/index.js
Page({
  data: {
    title: '我的第一个小程序',
    list: [
      { id: 1, name: '项目一' },
      { id: 2, name: '项目二' },
    ]
  },
  
  onTap() {
    wx.showToast({
      title: '点击成功',
      icon: 'success'
    })
  }
})

常用 API

// 显示提示
wx.showToast({ title: '提示' })
wx.showModal({ title: '提示', content: '内容' })

// 网络请求
wx.request({
  url: 'https://api.example.com',
  success(res) {
    console.log(res.data)
  }
})

// 页面跳转
wx.navigateTo({ url: '/pages/detail/detail?id=1' })
wx.switchTab({ url: '/pages/index/index' })

// 本地存储
wx.setStorageSync('key', 'value')
const value = wx.getStorageSync('key')

云开发

小程序云开发提供免费的后端服务：

• 云数据库 – JSON 文档数据库
• 云存储 – 文件存储
• 云函数 – Serverless 函数

发布小程序

1. 在开发者工具中点击「上传」
2. 在公众平台提交审核
3. 审核通过后发布

总结

微信小程序开发相对简单，是快速验证产品想法的好方式。建议从简单的工具类小程序开始，逐步深入。云开发版本可以让你无需搭建后端，快速上线产品。