多仔 - 微信小程序开发实战
type: channel
link: https://duox.dev/tag/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/
items: 微信小程序开发实战之 06-微信小程序开发进阶
items: 微信小程序开发实战之 05-微信小程序常用 API（下）
items: 微信小程序开发实战之 04-微信小程序常用 API（上）
items: 微信小程序开发实战之 03-微信小程序页面交互
items: 微信小程序开发实战之 02-微信小程序页面制作
items: 微信小程序开发实战之 01-微信小程序入门

微信小程序开发实战之 06-微信小程序开发进阶
type: item
date: 2024-09-15T08:56:00+08:00
description: AI 摘要 文章系统梳理微信小程序进阶技能：先示范如何创建与引用自定义组件，涵盖 JSON 声明、Component 构造及局部/全局注册；继而介绍 Vant Weapp、WeUI 两大主流 UI 库的安装、配置与使用要点；最后引入 uni-app 跨端框架，详解 HBuilderX 项目结构、pages.json 全局配置及一键发布至微信小程序的流程，为开发者提供从组件化到多端发布的完整实践路线。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结自定义组件创建自定义组件微信小程序自定义组件一般放在 components 文件夹下，由 JSON、JS、WXML、WXSS 文件组成。组件的 JSON 文件中，需要声明 component 属性，将属性值设置为 true 以表示其是一个组件。{ "component": true, "usingComponents": { } }组件的 JS 文件中，需要调用 Component 函数构建组件。Component({ properties: {}, data: {}, methods: {} });Component 函数的基本选项：名称描述data组件的初始数据，用于组件模板渲染properties组件的属性列表，用于接收外界传递到组件中的数据可以为其指定数据类型和类型，但其本质上与 data 没有区别methods组件的事件处理函数示例：创建自定义组件测试组件配置文件（components/test/test.json）：{ "component": true, "usingComponents": { } }测试组件页面结构（components/test/test.wxml）： 点我欢迎{{name}}的到来 测试组件页面逻辑（components/test/test.js）：Component({ properties: { name: { type: String, value: '张三' } }, data: {}, methods: { showMessage() { wx.showToast({ title: "欢迎你，" + this.data.name }) } } });使用自定义组件自定义组件的引用方式分为局部引用和全局引用。局部引用，即在页面配置文件（pages/xxx/xxx.json）中引用自定义组件。全局引用，即在全局配置文件（app.json）中引用自定义组件。引用自定义组件的基本用法："usingComponents": { "组件标签": "组件路径" }示例：使用自定义组件首页页面配置文件（pages/index/index.json）：{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar", "test": "/components/test/test" } }首页页面结构（pages/index/index.wxml）：<test name="多仔"></test>示例效果：UI 组件库Vant WeappVant Weapp 是有赞前端团队开发的一套开源的微信小程序 UI 组件库，其界面风格统一、功能齐全，提供了一整套 UI 基础组件和业务组件，能够快速搭建出风格统一的页面。Vant Weapp 文档：https://vant-ui.github.io/vant-weapp/0.x/#/intro在微信小程序中使用 Vant Weapp，需要利用 npm 将 Vant Weapp 安装到项目中，并进行相关配置。微信小程序默认没有初始化 package.json，故需要先初始化 package.json。在全局配置文件（app.json）中，需要删除 style 配置项，以关闭新版基础组件样式，避免样式混乱。微信小程序不能使用 npm 包，需要在微信开发者工具中将 npm 包转换成微信小程序可以使用的包。使用 Vant Weapp 组件时，需要局部或全局导入对应的组件。示例：Vant Weapp终端执行：npm init -y npm i vant-weapp -S --production全局配置文件（app.json）：{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom", "enablePullDownRefresh": true }, "componentFramework": "glass-easel", "sitemapLocation": …

微信小程序开发实战之 05-微信小程序常用 API（下）
type: item
date: 2024-09-12T11:25:00+08:00
description: AI 摘要 本文系统梳理微信小程序核心 API 实战技巧，涵盖动画、登录、缓存、头像昵称、地图与位置、路由等高频场景。通过 wx.createAnimation 实现流畅动效，借助 wx.login 与 session_key 构建安全用户体系；利用同步/异步缓存 API 加速数据读写；结合腾讯地图 SDK 与 map 组件完成定位、标记与路径规划；以 wx.navigateTo、navigator 实现页面跳转，并给出完整代码示例与配置要点，助力开发者快速落地生产级能力。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结小程序组件与 API动画 APIwx.createAnimation 方法用于获取动画实例 Animation，通过该实例的相关属性和方法实现动画效果。wx.createAnimation 方法的基本选项：名称描述duration动画持续时间，单位为毫秒，默认值为 400timingFunction动画效果，默认值为 linearlinear：匀速ease：开始和结束速度较快，中间速度较慢，比较平滑ease-in：以慢速开始的过渡效果，开始速度较慢，然后逐渐加快ease-in-out：开始和结束速度较慢，中间速度较快的过渡效果，过渡更加自然ease-out：以慢速结束的过渡效果，开始速度较快，然后逐渐减慢step-start：在过渡的开始立即从初始状态跳转到最终状态，没有中间过渡过程step-end：在过渡的结束立即从初始状态跳转到最终状态，没有中间过渡过程，只是在过渡结束时才发生状态变化delay动画延迟时间，单位为毫秒，默认值为 0transformOrigin设置旋转元素的基点位置，默认值（x, y, z）为 50%, 50%, 0Animation 实例的基本方法：名称描述rotate(angle)旋转。旋转角度取值范围为 [-180, 180]export()导出动画队列，该方法每次调用后会清掉之前的动画操作将该方法导出的动画队列传递给页面中组件的 animation 属性，即可为相应的组件添加动画效果scale(sx, sy)缩放translate（tx, ty）平移变换skew(ax, ay)倾斜。倾斜角度取值范围为 [-180, 180]step(object)指定一个动画实例的下一个关键帧，表示一组动画完成opacity(value)设置透明度backgroundColor(value)设置背景颜色width(value)设置宽度top(value)设置 top 值示例：wx.createAnimation首页页面结构（pages/index/index.wxml）： 开始动画 <text>\n</text> <text animation="{{myAnimation}}">Hello World!</text>首页页面逻辑（pages/index/index.js）：Page({ data: { myAnimation: null }, playAnimation() { let animation = wx.createAnimation({ duration: 3000, timingFunction: 'ease', }) // 平移元素 animation.translate(200, 300) // 定义一帧 animation.step() // 导出动画 this.setData({ myAnimation: animation.export() }) } })示例效果：登录流程时序小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。小程序登录流程：登录流程时序说明：在微信小程序中，通过 wx.login 方法获取临时登录凭证 code。每一次调用 wx.login 方法都会生成新的 code，code 有效时间为 5 分钟且只能使用 1 次。获取到临时登录凭证 code 后，通过 wx.request 方法发送携带 code 的请求到开发者服务器。开发者服务器（后端服务器）将小程序 AppId、小程序密钥 AppSecret、临时登录凭证 code 发送请求给微信接口服务进行登录凭证校验。微信接口服务校验成功，会返回用户会话密钥 session_key、用户标识 openid、unionid 等信息。会话密钥 session_key 是对用户数据进行加密签名的密钥，当调用获取用户信息等微信接口时，需要使用会话密钥解密相关数据，因此为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥，一般会将会话密钥存储在开发者服务器中。openid 是用户的唯一标识，同一个微信用户在不同 AppId…

微信小程序开发实战之 04-微信小程序常用 API（上）
type: item
date: 2024-09-09T14:22:00+08:00
description: AI 摘要 本文系统梳理微信小程序核心 API 的使用要点与实战技巧，涵盖加载与消息提示、网络请求、背景音频与录音、媒体选择、文件上传下载及 canvas 绘图等高频场景。每个接口均给出参数说明、代码示例与效果演示，帮助开发者快速上手并规避 HTTPS 域名配置、后台播放权限等常见坑，为构建流畅用户体验奠定坚实基础。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结小程序组件与 API加载提示框 APIwx.showLoading 方法用于弹出加载提示框，加载提示框弹出后，不会自动关闭，需要手动调用 wx.hideLoading 方法才能关闭加载提示框。wx.showLoading 方法的基本选项：名称描述title提示的内容mask是否显示透明蒙层，防止触摸穿透，默认值为 falsesuccess接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.showLoading首页页面结构（pages/index/index.wxml）： 点击弹出消息框 首页页面逻辑（pages/index/index.js）：Page({ showMessage: function() { wx.showLoading({ title: "正在加载中" }) setTimeout(() => { wx.hideLoading() }, 3000) } })示例效果：消息提示框 APIwx.showToast 方法用于显示消息提示框。wx.showToast 方法的基本选项：名称描述title提示的内容当 icon 的值为 none 时，提示内容最多可以显示两行当 icon 的值为其他时，提示内容最多可以显示 7 个汉字长度icon图标，支持 success/error/loading/noneduration提示停留的时间，单位为毫秒，默认值为 1500mask是否显示透明蒙层，防止触摸穿透，默认值为 falsesuccess接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.showToast首页页面结构（pages/index/index.wxml）： 点击弹出消息框 首页页面逻辑（pages/index/index.js）：Page({ showMessage: function() { wx.showToast({ title: "请求成功啦", duration: 2000, icon: "success" }) } }) 示例效果：网络请求 APIwx.request 方法用于发送网络请求。wx.request 方法的基本选项：名称描述url开发者服务器接口地址data请求的参数，支持 string、object、ArrayBufferheader请求头对象method请求方式，默认为 GETdataType返回的数据格式，默认为 json其决定了小程序接收到服务器响应后，如何解析响应数据responseType响应的数据类型，默认为 text其影响小程序向服务器发送请求时，告知服务器期望返回的数据类型success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行出于安全性方面考虑，微信小程序官方对服务器接口的请求做了限制：只能请求 HTTPS 协议的服务器接口。必须登录微信小程序管理后台，将服务器接口的域名添加到信任列表中。服务器域名配置：当服务器接口不满足条件时，可以在微信开发者工具中勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS”，跳过对服务器接口的校验，但此做法仅限开发与调试阶段。示例：wx.request首页页面结构（pages/index/index.wxml）： 点击发送请求 <text>接收到的userName：{{userName}}</text> <text>\n</text> <text>接收到的age：{{age}}</text>首页页面逻辑（pages/index/index.js）：Page({ data: { userName: '', age: '' }, sendRequest: function() { wx.request({ url: "https://wwc.6os.net/addons/test_api/api.php", data: { userName: "多仔", age: "18" }, success: respData => { console.log(respData) this.setData({ userName: r…

微信小程序开发实战之 03-微信小程序页面交互
type: item
date: 2024-09-06T22:17:00+08:00
description: AI 摘要 本文系统梳理微信小程序页面交互核心机制：从 App 与 Page 注册、生命周期与事件回调，到数据绑定、setData 同步渲染、条件与列表渲染、WXS 轻量脚本及模块化复用，辅以触底加载、下拉刷新、事件冒泡、双向绑定等实战示例，帮助开发者快速构建高效、可维护的小程序页面。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结微信小程序框架接口App 函数在微信小程序中，若要在微信小程序启动、显示、隐藏时执行某些操作，或者在各个页面中需要共享一些数据时，可以通过 App 函数来实现。App 函数用于注册一个微信小程序，该函数必须在 微信小程序入口文件（app.js）中调用，且只能调用一次。App({})App 函数的参数时一个对象，通过该对象可以指定应用生命周期回调函数和保存一些共享数据。App 函数中的基本生命周期回调函数：名称描述onLaunch监听微信小程序初始化，微信小程序初始化完成时触发，全局只触发一次onShow监听微信小程序启动或切前台，微信小程序启动或从后台进入前台时触发onError错误监听函数，微信小程序脚本错误或者 API 调用报错时触发onHide监听微信小程序切后台，微信小程序从前台进入后台时触发onPageNotFound页面不存在监听函数，微信小程序要打开的页面不存在时触发在页面的 JS 文件中，通过 getApp 函数可以获取微信小程序全局唯一的 App 实例。通过 getApp 函数获取 App 实例后，可以访问 App 实例的属性或调用 App 实例的方法。获取 App 实例的基本用法：const app = getApp()Page 函数在微信小程序中，页面交互的代码写在页面 JS 文件中，每个页面都需要通过 Page 函数进行注册。Page 函数只能写在微信小程序每个页面对应的 JS 文件中，并且每个页面只能注册一个。Page 函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。Page 函数的基本用法：Page({ // 页面初始数据 data: {}, // 页面生命周期回调函数 onLoad() { }, // 页面事件处理函数 onPullDownRefresh() { } // ... })页面初始数据微信小程序提供了 Mustache 语法（双大括号语法）用于实现数据绑定，可将 data 中的数据通过 Mustache 语法输出到页面上。示例：页面初始数据首页页面逻辑（pages/index/index.js）：Page({ data: { message: 'hello, world～' } })首页页面结构（pages/index/index.wxml）：<text>{{message}}</text>示例效果：页面生命周期在微信小程序中，页面的生命周期是指每个页面“加载 → 渲染 → 销毁”的过程，每个页面都有生命周期，如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。页面生命周期回调函数用于实现在特定的时间点执行特定的操作，随着页面生命周期的变化，页面生命周期回调函数会自动执行。微信小程序的基本页面生命周期回调函数：名称描述onLoad页面加载时触发，且一个页面只会在创建完成后调用一次onShow页面显示时触发onReady页面初次渲染完成时触发，一个页面只会调用一次onHide页面隐藏时触发onUnload页面卸载释放时触发示例：页面生命周期首页页面逻辑（pages/index/index.js）：Page({ onLoad() { console.log('页面加载') }, onShow() { console.log('页面显示') } })示例效果：页面事件处理函数页面事件处理函数用于监听用户的行为，如上拉、下拉、滚动页面等。微信小程序的基本页面事件处理函数：名称描述onPullDownRefresh监听用户下拉刷新事件onReachBottom监听页面上拉触底事件onPageScroll监听页面滚动事件onShareAppMessage用户点击右上角三点，选择转发给朋友时触发事件上拉触底在微信小程序中，通过手指在屏幕上的上拉滑动操作，当滚动条到达距离页面底部特定的距离时，就会触发上拉触底事件，从而可以加载更多数据或执行相关的操作。微信小程序提供了 onReachBottom 事件处理函数，用于监听当前页面的上拉触底事件。在默认情况下，触发上拉触底事件时，滚动条距离页面底部的距离为 50px，即上拉触底距离为 50px，在全局配置文件（app.json）或页面配置文件（pages/xxx/xxx.json）中可以修改上拉触底的距离。示例：上拉触底全局配置文件（app.json…

微信小程序开发实战之 02-微信小程序页面制作
type: item
date: 2024-09-04T16:28:00+08:00
description: AI 摘要 本文系统梳理微信小程序页面制作全流程：先以 WXML 搭建结构，对比 HTML 差异；再用 WXSS 设定样式，详解 rpx、vw/vh 适配与样式导入；接着配置 app.json 管理页面路径、导航栏、标签栏；最后逐一演示 view、scroll-view、swiper、image、video、form 及 input、button 等核心组件的用法与属性，并介绍 WebView 与 Skyline 双渲染引擎的选择策略，为高效开发提供完整指南。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结页面制作概述WXML 概述在制作微信小程序页面时，页面的结构可以用 WXML 来实现。WXML 是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。WXML 与 HTML 的区别：HTML 和 WXML 使用的标签不同。HTML 经常使用 div 标签搭建页面结构，而 WXML 则使用 view 标签搭建页面结构。HTML 经常使用 span 标签定义行内文本 ，而 WXML 则使用 text 标签定义行内文本 。WXML 提供了和 Vue.js 中模板语法类似的模板语法，如数据绑定、列表渲染、条件渲染等。HTML 页面可以在浏览器中预览，而 WXML 页面仅能在微信客户端和微信开发者工具中预览。WXML 中的单标签必须在结尾 > 前面加上 /，否则微信开发者工具会报语法错误，而 HTML 中允许省略单标签 > 前面的 /。WXML 中所使用的标签是微信小程序定义的标签，应避免使用 HTML 标签，这样才能保证页面被正确转译。WXSS 概述微信小程序提供了一套类似 CSS 的语言 WXSS，通过 WXSS 可以美化页面样式。WXSS 与 CSS 的区别：不同的手机屏幕分辨率不同，如果用 CSS 中的 px 单位，会遇到屏幕适配的问题，需要手动进行像素单位换算，而微信小程序提供了一个新的单位 rpx，使用 rpx 单位可以很轻松地适配各种手机屏幕。在微信小程序中，项目根目录中的 app.wxss 作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的 WXSS 样式仅对当前页面生效，CSS 则没有这样的功能。在 WXSS 中设置背景图片的时候，可以使用网络图片或者以 Base64 格式编码的图片，不能使用本地图片。rpx 单位rpx（Responsive Pixel，自适应像素）是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。rpx 单位的设计思想是把所有设备的屏幕在宽度上等分为 750 份，即屏幕的总宽度为 750rpx，微信小程序在不同设备上运行的时候，会自动把 rpx 单位换算成对应的像素单位来渲染，从而实现屏幕适配。vw/vh 单位在使用 CSS 编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦，针对这类型问题，通过视口单位可以有效解决。视口表示可视区域的大小，视口单位主要包括 vw（Viewport Width）和 vh（Viewport Height），vw、vh 是相对长度单位，永远以视口作为参考。在微信小程序中也可以使用 vw 和 vh 单位，使用视口单位时，系统会将视口的宽度和高度分为 100 份，1vw 占用视口宽度的百分之一，1vh 占用视口高度的百分之一。样式导入为了避免样式代码冗余，可以将相同的样式代码抽为公共样式，放到一个单独的文件中，通过只修改公共样式实现对所有相关页面样式的修改，从而节约时间、方便管理。导入公共样式的基本用法：@import "公共的wxss路径";页面路径配置在微信小程序中可以通过全局配置文件（app.json）中的 pages 配置项来配置微信小程序的页面路径。pages 配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。pages 数组中的第一项为微信小程序的初始页面，开发者可以手动调整数组中元素的顺序以更换初始页面。示例：页面路径配置全局配置文件（app.json）：{ "pages": [ "pages/index/index" ] }新建微信小程序页面的方法：通过 pages 数组中新增一项来新增页面。通过项目资源管理器新增页面。删除微信小程序页面的方法：对页面文件直接进行删除操作，不会触发代码的自动更新效果。删除页面需要手动修改全局配置文件（app.json）中的 pages 配置项。微信小程序页面组件页面组件概述微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的 UI 样式和特定功能效果。微信小程序提供了丰富的组件，通过组合这些组件可以进行高效开发。view 组件…

微信小程序开发实战之 01-微信小程序入门
type: item
date: 2024-09-01T09:56:00+08:00
description: AI 摘要 本文系统梳理微信小程序入门要点：先厘清“无需安装、用完即走”的产品定位及与原生 APP、HTML5 的优劣差异；继而介绍账号注册、AppID 获取、开发者工具安装与项目创建流程；剖析 pages 四文件结构、全局配置、组件与 API 能力；阐释渲染层、逻辑层、Native 层与 HTTPS、WebSocket 通信模型；最后覆盖成员权限、开发-体验-审核-线上四版本管理及发布上线三步骤，为初学者搭建完整知识框架。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结初识微信小程序微信小程序概述与传统的原生应用相比，微信小程序是一种全新的连接用户与服务的应用，它可以在微信内被便捷地获取和传播，同时具有良好的用户体验。微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应用，用户通过微信扫一扫或者搜一搜即可打开，且每个微信小程序的体积非常小。微信小程序特点微信小程序是继原生 APP 和 HTML5 应用之后出现的一种新的应用形态。无需安装，触手可及：用户在使用微信小程序时无需安装，直接使用，不占用存储空间。用完即走，无需卸载：在使用微信小程序后，可以用完即走，无需卸载。名称唯一：某一个名称被注册后，另一个微信小程序将不能使用相同的名称。入口丰富：用户可以通过多种途径打开微信小程序。传播能力强：微信小程序入口丰富，再加上基于微信生态，使得微信小程序的传播能力强。微信小程序与原生 APP 相比：对比项微信小程序原生 APP下载安装无需下载安装需要从应用商店中下载安装体积大小体积小体积大跨平台可以不可以开发成本较低较高推广成本较低较高微信小程序与 HTML5 应用相比：对比项微信小程序HTML5 应用运行环境运行在微信上运行在浏览器上用户体验流畅度较好流畅度略差接口应用大量 API少量 API微信小程序发展前景微信自从出现以来，受到广大用户的喜爱，目前已成为人们必不可少的通信工具，对于用户而言，使用依托于微信的小程序的频率也越来越高。微信小程序的发展前景：生态体系：微信小程序已经形成了自己的生态体系，它连接了开发者、运营者、投资者等各领域的企业，并且接入了多个第三方服务的平台。微信小程序已经进入到了一个快速发展的阶段，未来的发展空间也越来越大。开放能力：在发展过程中，微信小程序不断自我完善， 为开发者开放了越来越多的接口，它可以适用于大多数的用户和场景，还可以方便开发者进行深度挖掘。同时，微信为小程序提供了越来越多的开放功能，例如微信扫码、微信支付、地理定位等，这对微信小程序的发展也会起到推动作用。用户黏性：微信小程序已经积累了大量用户，用户黏性高，使其他行业与微信用户有更好的连接，能够更好地与微信结合。微信小程序宿主环境宿主环境（Host Environment）是指程序运行所依赖的环境。微信小程序可以跨平台，因为微信小程序并不是一个直接安装在 Android 系统或 iOS 系统中的应用，而是运行在微信客户端上的应用，微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。微信小程序的宿主环境为微信小程序提供了丰富的组件和 API，可以完成许多普通网页无法完成的功能。组件：用于快速搭建页面的结构，包括视图容器、基础内容、表单、导航、媒体、地图、画布、开放能力等。API：用于让开发者方便地调用微信提供的功能，如获取用户信息、微信登录、微信支付等。微信小程序开发准备注册微信小程序开发账号微信公众平台：https://mp.weixin.qq.com/开发微信小程序时，需要具备开发微信小程序的权限，可以先在微信公众平台上注册一个小程序账号，并根据微信公众号平台指引注册小程序账号，也可以使用小程序测试号。获取微信小程序 AppID在微信小程序中，AppID 又称为小程序 ID，是每个小程序的唯一标识，每个小程序账号只有一个 AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。下载与安装微信开发者工具微信公众平台为开发者提供了微信开发者工具，帮助开发者快速实现微信小程序的开发。下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html创建微信小程序项目在进行微信小程序开发前，需要先使用微信开发者工具创建一个空的小程序项目，创建完成后可以进行微信小程序代码的编写。微信小程序开发基础微信小程序项目结构项目创建完成后，微信开发者工具会自动创建微信小程序的项目工程结构。微信小程序项目的基本结构：名称描述components存放微信小程序的所有组件pages存放微信小程序的所有页面.eslintrc.js用于格式化代码，使代码风格保持一致app.js微信小程序的入口文件，用于描述微信小程序的…