从零开始学习微信小程序开发教程

一、小程序开发基础

1. 什么是小程序？

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

2. 主流小程序平台

微信小程序

支付宝小程序

百度智能小程序

字节跳动小程序(抖音/头条)

快应用(手机厂商联盟)

二、开发环境搭建

1. 微信小程序开发环境

下载微信开发者工具

注册微信小程序账号

获取AppID(可在开发设置中查看)

2. 创建第一个小程序项目

打开开发者工具

选择"新建项目"

填写项目信息(不使用云服务)

点击确定

三、小程序目录结构

├── pages/                  // 页面目录

│   ├── index/               // 首页

│   │   ├── index.js         // 页面逻辑

│   │   ├── index.json       // 页面配置

│   │   ├── index.wxml       // 页面结构

│   │   └── index.wxss       // 页面样式

├── utils/                  // 工具类目录

├── app.js                  // 小程序逻辑

├── app.json                // 小程序公共配置

├── app.wxss                // 小程序公共样式表

└── project.config.json     // 项目配置文件

四、核心文件解析

1. app.json - 全局配置

{

  "pages": [

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window": {

    "navigationBarTitleText": "Demo",

    "navigationBarBackgroundColor": "#ffffff"

  },

  "tabBar": {

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页"

    }, {

      "pagePath": "pages/logs/logs",

      "text": "日志"

    }]

  }}

2. app.js - 小程序逻辑

javascript

App({

  onLaunch: function() {

    // 小程序启动时执行

  },

  globalData: {

    userInfo: null

  }})

3. 页面文件结构

.wxml - 类似HTML的模板文件

.wxss - 类似CSS的样式文件

.js - 页面逻辑文件

.json - 页面配置文件

五、WXML基础语法

1. 数据绑定

<view>{{message}}</view>

运行 HTML

2. 列表渲染

<view wx:for="{{array}}" wx:key="id">

  {{index}}: {{item.message}}</view>

运行 HTML

3. 条件渲染

<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view><view wx:elif="{{view == 'APP'}}">APP</view><view wx:else>OTHER</view>

运行 HTML

4. 模板

html

<template name="msgItem">

  <view>

    <text>{{index}}: {{msg}}</text>

  </view></template><template is="msgItem" data="{{...item}}"/>

运行 HTML

六、WXSS样式语言

1. 尺寸单位rpx

1rpx = 屏幕宽度/750，设计稿建议以750px为基准

2. 样式导入

@import "common.wxss";

3. 选择器

支持大多数CSS选择器，如.class、#id、element等

七、JavaScript交互

1. 页面生命周期

Page({

  data: {},          // 页面初始数据

  onLoad() {},       // 页面加载

  onShow() {},       // 页面显示

  onReady() {},      // 页面初次渲染完成

  onHide() {},       // 页面隐藏

  onUnload() {},     // 页面卸载

  onPullDownRefresh() {}, // 下拉刷新

  onReachBottom() {},     // 上拉触底

  onShareAppMessage() {}  // 用户点击右上角分享})

2. 事件处理

<button bindtap="handleClick">点击我</button>

Page({

  handleClick: function(e) {

    console.log('按钮被点击', e)

  }})

八、常用API

1. 网络请求

javascript

wx.request({

  url: 'https://example.com/api',

  method: 'GET',

  data: {

    key: 'value'

  },

  success(res) {

    console.log(res.data)

  }})

2. 数据缓存

// 异步存储wx.setStorage({

  key: 'key',

  data: 'value'})// 同步存储wx.setStorageSync('key', 'value')

3. 获取用户信息

wx.getUserProfile({

  desc: '用于完善会员资料',

  success: (res) => {

    this.setData({

      userInfo: res.userInfo    })

  }})

九、小程序发布流程

开发完成后点击"上传"按钮

填写版本号和项目备注

登录微信公众平台

在"版本管理"中提交审核

审核通过后发布

十、学习资源推荐

微信官方文档

小程序开发社区：掘金、CSDN、GitHub

在线课程平台：慕课网、极客时间、腾讯课堂

进阶学习方向

小程序云开发

组件化开发

性能优化

跨平台开发(Taro、uni-app等)

小程序与Native App混合开发

希望这份教程能帮助你快速入门小程序开发！实践是最好的学习方式，建议从简单的项目开始，逐步深入。