前言&概述

概述

       微信开发者工具（以下简称开发者工具）是微信官方推出的一站式开发调试工具，专为小程序、小游戏、公众号网页等微信生态产品打造，集成代码编辑、真机模拟、调试排错、性能检测与版本发布能力，助力开发者高效完成从开发到上线的全流程工作。

        开发者工具是微信小程序或小游戏的原生开发工具。语法，或者说代码的具体长相在思想上个人感觉是结合了VUE与传统HTML、CSS、JavaScript的，一个页面的基本组成是WXML、WXSS、JS、JSON文件构成，后面会讲。

        开发者工具对于没有开发经验，只想专注于微信平台快速做出一款符合自己需求的小程序是非常友好的，学习成本非常低廉。一是因其原生性，在开发-发布-上线都提供了非常简洁的方法，二是其提供了一种 云开发 的方式作为后端，省去了后端繁琐的开发与部署流程，可以以极低的代码和极低的学习成本快速上手。

微信开发者工具

微信开发者工具安装

下载链接：建议下载稳定版本

微信开发者文档     

微信开发者工具提供了一个相对完善的文档，这个文档是必不可少的。文档可以以问题导向式的去学习。遇到问题了，再去查询文档相关内容。

微信开发者文档：指南封面 | 微信开放文档

创建项目

微信公众平台&创建小程序账号

        微信公众平台是微信官方推出的内容运营与服务承载平台，支持个人、企业等各类主体运营订阅号、服务号等账号，提供内容发布、用户管理、互动触达与服务接口接入能力，是连接用户、落地轻量化服务的核心载体。

        简单粗略的理解就是：微信开发者工具是编写小程序代码、测试小程序代码功能的编辑器。微信公众平台的作用是创建与管理小程序账号。

在编写代码前，要在微信公众平台创建一个小程序账号。

微信公众平台地址：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_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 是微信小程序的全局总配置文件，相当于整个小程序的“系统总设置面板”。它统一管控所有页面的注册、顶部导航栏样式、底部切换菜单、下拉刷新开关等全局规则，配置默认对所有页面生效，是每个小程序项目必不可少的核心文件。

核心配置

1. pages：页面清单 小程序的“页面花名册”。你创建的每一个页面，都必须在这里登记文件路径，否则小程序找不到、打不开这个页面。数组里的第一条路径，就是小程序启动后默认显示的首页。
2. window：窗口外观 管小程序顶部导航栏、页面背景、下拉刷新样式的“外观设置”。比如改顶部标题文字、导航栏颜色、开启下拉刷新等都在这里设置。
3. 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 class="card" hover-class="card-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：布尔值，是否解析转义字符（比如   空格、< 小于号）

<text>普通文字，无法长按复制</text>
<text selectable>13800138000（长按可复制手机号）</text>

<button>

作用   点击触发操作的按钮，比网页按钮功能更强，自带很多微信原生能力（比如一键分享、获取手机号、唤起支付等），是交互操作的核心组件。

常用属性

• type：按钮内置样式，primary（绿色主按钮）/ default（默认白底）/ warn（红色警告）
• size：按钮尺寸，default（正常大小）/ mini（小尺寸）
• plain：布尔值，是否镂空（只有边框，没有背景色）
• disabled：布尔值，是否禁用按钮
• open-type：微信开放能力，常用值：
  • share：点击后直接触发 “转发给好友”
  • getPhoneNumber：快速获取用户微信绑定的手机号
  • chooseAvatar：唤起微信头像选择器

<!-- 主操作按钮 -->
<button type="primary" bindtap="handleSubmit">确认提交</button>

<!-- 小尺寸镂空按钮 -->
<button size="mini" plain>取消</button>

<!-- 自带分享能力的按钮 -->
<button open-type="share">分享给好友</button>

<input>

作用   让用户输入单行文字的输入框，比如填账号、手机号、搜索关键词都用它，只能输入一行内容，内容太长会自动横向滚动。

常用属性

• value：输入框里的默认 / 当前内容
• placeholder：输入框为空时的灰色提示文字
• type：弹出的键盘类型，text（普通文本）/ number（纯数字键盘）/ digit（带小数点的数字键盘）/ idcard（身份证键盘）
• password：布尔值，是否开启密码模式（内容显示为黑点）
• maxlength：最大可输入字数，默认 140
• bindinput：输入内容变化时触发的函数，用来实时获取输入值

<!-- 手机号输入框 -->
<input 
  type="number" 
  placeholder="请输入11位手机号" 
  maxlength="11"
  bindinput="onPhoneInput"
/>

<!-- 密码输入框 -->
<input 
  password 
  placeholder="请输入登录密码" 
/>

<picker>

作用  从页面底部弹出的滚动选择器，不用自己写弹窗组件。支持选自定义选项、日期、时间、省市区地址，是做表单选择最省事的组件。

常用属性

• mode：选择器类型，决定你能选什么：
  • selector：普通单列选择（自己定义选项）
  • date：日期选择器
  • time：时间选择器
  • region：省市区三级联动地址选择
• range：普通选择模式下，选项内容的数组
• value：当前选中项的下标
• bindchange：选中内容改变时触发的函数

示例代码

<!-- 职业选择（普通单列选择器） -->
<picker mode="selector" range="{{jobList}}" bindchange="onJobChange">
  <view class="picker-text">当前职业：{{selectedJob}}</view>
</picker>

<!-- 日期选择器 -->
<picker mode="date" bindchange="onDateChange">
  <view class="picker-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 bindsubmit="onFormSubmit" bindreset="onFormReset">
  <view class="form-item">
    <text>用户名：</text>
    <input name="username" placeholder="请输入用户名" />
  </view>
  
  <view class="form-item">
    <text>手机号：</text>
    <input name="phone" type="number" placeholder="请输入手机号" />
  </view>

  <!-- 提交按钮必须加 form-type="submit" -->
  <button form-type="submit" type="primary">提交表单</button>
  <button form-type="reset">重置内容</button>
</form>

对应JS代码

Page({
  onFormSubmit(e) {
    // e.detail.value 就是收集到的所有表单数据
    console.log('表单提交内容：', e.detail.value)
    // 输出格式：{ username: '张三', phone: '138xxxx' }
  }
})

<radio>

作用   单选按钮，同一组里只能选一个，比如性别选择、单选项投票。必须搭配 radio-group（单选组）一起使用，同一个组内的 radio 才会互斥。

常用属性

• value：当前单选框对应的值，选中后会把这个值传给外层的 radio-group
• checked：布尔值，设置默认是否选中
• disabled：布尔值，是否禁用该选项

radio-group 核心事件：bindchange，选中项变化时触发，返回当前选中的值。

<radio-group bindchange="onGenderChange">
  <radio value="male" checked>男</radio>
  <radio value="female">女</radio>
  <radio value="secret" 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
  maxlength="200"
  bindinput="onMessageInput"
  style="border: 1px solid #eee; padding: 10px; margin: 10px;"
/>

以下是view、text、button、input、texteare效果展示

效果图源码

<!-- 带点击效果的卡片容器 -->
<view style="margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">view效果展示</view>

<view class="card" hover-class="card-hover">
  <text>这是一个卡片内容</text>
</view>
<view>----------------------------------------------------</view>

<view style="margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">text效果展示</view>

<text>普通文字，无法长按复制</text>
<text selectable>13800138000（长按可复制手机号）</text>

<view>----------------------------------------------------</view>

<view style="margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">button效果展示</view>

<!-- 主操作按钮 -->
<button type="primary" bindtap="handleSubmit">确认提交</button>

<!-- 小尺寸镂空按钮 -->
<button size="mini" plain>取消</button>

<!-- 自带分享能力的按钮 -->
<button open-type="share">分享给好友</button>

<view>----------------------------------------------------</view>

<view style="margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">input效果展示</view>

<!-- 手机号输入框 -->
<input 
  type="number" 
  placeholder="请输入11位手机号" 
  maxlength="11"
  bindinput="onPhoneInput"
/>

<!-- 密码输入框 -->
<input 
  password 
  placeholder="请输入登录密码" 
/>

<view>----------------------------------------------------</view>


<!-- 日期选择器 -->
<picker mode="date" bindchange="onDateChange">
  <view class="picker-text">出生日期：{{selectedDate}}</view>
</picker>

<view>----------------------------------------------------</view>

<view style="margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">texteare效果展示</view>

<textarea 
  placeholder="请输入你的留言内容..." 
  auto-height
  maxlength="200"
  bindinput="onMessageInput"
  style="border: 1px solid #eee; padding: 10px; margin: 10px;"
/>

<view>----------------------------------------------------</view>

其他标签

参考：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

-----------------------------------------------------

累了今天先写到这20260822~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~