微信小程序开发入门教程（详细版）

微信小程序开发入门教程（详细版）

一、开发前准备

注册账号

访问微信公众平台
选择「小程序」注册（需准备未注册过微信公众平台的邮箱）

安装开发工具

下载微信开发者工具
安装时勾选”快速启动”选项

二、创建第一个项目

新建项目

启动工具 → 扫码登录 → 选择「小程序」→ 填写：
- 项目名称：MyFirstApp
- 目录：选择空文件夹
- AppID：测试阶段可勾选"测试号"

初始目录结构

├── app.js       # 全局逻辑
├── app.json     # 全局配置
├── app.wxss     # 全局样式
├── pages/       # 页面目录
│   └── index/   # 默认首页
│       ├── index.js
│       ├── index.wxml
│       └── index.wxss

三、核心文件解析

app.json 配置示例

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

WXML 基础语法

<!-- 数据绑定 -->
<view>{
             {message}}</view>

<!-- 条件渲染 -->
<view wx:if="{
               {showText}}">显示内容</view>

<!-- 列表渲染 -->
<view wx:for="{
               {list}}" wx:key="index">
  当前项：{
             {item}}
</view>

WXSS 样式规范

/* 使用rpx单位 */
.container {
              
  width: 750rpx; /* 等于屏幕宽度 */
  padding: 20rpx;
}

/* 引入外部样式 */
@import "/common/common.wxss";

四、数据与事件处理

Page.js 基本结构

Page({
              
  data: {
              
    counter: 0,
    message: "Hello World"
  },
  
  // 事件处理函数
  addCounter() {
              
    this.setData({
              
      counter: this.data.counter + 1
    })
  }
})

事件绑定示例

<button bindtap="addCounter">点击增加</button>
<text>当前计数：{
             {counter}}</text>

五、常用API使用

网络请求

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

本地存储

// 存储数据
wx.setStorageSync('key', 'value')

// 读取数据
const value = wx.getStorageSync('key')

六、调试与发布

调试工具使用

使用控制台查看日志
通过Network面板监控请求
使用Storage面板管理本地缓存

发布流程

开发者工具点击「上传」
登录公众平台提交审核
审核通过后点击「发布」

七、最佳实践建议

组件化开发：将重复使用的UI元素封装为自定义组件
使用npm管理依赖：在项目根目录执行npm init
性能优化：避免频繁setData，使用图片懒加载

八、学习资源推荐

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
示例代码：开发者工具「新建项目」时选择「代码片段」
社区论坛：微信开放社区（https://developers.weixin.qq.com/）

开发小技巧：使用<scroll-view>实现滚动区域时，需设置固定高度并通过CSS控制overflow-y: scroll