#微信小程序技巧微信小程序（微信小程序）开发框架技巧，由官方文档生成。 ## 何时使用此技能该技能应在以下情况下触发： * 开发微信小程序（微信小程序） * 使用 WXML、WXSS 或 WXS * 使用微信小程序API * 构建微信组件 * 实现微信开放能力（开放能力） * 调试小程序问题 * 优化小程序性能 ## 快速参考 ### 项目结构 ├── app.js # 应用逻辑 ├── app.json # 应用配置 ├── app.wxss # 全局样式 ├── 页数/ │ └── 索引/ │ ├── index.js # 页面逻辑 │ ├── index.json # 页面配置 │ ├── index.wxml # 页面模板 │ └── index.wxss # 页面样式 └── Components/ # 自定义组件 ### 常见模式 **示例 1** (javascript)： WeixinJSBridge.invoke('imagePreview', { 当前：'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' ] }, 函数(res) { 控制台.log(res.err_msg) }) **示例 2** (javascript)： wx.previewImage({ 当前：'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' ], 成功：函数（res）{ 控制台.log(res) } }) **示例 3** (html)： {{prop}} **示例 4** (js)： // /components/index.js 组件（{ 属性：{ 道具：{ 类型：字符串，值：'索引.属性' }, }, }) **示例 5**（CSS）： /* /components/index.wxss */ .index { 颜色：绿色； } **示例 6** (json)： { "昵称": "乐队", “性别”：1， "语言": "zh_CN", “城市”：“广州”， "省份": "广东省", “国家”：“CN”， "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0" } **示例 7** (json)： { "openId": "OPENID", "昵称": "昵称", “性别”：性别， “城市”：“城市”， “省”：“省”， “国家”：“国家”， "头像网址": "头像网址", "unionId": "UNIONID", “水印”： { "appid":"APPID", “时间戳”：时间戳 } } **示例8**（js）： wx.cloud.callFunction({ 名称：'我的函数'，数据：{ weRunData: wx.cloud.CloudID('xxx'), //这个CloudID值到云函数端会被替换对象：{ shareInfo: wx.cloud.CloudID('yyy'), //非卡车字段的CloudID不会被替换，会原样字符串显示 } } }) **示例 9** (html)： <视图>一个 <视图> b <视图> c **示例 10** (html)： <虚拟组件> <视图>一个 <视图> b <视图> c ## 参考文件该技能包括“references/”中的全面文档： * **getting_started.md** \- 快速入门和介绍 * **framework.md** \- 小程序框架（逻辑层、视图层） * **components.md** \- 内置组件 * **api.md** \- API 参考 * **cloud.md** \- 云开发（云开发） * **reference.md** \- 配置参考当需要详细信息时，使用“view”来阅读特定的参考文件。 ## 关键概念 ### 应用程序生命周期应用程序({ onLaunch（选项）{ // 小程序初始化 }, onShow（选项）{ // 显示小程序 }, 隐藏（）{ // 小程序隐藏 }, 全局数据：{ 用户信息：空 } }) ### 页面生命周期页码({ 数据：{ 消息：“你好世界” }, onLoad（选项）{ // 页面已加载 }, onShow() { // 显示的页面 }, onReady() { // 页面准备就绪 }, 隐藏（）{ // 页面隐藏 }, 卸载（）{ // 页面已卸载 } }) ### WXML 数据绑定 <视图>{{消息}} 有条件 {{item}} ### 事件处理点击我页码({ 处理点击（e）{ 控制台.log(e) } }) ## 使用此技能 ### 对于初学者从 Getting_started 参考文件开始了解基本概念。 ### 对于特定功能使用适当的类别参考文件（api、框架等）来获取详细信息。 ### 代码示例上面的快速参考部分包含从官方文档中提取的常见模式。 ## 资源 * [官方文档]() * [组件库]() * [API参考]() ## 注释 * 该技能由微信官方文档自动生成 * 参考文件保留源文档的结构和示例 * 内容为中文，以官方文档为准

微信小程序

包含技能