Yu
微信小程序开发：从入门到实践
前端开发

微信小程序开发：从入门到实践

Yu Yu 2024年5月11日 15分钟 阅读

微信小程序开发全指南：从入门到实践

微信小程序作为一种无需下载安装即可使用的应用，自2017年推出以来，已经成为中国移动互联网生态中不可或缺的一部分。本文将全面介绍微信小程序的开发流程、技术架构、核心功能和最佳实践，帮助开发者快速掌握小程序开发技能。

小程序开发基础

什么是微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了"用完即走"的理念，用户扫一扫或搜一下即可打开应用。小程序提供了与原生App相近的用户体验，同时具有更低的开发成本和更高的用户触达率。

开发环境搭建

开始小程序开发前，需要准备以下工具和账号：

  1. 微信开发者工具：官方IDE，提供代码编辑、调试、预览等功能
  2. AppID：在微信公众平台注册获取，是小程序的唯一标识
# 安装开发者工具的命令行版本(CLI)
npm install -g miniprogram-ci

项目结构

一个典型的小程序项目结构如下：

project/
├── app.js            # 小程序逻辑
├── app.json          # 全局配置
├── app.wxss          # 全局样式
├── project.config.json # 项目配置文件
├── sitemap.json      # 小程序搜索相关
├── pages/            # 页面文件夹
│   └── index/        # 首页
│       ├── index.js  # 页面逻辑
│       ├── index.wxml # 页面结构
│       ├── index.wxss # 页面样式
│       └── index.json # 页面配置
├── components/       # 自定义组件
├── utils/            # 工具函数
├── images/           # 图片资源
└── miniprogram_npm/  # npm包

小程序技术架构

双线程模型

小程序采用双线程模型，将渲染层和逻辑层分离：

  • 渲染层（View Thread）：负责页面渲染，由WebView实现
  • 逻辑层（AppService Thread）：负责业务逻辑，由JSCore实现

这种架构提高了性能和安全性，但也带来了一些通信成本。

文件类型与职责

小程序开发涉及四种主要文件类型：

  1. WXML (WeiXin Markup Language)：类似HTML，描述页面结构
  2. WXSS (WeiXin Style Sheets)：类似CSS，描述页面样式
  3. JS：处理页面逻辑和数据
  4. JSON：配置文件

生命周期

理解生命周期是开发小程序的关键：

应用生命周期

// app.js
App({
  onLaunch(options) {
    // 小程序初始化时触发，全局只触发一次
    console.log('小程序启动参数:', options);
  },
  onShow(options) {
    // 小程序启动或从后台进入前台时触发
    console.log('小程序进入前台:', options);
  },
  onHide() {
    // 小程序从前台进入后台时触发
    console.log('小程序进入后台');
  },
  onError(error) {
    // 小程序发生错误时触发
    console.error('小程序错误:', error);
  },
  globalData: {
    // 全局数据
    userInfo: null
  }
});

页面生命周期

// pages/index/index.js
Page({
  data: {
    // 页面数据
    message: 'Hello World'
  },
  onLoad(options) {
    // 页面加载时触发，一个页面只会调用一次
    console.log('页面参数:', options);
  },
  onReady() {
    // 页面初次渲染完成时触发，一个页面只会调用一次
    console.log('页面渲染完成');
  },
  onShow() {
    // 页面显示时触发，每次打开页面都会调用
    console.log('页面显示');
  },
  onHide() {
    // 页面隐藏时触发
    console.log('页面隐藏');
  },
  onUnload() {
    // 页面卸载时触发
    console.log('页面卸载');
  },
  onPullDownRefresh() {
    // 用户下拉页面时触发
    console.log('下拉刷新');
  },
  onReachBottom() {
    // 页面上拉触底时触发
    console.log('上拉加载更多');
  },
  onShareAppMessage() {
    // 用户点击右上角分享时触发
    return {
      title: '分享标题',
      path: '/pages/index/index'
    };
  }
});

核心开发技能

WXML与数据绑定

WXML提供了数据绑定和列表渲染等功能：

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

<!-- 列表渲染 -->
<view wx:for="{{items}}" wx:key="id">
  {{index}}: {{item.name}}
</view>

<!-- 条件渲染 -->
<view wx:if="{{condition}}">True条件下显示</view>
<view wx:else>False条件下显示</view>

<!-- 模板使用 -->
<template name="itemTpl">
  <view>{{name}}: {{price}}</view>
</template>

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

WXSS样式

WXSS在CSS基础上扩展了尺寸单位rpx和样式导入等特性：

/* rpx是响应式单位，1rpx = 屏幕宽度/750px */
.container {
  width: 750rpx;
  height: 100vh;
  padding: 30rpx;
  background-color: #f8f8f8;
}

/* 样式导入 */
@import "../common/style.wxss";

/* 选择器 */
.button {
  background-color: #07c160;
  color: white;
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
}

/* 媒体查询 */
@media screen and (min-width: 480px) {
  .container {
    padding: 40rpx;
  }
}

组件化开发

小程序支持自定义组件，实现代码复用：

// components/custom-button/custom-button.js
Component({
  properties: {
    // 组件属性
    text: {
      type: String,
      value: '按钮'
    },
    type: {
      type: String,
      value: 'primary'
    }
  },
  data: {
    // 组件内部数据
    isActive: false
  },
  methods: {
    // 组件方法
    handleTap() {
      this.setData({
        isActive: !this.data.isActive
      });
      this.triggerEvent('click', { active: this.data.isActive });
    }
  },
  lifetimes: {
    // 组件生命周期
    attached() {
      console.log('组件被添加到页面');
    },
    detached() {
      console.log('组件从页面移除');
    }
  }
});

<!-- components/custom-button/custom-button.wxml -->
<button class="custom-btn {{type}} {{isActive ? 'active' : ''}}" bindtap="handleTap">
  {{text}}
</button>

使用自定义组件：

{
  "usingComponents": {
    "custom-button": "/components/custom-button/custom-button"
  }
}

<custom-button text="提交" type="primary" bindclick="onButtonClick"></custom-button>

数据管理

小程序提供了多种数据管理方式：

页面内数据

Page({
  data: {
    count: 0
  },
  increment() {
    this.setData({
      count: this.data.count + 1
    });
  }
});

全局状态管理

对于复杂应用，可以使用全局状态管理库：

// 使用mobx-miniprogram
import { observable, action } from 'mobx-miniprogram';

export const store = observable({
  // 数据
  counter: 0,
  
  // 计算属性
  get doubleCounter() {
    return this.counter * 2;
  },
  
  // actions
  increment: action(function() {
    this.counter++;
  }),
  decrement: action(function() {
    this.counter--;
  })
});

// 在页面中使用
import { createStoreBindings } from 'mobx-miniprogram-bindings';
import { store } from '../../store/store';

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['counter', 'doubleCounter'],
      actions: ['increment', 'decrement']
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  }
});

网络请求与数据存储

网络请求

小程序提供了wx.request API进行网络请求：

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: {
    id: 1
  },
  header: {
    'content-type': 'application/json'
  },
  success(res) {
    console.log('请求成功:', res.data);
  },
  fail(err) {
    console.error('请求失败:', err);
  },
  complete() {
    console.log('请求完成');
  }
});

使用Promise封装请求：

// utils/request.js
const baseURL = 'https://api.example.com';

export const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'content-type': 'application/json',
        ...options.header
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: reject
    });
  });
};

数据存储

小程序提供了多种数据存储方式：

本地存储

// 存储数据
wx.setStorage({
  key: 'userInfo',
  data: {
    name: '张三',
    age: 25
  }
});

// 同步存储
wx.setStorageSync('token', 'abcdef123456');

// 获取数据
wx.getStorage({
  key: 'userInfo',
  success(res) {
    console.log(res.data);
  }
});

// 同步获取
const token = wx.getStorageSync('token');

// 移除数据
wx.removeStorage({
  key: 'userInfo',
  success() {
    console.log('移除成功');
  }
});

// 清除所有数据
wx.clearStorage();

小程序UI组件与布局

常用内置组件

小程序提供了丰富的内置组件：

<!-- 视图容器 -->
<view class="container">
  <text>文本内容</text>
  <image src="/images/logo.png" mode="aspectFit"></image>
  <button type="primary">按钮</button>
  
  <!-- 表单组件 -->
  <form bindsubmit="formSubmit">
    <input placeholder="请输入" name="input" />
    <switch checked name="switch" />
    <slider value="50" name="slider" show-value />
    <button form-type="submit">提交</button>
  </form>
  
  <!-- 滚动视图 -->
  <scroll-view scroll-y style="height: 300rpx;">
    <view wx:for="{{items}}" wx:key="id">{{item.name}}</view>
  </scroll-view>
  
  <!-- 轮播图 -->
  <swiper indicator-dots autoplay interval="3000">
    <swiper-item wx:for="{{banners}}" wx:key="id">
      <image src="{{item.image}}" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</view>

Flex布局

小程序支持Flex布局，实现灵活的页面结构：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex-shrink: 0;
  height: 100rpx;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.footer {
  flex-shrink: 0;
  height: 120rpx;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card {
  flex: 1;
  margin: 10rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

小程序API与能力

常用API

小程序提供了丰富的API，访问设备能力和微信生态：

// 获取用户信息
wx.getUserProfile({
  desc: '用于完善用户资料',
  success: (res) => {
    console.log('用户信息:', res.userInfo);
  }
});

// 获取位置
wx.getLocation({
  type: 'gcj02',
  success(res) {
    const { latitude, longitude } = res;
    console.log('当前位置:', latitude, longitude);
  }
});

// 扫码
wx.scanCode({
  success(res) {
    console.log('扫码结果:', res.result);
  }
});

// 支付
wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success(res) {
    console.log('支付成功');
  },
  fail(err) {
    console.log('支付失败:', err);
  }
});

// 分享
wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
});

// 导航
wx.navigateTo({
  url: '/pages/detail/detail?id=1'
});

// 显示消息提示框
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});

云开发

微信小程序云开发提供了一站式的后端云服务：

// 初始化云环境
wx.cloud.init({
  env: 'my-env-id',
  traceUser: true
});

// 云数据库
const db = wx.cloud.database();
const _ = db.command;

// 添加数据
db.collection('todos').add({
  data: {
    title: '学习小程序云开发',
    done: false,
    createTime: db.serverDate()
  },
  success(res) {
    console.log('添加成功，记录ID:', res._id);
  }
});

// 查询数据
db.collection('todos')
  .where({
    done: false
  })
  .get()
  .then(res => {
    console.log('未完成任务:', res.data);
  });

// 更新数据
db.collection('todos').doc('todo-id').update({
  data: {
    done: true
  },
  success() {
    console.log('更新成功');
  }
});

// 云函数调用
wx.cloud.callFunction({
  name: 'login',
  data: {},
  success(res) {
    console.log('云函数调用成功:', res.result);
  }
});

// 云存储
wx.chooseImage({
  success(res) {
    const filePath = res.tempFilePaths[0];
    const cloudPath = `images/${Date.now()}-${Math.floor(Math.random() * 1000)}`;
    
    wx.cloud.uploadFile({
      cloudPath,
      filePath,
      success(res) {
        console.log('上传成功，文件ID:', res.fileID);
      }
    });
  }
});

性能优化与最佳实践

性能优化

提高小程序性能的关键策略：

  1. 减少setData频率和数据量：

    // 不好的做法
this.data.list.forEach((item, index) => {
  this.setData({
    [`list[${index}].checked`]: true
  });
});

// 好的做法
const list = this.data.list.map(item => {
  return { ...item, checked: true };
});
this.setData({ list });

  2. 避免不必要的渲染：

    // 使用wx:if而非hidden进行条件渲染
<view wx:if="{{showHeavyComponent}}">
  <!-- 复杂组件内容 -->
</view>

  3. 使用懒加载：

    <image lazy-load src="{{imageUrl}}"></image>

  4. 合理使用分包加载：

    {
  "pages": [
    "pages/index/index"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ]
}

安全最佳实践

  1. 敏感数据处理：

    // 不要在本地存储中保存敏感信息
// 不好的做法
wx.setStorageSync('password', '123456');

// 好的做法
// 使用临时token或加密存储

  2. 请求数据校验：

    // 在服务端验证所有请求数据
// 使用HTTPS请求
// 实现防重放攻击机制

  3. 小程序代码保护：

    // 避免敏感逻辑在客户端实现
// 关键业务逻辑放在云函数中

开发技巧

  1. 使用npm包：

    # 在小程序目录中初始化npm
npm init

# 安装依赖
npm install lodash-es

# 在开发者工具中构建npm

  2. 使用TypeScript：

    // app.ts
interface IAppOption {
  globalData: {
    userInfo?: WechatMiniprogram.UserInfo
  }
}

App<IAppOption>({
  globalData: {},
  onLaunch() {
    // 启动逻辑
  }
});

  3. 使用自定义组件模板：

    // 创建通用组件模板
Component({
  options: {
    multipleSlots: true // 启用多slot支持
  },
  properties: {
    // 组件属性
  },
  externalClasses: ['custom-class'], // 外部样式类
  methods: {
    // 组件方法
  }
});

发布与运维

上线流程

  1. 代码审核与测试：

    • 功能测试
    • 兼容性测试
    • 性能测试

  2. 版本提交：

    # 使用miniprogram-ci工具提交代码
miniprogram-ci upload --pp ./project --pkp ./private.key --appid wxxxxxxxxx --uv 1.0.0 --desc "版本描述"

  3. 审核与发布：

    • 提交审核
    • 审核通过后发布

数据分析

利用小程序数据分析能力优化产品：

// 自定义分析事件
wx.reportAnalytics('purchase', {
  price: 120,
  productId: 'p001'
});

// 页面访问时长统计
Page({
  onShow() {
    this.startTime = Date.now();
  },
  onHide() {
    const duration = (Date.now() - this.startTime) / 1000;
    wx.reportAnalytics('page_duration', {
      page: 'index',
      duration
    });
  }
});

小程序生态与未来趋势

跨平台开发

随着小程序生态的扩展，跨平台开发框架越来越受欢迎：

  1. Taro：使用React语法开发多端应用

    import React, { Component } from 'react';
import { View, Text, Button } from '@tarojs/components';

export default class Index extends Component {
  state = {
    count: 0
  }
  
  increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  }
  
  render() {
    return (
      <View className='index'>
        <Text>计数: {this.state.count}</Text>
        <Button onClick={this.increment}>增加</Button>
      </View>
    );
  }
}

  2. uni-app：使用Vue语法开发多端应用

    <template>
  <view class="content">
    <text>计数: {{count}}</text>
    <button @click="increment">增加</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

未来发展方向

小程序技术的发展趋势：

  1. 更强大的原生能力：与设备硬件更深入集成
  2. 更丰富的生态：覆盖更多应用场景
  3. 更智能的开发体验：低代码、AI辅助开发
  4. 更高的性能要求：接近原生App的体验
  5. 更广泛的跨平台支持：一次开发，多端运行

总结

微信小程序凭借其"用完即走"的理念和强大的生态系统，为开发者提供了一个高效、低成本的应用开发平台。通过掌握本文介绍的开发技能和最佳实践，你可以构建出性能优异、用户体验出色的小程序应用。

小程序开发是一个不断发展的领域，持续学习和实践是成为优秀小程序开发者的关键。希望本文能为你的小程序开发之旅提供有价值的指导。

#微信小程序 #前端 #移动开发 #JavaScript #WXML

推荐阅读

Astro个人网站开发
前端开发

Astro个人网站开发

2025年4月30日
CSS单位大比较：rem、em、px、%、vh、vw、rpx的区别与应用场景
前端开发

CSS单位大比较：rem、em、px、%、vh、vw、rpx的区别与应用场景

2024年5月22日
返回博客列表