微信小程序开发 Skill
> 微信小程序开发指南 - 从入门到精通
官方文档
- 开发文档: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
- 框架参考: https://developers.weixin.qq.com/miniprogram/dev/reference/
- 组件文档: https://developers.weixin.qq.com/miniprogram/dev/component/
- API 文档: https://developers.weixin.qq.com/miniprogram/dev/api/
小程序简介
小程序是一种全新的连接用户与服务的方式，可以在微信内被便捷地获取和传播。
技术特点
- 快速加载：从微信本地加载资源
- 原生体验：流畅的页面切换和操作反馈
- 强大能力：拍摄、录音、支付、分享等
- 易开发：类似 Web 开发，学习成本低
与 Web 开发的区别
| 特性 | 小程序 | Web |
|---|---|---|
| 渲染线程 | 双线程 | 单线程 |
| DOM API | 不可用 | 可用 |
| jQuery/Zepto | 不可用 | 可用 |
| 运行环境 | iOS/Android 微信客户端 | 浏览器 |
项目结构
miniprogram/
├── app.js # 小程序入口文件
├── app.json # 全局配置
├── app.wxss # 全局样式
├── pages/ # 页面目录
│ └── index/
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
├── components/ # 自定义组件
└── utils/ # 工具函数
全局配置 (app.json)
{
"pages": ["pages/index/index"],
"window": {
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序标题"
},
"tabBar": {
"color": "#999999",
"selectedColor": "#007AFF",
"list": [
{"pagePath": "pages/index/index", "text": "首页"}
]
}
}
页面注册 (Page)
Page({
data: {
text: "Hello World"
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台
},
onPullDownRefresh: function() {
// 下拉刷新
},
handleTap: function() {
this.setData({ text: '点击了' });
}
});
模板语法 (WXML)
<!-- 数据绑定 -->
<view>{{message}}</view>
<!-- 列表渲染 -->
<view wx:for="{{array}}" wx:key="id">{{item.name}}</view>
<!-- 条件渲染 -->
<view wx:if="{{condition}}">显示</view>
<!-- 事件处理 -->
<view bindtap="handleTap">点击</view>
常用 API
网络请求
wx.request({
url: 'https://api.example.com/data',
method: 'GET',
success: function(res) {
console.log(res.data);
}
});
路由跳转
wx.navigateTo({ url: '/pages/detail/detail?id=1' });
wx.redirectTo({ url: '/pages/index/index' });
wx.switchTab({ url: '/pages/index/index' });
wx.navigateBack({ delta: 1 });
数据缓存
wx.setStorageSync('key', 'value');
const value = wx.getStorageSync('key');
自定义组件
Component({
properties: {
title: { type: String, value: '默认标题' }
},
data: { count: 0 },
methods: {
increment: function() {
this.setData({ count: this.data.count + 1 });
this.triggerEvent('change', { count: this.data.count });
}
}
});
注意事项
- 域名配置：request 域名需在小程序后台配置
- HTTPS 要求：所有网络请求必须使用 HTTPS
- 代码包大小：主包限制 2MB，总分包限制 20MB
- 用户隐私：使用地理位置等敏感接口需声明
参考资源
- 微信小程序官方文档
- 小程序组件参考
- 小程序 API 参考
参考资料
更多小程序文档请参考 references/ 目录下的文档文件。
