微信小程序js教程：微信小程序JS实战指南，从入门到进阶的完整教程

来源：网络作者：日期：2025-11-05 07:06:46

随着微信生态的不断扩展,微信小程序已经成为企业级应用和开发者的重要选择，而JavaScript作为小程序的主要开发语言，其掌握程度直接决定了开发效率和项目质量，本文将从环境搭建、基础语法、API调用、组件使用到实战案例，全面解析微信小程序JS开发的核心要点，助你快速成为小程序开发高手。

环境搭建与基础配置

开发工具下载与配置

访问微信官方开发者工具下载对应平台的开发工具。
安装完成后,使用微信扫码登录，创建新项目并配置AppID（测试号也可使用）。

项目结构解析

app.js：全局逻辑，生命周期、网络请求等。
app.json：全局配置，页面路由、组件注册等。
project.config.json：项目配置，本地调试、上传代码等。

JS基础语法与微信小程序的差异

事件绑定与数据绑定

事件绑定：使用bindtap、catchtap绑定点击事件，catch系列可阻止事件冒泡。
数据绑定：使用进行数据绑定，支持WXML渲染。

// 示例：按钮点击事件
<view bindtap="handleClick">点击我</view>
Page({
  data: {
    message: 'Hello World'
  },
  handleClick() {
    this.setData({
      message: '点击成功！'
    })
  }
})

生命周期函数

onLoad：页面加载时触发，参数通过options传入。
onShow：页面每次显示时触发。
onReady：页面初始化完成时触发。

API调用与网络请求

微信API调用

使用wx全局对象调用微信原生API，如wx.request、wx.getUserInfo等。
注意：部分API需用户授权，如获取地理位置、摄像头权限。

// 网络请求示例
wx.request({
  url: 'https://example.com/data',
  method: 'GET',
  header: {
    'content-type': 'application/json'
  },
  success(res) {
    console.log(res.data)
  }
})

模块化开发

使用require或import引入模块，避免全局污染。
示例：创建工具函数模块util.js。

// util.js
module.exports = {
  sum(a, b) {
    return a + b;
  }
}
// 在页面中使用
const util = require('../../util/util.js')
console.log(util.sum(1, 2)) // 3

组件与生命周期管理

自定义组件

使用Component定义组件，支持properties、data、methods等。
示例：创建一个计数器组件。

// 计数器组件
Component({
  properties: {
    count: {
      type: Number,
      value: 0
    }
  },
  methods: {
    increment() {
      this.setData({
        count: this.data.count + 1
      })
    }
  }
})

组件通信

父组件通过this.setData更新子组件properties。
子组件通过this.triggerEvent向父组件发送事件。

实战案例：实现一个待办事项清单

项目结构

- pages/
  - index/
    - index.js
    - index.json
    - index.wxml
    - index.wxss

功能实现

添加待办事项
标记完成/未完成
删除事项

代码示例

// index.js
Page({
  data: {
    todos: [],
    inputValue: ''
  },
  onInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  addTodo() {
    if (!this.data.inputValue.trim()) return
    this.setData({
      todos: [...this.data.todos, { text: this.data.inputValue, done: false }],
      inputValue: ''
    })
  },
  toggleDone(e) {
    const index = e.currentTarget.dataset.index
    const newTodos = [...this.data.todos]
    newTodos[index].done = !newTodos[index].done
    this.setData({ todos: newTodos })
  },
  deleteTodo(e) {
    const index = e.currentTarget.dataset.index
    const newTodos = this.data.todos.filter((_, i) => i !== index)
    this.setData({ todos: newTodos })
  }
})