前言概述概述微信开发者工具以下简称开发者工具是微信官方推出的一站式开发调试工具专为小程序、小游戏、公众号网页等微信生态产品打造集成代码编辑、真机模拟、调试排错、性能检测与版本发布能力助力开发者高效完成从开发到上线的全流程工作。开发者工具是微信小程序或小游戏的原生开发工具。语法或者说代码的具体长相在思想上个人感觉是结合了VUE与传统HTML、CSS、JavaScript的一个页面的基本组成是WXML、WXSS、JS、JSON文件构成后面会讲。开发者工具对于没有开发经验只想专注于微信平台快速做出一款符合自己需求的小程序是非常友好的学习成本非常低廉。一是因其原生性在开发-发布-上线都提供了非常简洁的方法二是其提供了一种云开发的方式作为后端省去了后端繁琐的开发与部署流程可以以极低的代码和极低的学习成本快速上手。微信开发者工具微信开发者工具安装下载链接建议下载稳定版本微信开发者文档微信开发者工具提供了一个相对完善的文档这个文档是必不可少的。文档可以以问题导向式的去学习。遇到问题了再去查询文档相关内容。微信开发者文档指南封面 | 微信开放文档创建项目微信公众平台创建小程序账号微信公众平台是微信官方推出的内容运营与服务承载平台支持个人、企业等各类主体运营订阅号、服务号等账号提供内容发布、用户管理、互动触达与服务接口接入能力是连接用户、落地轻量化服务的核心载体。简单粗略的理解就是微信开发者工具是编写小程序代码、测试小程序代码功能的编辑器。微信公众平台的作用是创建与管理小程序账号。在编写代码前要在微信公众平台创建一个小程序账号。微信公众平台地址https://mp.weixin.qq.com/cgi-bin/wx?tokenlangzh_CN点击注册后按照要求注册即可。注:在注册小程序账号的时候需要选择“个人”或“企业”类型“企业”类型包括“个体户”和“企业”个人类型的小程序无法在微信下拉的搜索框中通过小程序名字搜索到小程序以及在开发中许多API或功能无法使用如果收款。企业类型需要营业执照。小程序注册成功后会进入此页面小程序需进行“微信认证”与“小程序备案”后才可以正式上线。微信认证为官方一年收取一次个人和企业类型的个体户目前30元/年企业类型的其他类型都要300元/年小程序认证期间个人经验保持电话通畅腾讯的外包认证公司会打电话向你核实基本信息如果没接上即使材料没问题也会认证失败认证失败后有三次免费认证的机会。小程序备案为向当地所属通信管理局进行备案免费但需要等待一段时间个人经验是普遍在一个星期以内。-------小程序备案小程序备案全流程都在微信公众平台内完成备案具体要准备的材料需要根据属地通信局的要求具体准备。备案材料必须严谨。关于自己将要写的小程序自行片段类目是否触发前置审批如金融、教育·····具体流程参考小程序备案操作指引 | 微信开放文档在微信公众平台点击开发管理AppID:可以理解为小程序的账号在微信开发者创建项目时需要用到微信开发者工具创建项目·点击进入微信开发者工具后在左侧的菜单栏中可以看到小程序、小游戏、公众号等这里我们以小程序为例。​点击后进入这里进行项目的一些基础配置填写1.AppID 填写小程序AppID,AppID在微信公众平台中获取2.后端服务: 云开发方式是一种低码开发的后端服务使用的语言主要是JavaScript以云函数的形式存在符合初学者对于代码的理解没有繁杂的配置只需要关注业务代码本身所有配置均为图形化的按钮极少出现编码配置。若选择“不使用云服务”即需要调用自有服务器。这里我以云开发的为例。3.其他选项默认即可点击创建微信开发者工具界面讲解常用界面解读界面大概分布整个开发者工具的界面布局大概分为四部分1.模拟器也就是小程序代码对应渲染的界面显示2.编辑器就是写代码的地方3.调试器就是在后续写代码样式和逻辑调试需要用到的4.资源管理器就是项目各文件的结构常用界面解读模拟器的相关设置解读模拟器的相关设置在开发的过程都不算是常用的了解一下就行下面我按照顺序讲解1.简单理解就是这个模拟器界面选择哪一个只是模拟对应的高宽不是模拟的具体真机。高宽你可以自定义也可以选择选择对应的机型。个人建议是iPhone 6/7。2.热重载开这个东西的作用就是在你编辑代码的过程中不用保存就生效。这个东西个人建议大家是关了的个人感觉还是比较鸡肋的用保存自动编译这个配置后面讲就行了。3.页面刷新可以理解为重新进入这个页面。4.操作模拟就是模拟手机的各种操作用的不多具体有应用场景的时候再看一下就行。5.页面分离,这个功能更多的是给用其他开发工具写小程序的时候调试用的因为其他开发工具最后还是要用到微信开发者工具的模拟器去调试调试器解读控制台对于刚入门新手用的比较多的就是上图中圈出来的四个Wxml、Console、AppData、Storage。Console:就是控制台微信小程序用的内核是chrome的这个东西就是和浏览器的F12非常相似的。编译的日志以及自己打印的日志都是在这里显示。在后续调试中比较频繁用到的一个方法是console.log()、console.error()Wxml:这个的作用就是查看小程序页面的Dom(就是页面布局定位具体的元素)。主要用法有二1.把鼠标放到代码中某一行元素确定其对应在模拟器中的位置如下图2.点击调试器区域左上角的鼠标图案把鼠标放在模拟器中的某个位置可确定该位置对应的元素代码位置AppData:这个区域里面记录的就是所有还没有被销毁的页面的JS文件中的Data值。JS代码如下Page({ data: { id:1234567, name:张三, has_email:true, parent:{ father:{ name:李四, age:50 }, mother:{ name:小芳 } }, subject:[ 物理,化学,政治 ] }, })对应的AppData页面为Storage:就是小程序的缓存。微信开发者工具提供了一些缓存数据的API,具体可查看微信开发者文档any wx.getStorageSync(string key) | 微信开放文档等相关API文档内容。缓存分为异步和同步示例链接中的是同步把末尾的Sync去掉就是异步同异步的区别是同步是获取到了缓存内容再执行后续代码异步是后续代码和获取缓存代码同时执行。缓存可以保留一些常用但是不重要的数据因为用户清理手机数据的时候是有可能把缓存删掉的。资源管理器区域各功能的解读与使用从左到右分别是资源管理器、查找、源代码管理、插件、代码依赖分析、docker。资源管理器就是展示文件结构的那部分查找在项目代码中查找某个特定的代码源代码管理搭配git使用新手可以了解git建立git使用习惯。不会也没事。插件就是给微信开发者工具加一些功能扩展按查找需使用但是微信开发者工具插件市场插件比较少。代码依赖分析可以查看各个包的大小以及关系。小程序单包不能超过2MB建议不超过1.5MB可以在这里观察有没有超。docker,容器化工具在微信开发者工具云开发模式用不上。常用的就是资源管理器搜索代码依赖分析。常用设置主要设置功能按钮界面常用功能按钮1.编译编译是把整个项目都都打包一遍。之前在模拟器的讲解中提到刷新刷新是只刷新当前页面。编译模式的选择可以创建或选择编译模式比如我编译后我只想打开某个页面可以在“启动页面”设置中进行选择。又比如我想调试链接或二维码跳转小程序这个链接、二维码带的参数、跳转的页面是否正确就可以选择快速URL 编译。2.预览真机调试预览和真机调试就是在手机上观察测试代码是否正确。模拟器环境与实际的手机环境会有一些轻微差别所以在写完代码后推荐在真机上测试一遍。真机指具体的我们平时候用的手机调试和预览的区别是预览不会出现调试器真机调试会有调试器。二者都不是实时的如果在调试过程中修改了代码就必须再次点击真机调试或预览重新打包编译。3.缓存这里的缓存的含义比之前在调试器的讲解中的缓存范围要大。调试器中的Storage只是小程序“能直观看到的”调试器的缓存含义是存在微信提供给小程序沙箱的是可以通过相对简单的技术手段找出来的。这里的缓存范围要广一些。比如编译缓存是开发者工具自己为了开发或调试设置的。又比如登录态缓存这部分在真机上是微信的底层逻辑这个是一进入小程序微信底层校验用户身份合法性的不是我们自己在小程序设置的登录页、登录按钮、登录功能。注写代码的过程中有些时候明明自己代码没有错编译后却报错或没有产生想要的效果。有可能就是开发者工具的问题这个时候就可以把编译缓存或全部缓存清除了重新编译或者关闭当前小程序项目重新打开这里只讲解详情。“版本管理”是和之前讲到的“资源管理器区域”的“源代码管理”是差不多的一个东西。上传后续会单独拉出一节来讲在详情中只讲本地设置只说一个常用的设置就是图中圈出来的这个设置。在互联网中我们使用别人的信息服务很多时候是已接口调用的形式去使用的接口很多时候又是以https的形式出现为了管控和防止恶意请求微信只会接受在白名单内的域名请求。白名单在微信公众平台中设置然后这个不校验合法域名就是在开发阶段可以放行所有域名的请求方便调试。累了今天先到这吧20260823----------------------------------------------------------------------------------小程序项目结构如图所示为小程序项目小程序项目结构如下所示project-root/├── app.js // 小程序全局入口定义全局数据与生命周期函数├── app.json // 全局配置页面路径、窗口样式、tabBar、权限声明等├── app.wxss // 全局公共样式表├── sitemap.json // 配置页面是否允许被微信搜索收录├── project.config.json // 微信开发者工具的项目配置文件├── pages/ // 页面目录每个子目录对应一个独立页面│ └── index/ // 首页示例│ ├── index.js // 页面逻辑数据、事件处理、生命周期│ ├── index.json // 单页面专属配置│ ├── index.wxml // 页面结构模板│ └── index.wxss // 页面样式├── components/ // 自定义公共组件目录├── utils/ // 公共工具函数目录└── images/ // 静态资源目录图片、图标等App.json区局配置讲解app.json是微信小程序的全局总配置文件相当于整个小程序的“系统总设置面板”。它统一管控所有页面的注册、顶部导航栏样式、底部切换菜单、下拉刷新开关等全局规则配置默认对所有页面生效是每个小程序项目必不可少的核心文件。核心配置pages页面清单 小程序的“页面花名册”。你创建的每一个页面都必须在这里登记文件路径否则小程序找不到、打不开这个页面。数组里的第一条路径就是小程序启动后默认显示的首页。window窗口外观 管小程序顶部导航栏、页面背景、下拉刷新样式的“外观设置”。比如改顶部标题文字、导航栏颜色、开启下拉刷新等都在这里设置。tabBar底部导航栏 就是小程序底部的一排切换菜单类似微信底部的“微信/通讯录/发现/我”点击可以在几个核心页面之间切换。最少配置2个最多5个标签页。完整示例代码{ // 页面清单所有页面必须在此注册数组第一项为启动首页 pages: [ pages/index/index, pages/category/category, pages/cart/cart, pages/mine/mine ], // 全局窗口样式 window: { navigationBarTitleText: 示例小程序, // 顶部导航栏标题文字 navigationBarBackgroundColor: #ffffff, // 顶部导航栏背景色 navigationBarTextStyle: black, // 顶部标题文字颜色仅支持 black / white backgroundColor: #f5f5f5, // 下拉页面露出的背景色 backgroundTextStyle: light, // 下拉时 loading 样式仅支持 dark / light enablePullDownRefresh: true, // 开启全局下拉刷新 onReachBottomDistance: 50 // 触底事件触发时距离页面底部的距离单位px }, // 底部导航栏tabBar tabBar: { color: #666666, // 文字默认颜色 selectedColor: #1677ff,// 文字选中时的颜色 backgroundColor: #ffffff, // 导航栏背景色 borderStyle: black, // 顶部边框颜色仅支持 black / white list: [ { pagePath: pages/index/index, // 对应页面路径必须已在pages中注册 text: 首页, // 标签文字 iconPath: images/home.png, // 未选中图标可选 selectedIconPath: images/home-active.png // 选中图标可选 }, { pagePath: pages/category/category, text: 分类, iconPath: images/category.png, selectedIconPath: images/category-active.png }, { pagePath: pages/cart/cart, text: 购物车, iconPath: images/cart.png, selectedIconPath: images/cart-active.png }, { pagePath: pages/mine/mine, text: 我的, iconPath: images/mine.png, selectedIconPath: images/mine-active.png } ] }, // 其他全局配置 style: v2, sitemapLocation: sitemap.json }补充说明页面路径不用写文件后缀如.wxml、.js小程序会自动匹配同目录下的4个页面文件。单个页面如果想覆盖全局样式可以在页面对应的.json文件中单独配置优先级高于app.json。颜色值必须使用十六进制格式如#ffffff不支持 red、blue 等英文颜色名。小程序常用WXML页面标签View作用小程序里最基础的 “万能盒子”对应网页里的div。你可以把它理解成页面的隔板用来包裹其他组件、划分内容区块、做排版布局是搭建页面结构用得最多的组件。它本身不显示内容只负责装东西和控制排版。常用属性hover-class点击组件时的样式类名用来做点击变暗的反馈效果hover-stop-propagation阻止点击事件冒泡防止点里面的小盒子连带触发外面大盒子的点击效果hidden布尔值控制组件是否隐藏!-- 带点击效果的卡片容器 -- view classcard hover-classcard-hover text这是一个卡片内容/text /view对应CSS样式代码/* 对应样式文件 */ .card { padding: 20px; background: #fff; border-radius: 8px; margin: 10px; } .card-hover { background: #f0f0f0; }text作用专门用来显示文字的组件对应网页里的span。它是行内元素多个 text 会并排显示同时它也是小程序里唯一支持长按选中、复制文字的组件要做可复制的手机号、订单号等内容必须用它包裹。常用属性selectable布尔值设置文字是否支持长按选中复制space控制空格显示规则常用emsp一个汉字宽度的空格decode布尔值是否解析转义字符比如nbsp;空格、lt;小于号text普通文字无法长按复制/text text selectable13800138000长按可复制手机号/textbutton作用点击触发操作的按钮比网页按钮功能更强自带很多微信原生能力比如一键分享、获取手机号、唤起支付等是交互操作的核心组件。常用属性type按钮内置样式primary绿色主按钮/default默认白底/warn红色警告size按钮尺寸default正常大小/mini小尺寸plain布尔值是否镂空只有边框没有背景色disabled布尔值是否禁用按钮open-type微信开放能力常用值share点击后直接触发 “转发给好友”getPhoneNumber快速获取用户微信绑定的手机号chooseAvatar唤起微信头像选择器!-- 主操作按钮 -- button typeprimary bindtaphandleSubmit确认提交/button !-- 小尺寸镂空按钮 -- button sizemini plain取消/button !-- 自带分享能力的按钮 -- button open-typeshare分享给好友/buttoninput作用让用户输入单行文字的输入框比如填账号、手机号、搜索关键词都用它只能输入一行内容内容太长会自动横向滚动。常用属性value输入框里的默认 / 当前内容placeholder输入框为空时的灰色提示文字type弹出的键盘类型text普通文本/number纯数字键盘/digit带小数点的数字键盘/idcard身份证键盘password布尔值是否开启密码模式内容显示为黑点maxlength最大可输入字数默认 140bindinput输入内容变化时触发的函数用来实时获取输入值!-- 手机号输入框 -- input typenumber placeholder请输入11位手机号 maxlength11 bindinputonPhoneInput / !-- 密码输入框 -- input password placeholder请输入登录密码 /picker作用从页面底部弹出的滚动选择器不用自己写弹窗组件。支持选自定义选项、日期、时间、省市区地址是做表单选择最省事的组件。常用属性mode选择器类型决定你能选什么selector普通单列选择自己定义选项date日期选择器time时间选择器region省市区三级联动地址选择range普通选择模式下选项内容的数组value当前选中项的下标bindchange选中内容改变时触发的函数示例代码!-- 职业选择普通单列选择器 -- picker modeselector range{{jobList}} bindchangeonJobChange view classpicker-text当前职业{{selectedJob}}/view /picker !-- 日期选择器 -- picker modedate bindchangeonDateChange view classpicker-text出生日期{{selectedDate}}/view /picker对于JS页面代码Page({ data: { jobList: [程序员, 设计师, 产品经理, 运营], selectedJob: 请选择职业, selectedDate: 请选择日期 }, // 职业选择变化 onJobChange(e) { const index e.detail.value this.setData({ selectedJob: this.data.jobList[index] }) }, // 日期选择变化 onDateChange(e) { this.setData({ selectedDate: e.detail.value }) } })效果图form作用表单的 “收纳盒”把 input、picker、radio 这些输入组件都包起来。点击提交按钮时可以一次性拿到里面所有组件的填写值不用一个个单独去获取。常用属性bindsubmit表单提交时触发的函数函数里能直接拿到所有表单数据bindreset表单重置时触发的函数一键清空所有填写内容注意表单里的输入组件必须加name属性form 才能识别并收集它的值。示例代码form bindsubmitonFormSubmit bindresetonFormReset view classform-item text用户名/text input nameusername placeholder请输入用户名 / /view view classform-item text手机号/text input namephone typenumber placeholder请输入手机号 / /view !-- 提交按钮必须加 form-typesubmit -- button form-typesubmit typeprimary提交表单/button button form-typereset重置内容/button /form对应JS代码Page({ onFormSubmit(e) { // e.detail.value 就是收集到的所有表单数据 console.log(表单提交内容, e.detail.value) // 输出格式{ username: 张三, phone: 138xxxx } } })radio作用单选按钮同一组里只能选一个比如性别选择、单选项投票。必须搭配radio-group单选组一起使用同一个组内的 radio 才会互斥。常用属性value当前单选框对应的值选中后会把这个值传给外层的 radio-groupchecked布尔值设置默认是否选中disabled布尔值是否禁用该选项radio-group核心事件bindchange选中项变化时触发返回当前选中的值。radio-group bindchangeonGenderChange radio valuemale checked男/radio radio valuefemale女/radio radio valuesecret disabled保密不可选/radio /radio-group对应JS代码Page({ onGenderChange(e) { console.log(选中的性别, e.detail.value) } })teatarea作用多行文本输入框适合输入长内容比如留言、备注、个人简介。内容会自动换行支持设置高度自动跟随内容增长。常用属性value输入框的默认 / 当前内容placeholder占位提示文字maxlength最大输入字数默认 140设为-1则不限制字数auto-height布尔值是否自动增高内容变多时输入框自动变高bindinput输入内容变化时触发bindblur输入框失去焦点时触发示例代码textarea placeholder请输入你的留言内容... auto-height maxlength200 bindinputonMessageInput styleborder: 1px solid #eee; padding: 10px; margin: 10px; /以下是view、text、button、input、texteare效果展示效果图源码!-- 带点击效果的卡片容器 -- view stylemargin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;view效果展示/view view classcard hover-classcard-hover text这是一个卡片内容/text /view view----------------------------------------------------/view view stylemargin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;text效果展示/view text普通文字无法长按复制/text text selectable13800138000长按可复制手机号/text view----------------------------------------------------/view view stylemargin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;button效果展示/view !-- 主操作按钮 -- button typeprimary bindtaphandleSubmit确认提交/button !-- 小尺寸镂空按钮 -- button sizemini plain取消/button !-- 自带分享能力的按钮 -- button open-typeshare分享给好友/button view----------------------------------------------------/view view stylemargin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;input效果展示/view !-- 手机号输入框 -- input typenumber placeholder请输入11位手机号 maxlength11 bindinputonPhoneInput / !-- 密码输入框 -- input password placeholder请输入登录密码 / view----------------------------------------------------/view !-- 日期选择器 -- picker modedate bindchangeonDateChange view classpicker-text出生日期{{selectedDate}}/view /picker view----------------------------------------------------/view view stylemargin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;texteare效果展示/view textarea placeholder请输入你的留言内容... auto-height maxlength200 bindinputonMessageInput styleborder: 1px solid #eee; padding: 10px; margin: 10px; / view----------------------------------------------------/view其他标签参考https://developers.weixin.qq.com/miniprogram/dev/component/editor.html-----------------------------------------------------累了今天先写到这20260822~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~