Back to Details

wechat-miniprogram

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WeChat Mini Program Skill

微信小程序开发技能

WeChat Mini Program (微信小程序) development framework skill, generated from official documentation.
微信小程序开发框架技能，基于官方文档生成。

When to Use This Skill

何时使用该技能

This skill should be triggered when:
  • Developing WeChat Mini Programs (微信小程序)
  • Working with WXML, WXSS, or WXS
  • Using WeChat Mini Program APIs
  • Building WeChat components
  • Implementing WeChat open capabilities (开放能力)
  • Debugging Mini Program issues
  • Optimizing Mini Program performance
当以下场景出现时，应触发该技能：
  • 开发微信小程序
  • 处理WXML、WXSS或WXS相关工作
  • 使用微信小程序API
  • 构建微信小程序组件
  • 实现微信开放能力
  • 调试小程序问题
  • 优化小程序性能

Quick Reference

快速参考

Project Structure

项目结构

├── app.js          # App logic
├── app.json        # App configuration
├── app.wxss        # Global styles
├── pages/
│   └── index/
│       ├── index.js    # Page logic
│       ├── index.json  # Page configuration
│       ├── index.wxml  # Page template
│       └── index.wxss  # Page styles
└── components/     # Custom components
├── app.js          # 应用逻辑
├── app.json        # 应用配置
├── app.wxss        # 全局样式
├── pages/
│   └── index/
│       ├── index.js    # 页面逻辑
│       ├── index.json  # 页面配置
│       ├── index.wxml  # 页面模板
│       └── index.wxss  # 页面样式
└── components/     # 自定义组件

Common Patterns

常见模式

Example 1 (javascript):
javascript
WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})
Example 2 (javascript):
javascript
wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})
Example 3 (html):
html
<!-- /components/index.wmxl -->
<view class="index">{{prop}}</view>
Example 4 (js):
js
// /components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    },
  },
})
Example 5 (css):
css
/* /components/index.wxss */
.index {
  color: green;
}
Example 6 (json):
json
{
  "nickName": "Band",
  "gender": 1,
  "language": "zh_CN",
  "city": "Guangzhou",
  "province": "Guangdong",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}
Example 7 (json):
json
{
    "openId": "OPENID",
    "nickName": "NICKNAME",
    "gender": GENDER,
    "city": "CITY",
    "province": "PROVINCE",
    "country": "COUNTRY",
    "avatarUrl": "AVATARURL",
    "unionId": "UNIONID",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":TIMESTAMP
    }
}
Example 8 (js):
js
wx.cloud.callFunction({
  name: 'myFunction',
  data: {
    weRunData: wx.cloud.CloudID('xxx'), // 这个 CloudID 值到云函数端会被替换
    obj: {
      shareInfo: wx.cloud.CloudID('yyy'), // 非顶层字段的 CloudID 不会被替换，会原样字符串展示
    }
  }
})
Example 9 (html):
html
<scroll-view type="list" scroll-y>
  <view> a </view>
  <view> b </view>
  <view> c </view>
</scroll-view>
Example 10 (html):
html
<scroll-view type="list" scroll-y>
  <virtual-comp>
    <view> a </view>
    <view> b </view>
    <view> c </view>
  </virtual-comp>
</scroll-view>
示例1（JavaScript）:
javascript
WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})
示例2（JavaScript）:
javascript
wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})
示例3（HTML）:
html
<!-- /components/index.wmxl -->
<view class="index">{{prop}}</view>
示例4（JavaScript）:
js
// /components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    },
  },
})
示例5（CSS）:
css
/* /components/index.wxss */
.index {
  color: green;
}
示例6（JSON）:
json
{
  "nickName": "Band",
  "gender": 1,
  "language": "zh_CN",
  "city": "Guangzhou",
  "province": "Guangdong",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}
示例7（JSON）:
json
{
    "openId": "OPENID",
    "nickName": "NICKNAME",
    "gender": GENDER,
    "city": "CITY",
    "province": "PROVINCE",
    "country": "COUNTRY",
    "avatarUrl": "AVATARURL",
    "unionId": "UNIONID",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":TIMESTAMP
    }
}
示例8（JavaScript）:
js
wx.cloud.callFunction({
  name: 'myFunction',
  data: {
    weRunData: wx.cloud.CloudID('xxx'), // 这个 CloudID 值到云函数端会被替换
    obj: {
      shareInfo: wx.cloud.CloudID('yyy'), // 非顶层字段的 CloudID 不会被替换，会原样字符串展示
    }
  }
})
示例9（HTML）:
html
<scroll-view type="list" scroll-y>
  <view> a </view>
  <view> b </view>
  <view> c </view>
</scroll-view>
示例10（HTML）:
html
<scroll-view type="list" scroll-y>
  <virtual-comp>
    <view> a </view>
    <view> b </view>
    <view> c </view>
  </virtual-comp>
</scroll-view>

Reference Files

参考文档

This skill includes comprehensive documentation in 
references/
:
  • getting_started.md - Quick start and introduction
  • framework.md - Mini Program framework (逻辑层、视图层)
  • components.md - Built-in components
  • api.md - API reference
  • cloud.md - Cloud development (云开发)
  • reference.md - Configuration reference
Use 
view
to read specific reference files when detailed information is needed.
该技能在
references/
目录下包含完整文档：
  • getting_started.md - 快速入门与介绍
  • framework.md - 小程序框架（逻辑层、视图层）
  • components.md - 内置组件
  • api.md - API参考
  • cloud.md - 云开发
  • reference.md - 配置参考
当需要详细信息时，使用
view
命令查看特定参考文档。

Key Concepts

核心概念

App Lifecycle

应用生命周期

javascript
App({
  onLaunch(options) {
    // Mini Program initialized
  },
  onShow(options) {
    // Mini Program shown
  },
  onHide() {
    // Mini Program hidden
  },
  globalData: {
    userInfo: null
  }
})
javascript
App({
  onLaunch(options) {
    // 小程序初始化
  },
  onShow(options) {
    // 小程序显示
  },
  onHide() {
    // 小程序隐藏
  },
  globalData: {
    userInfo: null
  }
})

Page Lifecycle

页面生命周期

javascript
Page({
  data: {
    message: 'Hello World'
  },
  onLoad(options) {
    // Page loaded
  },
  onShow() {
    // Page shown
  },
  onReady() {
    // Page ready
  },
  onHide() {
    // Page hidden
  },
  onUnload() {
    // Page unloaded
  }
})
javascript
Page({
  data: {
    message: 'Hello World'
  },
  onLoad(options) {
    // 页面加载完成
  },
  onShow() {
    // 页面显示
  },
  onReady() {
    // 页面初次渲染完成
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面卸载
  }
})

WXML Data Binding

WXML数据绑定

wxml
<view>{{message}}</view>
<view wx:if="{{condition}}">Conditional</view>
<view wx:for="{{array}}" wx:key="id">{{item}}</view>
wxml
<view>{{message}}</view>
<view wx:if="{{condition}}">Conditional</view>
<view wx:for="{{array}}" wx:key="id">{{item}}</view>

Event Handling

事件处理

wxml
<button bindtap="handleTap">Click Me</button>
javascript
Page({
  handleTap(e) {
    console.log(e)
  }
})
wxml
<button bindtap="handleTap">点击我</button>
javascript
Page({
  handleTap(e) {
    console.log(e)
  }
})

Working with This Skill

使用该技能的指南

For Beginners

面向初学者

Start with the getting_started reference file for foundational concepts.
从
getting_started
参考文档开始，学习基础概念。

For Specific Features

针对特定功能

Use the appropriate category reference file (api, framework, etc.) for detailed information.
使用对应分类的参考文档（如api、framework等）获取详细信息。

For Code Examples

针对代码示例

The quick reference section above contains common patterns extracted from the official docs.
上方快速参考部分包含了从官方文档提取的常见代码模式。

Resources

资源

Notes

注意事项

  • This skill was automatically generated from official WeChat documentation
  • Reference files preserve the structure and examples from source docs
  • Content is in Chinese as per official documentation
  • 该技能由微信官方文档自动生成
  • 参考文档保留了源文档的结构和示例
  • 内容与官方文档一致，为中文