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 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 Common Patterns Example 1 (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): 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):
< view class = " index "
{{prop}} </ view
Example 4 (js): // /components/index.js Component ( { properties : { prop : { type : String , value : 'index.properties' } , } , } ) Example 5 (css): / /components/index.wxss / .index { color : green ; } Example 6 (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): { "openId" : "OPENID" , "nickName" : "NICKNAME" , "gender" : GENDER , "city" : "CITY" , "province" : "PROVINCE" , "country" : "COUNTRY" , "avatarUrl" : "AVATARURL" , "unionId" : "UNIONID" , "watermark" : { "appid" : "APPID" , "timestamp" : TIMESTAMP } } Example 8 (js): wx . cloud . callFunction ( { name : 'myFunction' , data : { weRunData : wx . cloud . CloudID ( 'xxx' ) , // 这个 CloudID 值到云函数端会被替换 obj : { shareInfo : wx . cloud . CloudID ( 'yyy' ) , // 非顶层字段的 CloudID 不会被替换，会原样字符串展示 } } } ) Example 9 (html): < scroll-view type = " list " scroll-y
< view
a </ view
< view
b </ view
< view
c </ view
</ scroll-view
Example 10 (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. Key Concepts App Lifecycle App ( { onLaunch ( options ) { // Mini Program initialized } , onShow ( options ) { // Mini Program shown } , onHide ( ) { // Mini Program hidden } , globalData : { userInfo : null } } ) Page Lifecycle Page ( { data : { message : 'Hello World' } , onLoad ( options ) { // Page loaded } , onShow ( ) { // Page shown } , onReady ( ) { // Page ready } , onHide ( ) { // Page hidden } , onUnload ( ) { // Page unloaded } } ) WXML Data Binding
{{message}} Conditional {{item}} Event Handling Page ( { handleTap ( e ) { console . log ( e ) } } ) Working with This Skill For Beginners Start with the getting_started reference file for foundational concepts. For Specific Features Use the appropriate category reference file (api, framework, etc.) for detailed information. For Code Examples The quick reference section above contains common patterns extracted from the official docs. Resources Official Documentation Component Library API Reference 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