小程序-从0开始-20260408

小程序

一、小程序基础

1. 小程序是什么？

问题：小程序是什么？

答案： 核心回答：小程序是运行在宿主环境（如微信）内的轻量级应用，无需安装即可使用。

代码示例：

// 小程序项目结构
// project
// ├── app.js          // 应用入口
// ├── app.json        // 全局配置
// ├── app.wxss        // 全局样式
// ├── pages
// │   ├── index
// │   │   ├── index.js
// │   │   ├── index.wxml
// │   │   ├── index.wxss
// │   │   └── index.json
// │   └── logs
// └── components

// app.js
App({
    onLaunch() {
        console.log('小程序启动');
    },
    globalData: {
        userInfo: null
    }
});

// 获取 app 实例
const app = getApp();
console.log(app.globalData);

---

2. 小程序生命周期

问题：小程序生命周期

答案： 核心回答：小程序生命周期包括应用生命周期和页面生命周期。

代码示例：

// app.js - 应用生命周期
App({
    onLaunch() {
        // 小程序初始化
    },
    onShow() {
        // 小程序启动或切到前台
    },
    onHide() {
        // 小程序切到后台
    },
    onError(err) {
        // 小程序错误
    }
});

// page.js - 页面生命周期
Page({
    data: {
        name: '初始数据'
    },
    
    onLoad(options) {
        // 页面加载，可获取页面参数
        console.log(options.id);
    },
    
    onShow() {
        // 页面显示
    },
    
    onReady() {
        // 页面首次渲染完成
    },
    
    onHide() {
        // 页面隐藏
    },
    
    onUnload() {
        // 页面卸载
    },
    
    onPullDownRefresh() {
        // 下拉刷新
    },
    
    onReachBottom() {
        // 上拉加载
    }
});

---

二、数据绑定与渲染

3. 数据绑定

问题：小程序数据绑定

答案： 核心回答：小程序使用 this.setData() 更新数据，数据驱动视图更新。

代码示例：

// page.js
Page({
    data: {
        message: 'Hello',
        count: 0,
        array: [{id: 1, name: 'item1'}]
    },
    
    updateData() {
        // 更新单个值
        this.setData({ message: 'World' });
        
        // 更新多个值
        this.setData({
            message: 'New Message',
            count: this.data.count + 1
        });
        
        // 更新对象
        this.setData({
            'array[0].name': 'newName'
        });
        
        // 添加数组元素
        this.setData({
            array: [...this.data.array, {id: 2, name: 'item2'}]
        });
    }
});

// wxml
<view>{{ message }}</view>
<view>{{ count }}</view>

---

4. 条件渲染与列表渲染

问题：条件渲染与列表渲染

答案： 核心回答：wx:if 控制显示隐藏，wx:for 遍历列表。

代码示例：

<!-- 条件渲染 -->
<view wx:if="{{ show }}">显示</view>
<view wx:elif="{{ count > 10 }}">count大于10</view>
<view wx:else>隐藏</view>

<!-- hidden vs wx:if -->
<!-- wx:if: 条件不渲染，切换时重新创建/销毁 -->
<!-- hidden: 始终渲染，用 display:none 控制显示 -->

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

<!-- 使用 wx:for-item 和 wx:for-index -->
<view wx:for="{{items}}" wx:for-item="user" wx:for-index="i" wx:key="id">
    {{i}}: {{user.name}}
</view>

<!-- 嵌套列表 -->
<block wx:for="{{list}}" wx:key="id">
    <view>{{item.title}}</view>
    <view wx:for="{{item.children}}" wx:for-item="child" wx:key="id">
        {{child.name}}
    </view>
</block>

---

三、组件

5. 自定义组件

问题：自定义组件

答案： 核心回答：小程序支持自定义组件，通过 Component 构造器创建。

代码示例：

// components/my-component/my-component.js
Component({
    properties: {
        // 简写
        title: String,
        // 完整定义
        count: {
            type: Number,
            value: 0,
            observer(newVal, oldVal) {
                console.log('count变化:', newVal);
            }
        }
    },
    
    data: {
        localData: '组件私有数据'
    },
    
    methods: {
        handleTap() {
            this.setData({ localData: '新数据' });
            this.triggerEvent('customevent', { detail: '数据' });
        }
    },
    
    lifetimes: {
        created() {
            console.log('组件创建');
        },
        attached() {
            console.log('组件进入页面节点树');
        },
        ready() {
            console.log('组件布局完成');
        }
    }
});

// 使用组件
// page.json
{
    "usingComponents": {
        "my-component": "/components/my-component/my-component"
    }
}

// page.wxml
<my-component title="标题" bind:customevent="onEvent" />

---

四、API

6. 小程序 API 分类

问题：小程序 API 分类

答案： 核心回答：小程序 API 分为事件监听、同步、异步三类。

代码示例：

// 事件监听 API
wx.onCompassChange(callback);  // 监听罗盘变化
wx.offCompassChange(callback);  // 取消监听

// 同步 API (Sync)
try {
    const res = wx.getStorageSync('key');
    wx.setStorageSync('key', 'value');
} catch (e) {}

// 异步 API (Async) - 需配合 callback 或 Promise
// Promise 化
wx.getStorage({ key: 'key' }).then(res => console.log(res));

// async/await
async function loadData() {
    const res = await wx.getStorage({ key: 'key' });
    console.log(res.data);
}

// 常用 API
// 网络
wx.request({ url, method, data });  // 请求
wx.downloadFile({ url });           // 下载
wx.uploadFile({ url, filePath });    // 上传

// 存储
wx.setStorage({ key, data });
wx.getStorage({ key });
wx.removeStorage({ key });

// 路由
wx.navigateTo({ url });            // 跳转
wx.redirectTo({ url });           // 重定向
wx.switchTab({ url });             // 跳转 Tab
wx.reLaunch({ url });              // 关闭所有页面跳转

// 界面
wx.showToast({ title, icon });
wx.showModal({ title, content });
wx.showActionSheet({ itemList });

// 节点
wx.createSelectorQuery()
    .select('#id')
    .boundingClientRect()
    .exec(res => console.log(res));