微信开发者工具下载及小程序项目的创建与调试(完整图文教程)

这篇具有很好参考价值的文章主要介绍了微信开发者工具下载及小程序项目的创建与调试(完整图文教程)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

每每有工具下载相关博客必有一句话:工欲善其事,必先利其器。
承接上文,本文将介绍微信开发者工具下载及小程序项目结构与工具的详细讲解,使得更容易能够在这个平台上创造出优秀的小程序产品。

1. 微信开发者工具下载

前往开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 。
微信开发者工具是微信官方推出的一款强大的开发辅助工具。它极大地简化了微信小程序的开发流程,包括代码的编写、查看、编辑,以及小程序的预览和发布等操作。为了满足不同开发者的需求,微信开发者工具提供了三个版本,每个版本都有其特定的用途和目标用户:

  1. 稳定版(推荐)
    特点:如其名,稳定版的最大特点是稳定性高。它通过了广泛的测试,确保了在正式发布之前各项功能都能稳定运行。
  2. 预发布版
    特点:预发布版通常包含了即将推出的新特性,这些特性已经通过了内部测试,稳定性较好,但仍可能存在一些未知的问题。
  3. 开发版
    特点:开发版的更新频率最高,它主要用于快速修复已知缺陷和上线新的小特性。由于重点在于快速迭代,稳定性相对较差。

注意事项:微信开发者工具必须联网使用!

微信开发者工具network,小程序,notepad++

安装过程十分简单,省略不必要的赘述。
微信开发者工具network,小程序,notepad++

微信开发者工具network,小程序,notepad++

安装后打开微信开发者工具,使用微信扫码登录即可。
微信开发者工具network,小程序,notepad++

2. 创建小程序项目

  1. 打开微信开发者工具,左侧选择小程序,点击+号即可新建项目。
    微信开发者工具network,小程序,notepad++

  2. 弹出新页面,填写项目相关信息(建议使用空目录下创建)与申请的AppID(AppID不懂可看上一篇文章),点击确认。
    微信开发者工具network,小程序,notepad++

  3. 完成创建。
    微信开发者工具network,小程序,notepad++

  4. 视图=>外观,可把视图调整到右侧。
    微信开发者工具network,小程序,notepad++

  5. 设置=>编译器设置,可调整代码行高与间距。
    微信开发者工具network,小程序,notepad++

3.文件目录结构介绍

使用过其他框架的同学们都知道,学习新框架了解其中目录结构是必不可少的。
在微信小程序开发中,一个完整的项目架构被明确地分为两大部分:主体文件(全局文件)页面文件。这种划分有助于开发者更加系统地组织代码和资源,确保小程序的开发既高效又易于管理。

3.1 主体文件

这些文件必须被放置在项目的根目录下,以确保小程序在启动时能够正确地加载和解析它们。主体文件主要由以下三个部分组成:

  1. app.js:这是小程序的入口文件。它的主要作用是初始化小程序实例,并提供一个全局的方法和属性。在app.js中,开发者可以设置全局数据和处理全局事件,如小程序启动、前台显示、后台隐藏等。
  2. app.json:这是小程序的全局配置文件。它用于对小程序进行全局性的设置,包括窗口表现、页面路径、网络超时时间、底部 tab 等。app.json中的配置项会影响到小程序的多个方面,因此是控制小程序行为的关键文件。
  3. app.wxss:这是小程序的全局样式文件。与Web开发中的CSS文件相似,app.wxss允许开发者定义全局的样式规则,这些规则将应用于小程序内的所有页面。通过使用app.wxss,开发者可以确保小程序具有一致的视觉风格,同时也可以减少页面文件中样式的重复定义。
    注意事项:主体文件的名字必须是 app,app.js 和 app.json 文件是必须的!
    微信开发者工具network,小程序,notepad++

3.2 页面文件

页面文件 是每个页面所需的文件,小程序页面文件都存放在 pages 目录下,一个页面一个文件夹。
每个页面由四个文件构成,这些文件仅对当前页面有效,它们协同工作,描述了页面的结构、样式、逻辑和配置:

  1. js:页面逻辑文件。用于定义页面的初始数据、生命周期函数、事件处理函数等。
  2. wxml:页面结构文件。采用类似HTML的标记语言编写,描述页面的结构。
  3. wxss:页面样式文件。用于定义当前页面的专属样式,它扩展自CSS,有些许差异但基本兼容CSS。
  4. json:小页面配置文件。用于定义当前页面的一些配置信息,如页面标题、窗口背景色等。
    注意事项:js 文件和 .wxml 文件是必须存在的!
    微信开发者工具network,小程序,notepad++

3.3 公共文件

components文件夹 它用于存放小程序中的自定义组件。自定义组件是微信小程序提供的一种重要的代码复用机制,允许开发者将页面的一部分封装成独立的组件,这些组件可以在不同的页面中被重复使用。

微信开发者工具network,小程序,notepad++

3.4 渲染模式

微信小程序支持两种主要的渲染模式:Skyline渲染模式和WebView渲染模式。这两种模式各有特点和应用场景,理解它们的差异对于优化小程序性能和用户体验非常重要。

3.4.1 Skyline 渲染模式

Skyline渲染模式是微信小程序较新引入的一种渲染方式,它通过提升JS的执行效率和渲染性能来优化小程序的运行速度和流畅度。Skyline模式采用了更接近原生的渲染技术,能够实现更高效的页面渲染和更流畅的用户交互体验,也是目前初始的默认模式
主要特点:

  1. 提高了JavaScript的执行效率。
  2. 适用于对性能要求较高的小程序,如游戏或者复杂的应用。
3.4.2 WebView 渲染模式

WebView渲染模式是微信小程序最初使用的渲染方式,它基于WebView组件来渲染小程序的页面。WebView是一种浏览器内核组件,可以用来加载和显示网页内容。在这种模式下,小程序的每个页面都在一个WebView中运行,这使得开发者可以使用Web技术(HTML、CSS、JavaScript)来开发小程序。
主要特点:

  1. 依赖于WebView组件,与传统的Web开发体验相似。
  2. 兼容性好,能够较好地支持各种HTML和CSS特性,方便使用现有的Web技术栈。
    微信开发者工具network,小程序,notepad++
3.4.3 切换渲染模式

显然WebView渲染模式更适合小程序开发,我们需要把默认的Skyline模式进行切换。

第一步,左侧目录中打开app.json文件。

第二步,找到renderer rendererOptionscomponentFramework三个配置项全部去掉并刷新项目即可。
保存(刷新)项目:Ctrl+S
微信开发者工具network,小程序,notepad++

4.新建页面

4.1 第一种方法

第一步,找到主目录中的pages文件夹=>右键新建文件夹。
微信开发者工具network,小程序,notepad++

第二步,找到新建的文件夹=>右键新建page(注意:不要输入任何后缀名)。
微信开发者工具network,小程序,notepad++

第三步,创建成功。
微信开发者工具network,小程序,notepad++

4.2 第二种方法

找到主目录中app.json文件,并在page配置项中新增保存项目即可。
保存(刷新)项目:Ctrl+S
微信开发者工具network,小程序,notepad++

5.小程序基础库

小程序调试基础库是指在微信开发者工具中可以选择的微信基础库版本。微信基础库为小程序提供了运行所需的各种API和工具,包括但不限于界面渲染、数据通讯、本地存储等功能,以及基础框架和运行逻辑等。
小程序开发者可以在微信开发者工具中选择所需的微信基础库版本,作为运行和调试小程序时的运行环境。
每个小程序有自己所允许使用的基础库最低版本要求,开发者需要选择要兼容的基础库版本,从而确保小程序的功能正常运行。

5.1 调试基础库

找到右上角详情=>切换本地设置=>调整基础库版本即可。
微信开发者工具network,小程序,notepad++

在工作中如果遇到某个API无法实现,首先排查基础库是否正确。
假设工作中使用分享到朋友圈功能,根据微信开发者文档描述,最低需要从基础库 2.11.3 开始支持。
微信开发者工具network,小程序,notepad++

6.小程序调试

调试是开发过程中不可或缺的一环,对于微信小程序开发而言,微信开发者工具提供了强大的调试功能,使得开发者能够有效地检测和修正代码中的错误。

6.1 模拟器

我们能够通过模拟器实时预览自己写的页面结构效果
微信开发者工具network,小程序,notepad++

6.2 调试器

通过上方工具栏打开小程序调试器。

  1. Wxml面板允许开发者查看和调试小程序的WXML结构。它提供了一个实时的DOM树视图,开发者可以在这里检查元素的布局、绑定的数据和事件处理器。
  2. Console面板用于显示由console对象方法输出的信息,包括日志、错误、警告等。这是调试JavaScript代码中非常重要的一个工具。(System信息可右键隐藏)
  3. Network面板用于监控小程序发出的所有网络请求,包括API调用、资源加载等。
  4. AppData面板允许开发者查看和管理小程序的数据存储,包括页面数据、全局数据等。
  5. storage面板是微信小程序的一个本地存储系统,允许开发者在用户的设备上保存数据。这个功能类似于Web开发中的LocalStorage。
    微信开发者工具network,小程序,notepad++

6.3 编译

点击工具栏编译,如果以后写好页面和样式后发现模拟器没有改变,则需要重新编译。
微信开发者工具network,小程序,notepad++

6.4 预览

  1. 点击工具栏预览按钮 -> 弹出弹框 -> 点击继续预览小程序 -> 生成二维码。
    微信开发者工具network,小程序,notepad++

  2. 使用微信扫码 -> 点击右上角三个点 -> 点击开发调试 -> 开启调试。
    微信开发者工具network,小程序,notepad++

  3. 重新扫码进入 -> 点击左上角绿色vConsole按钮 -> 打开调试界面。
    微信开发者工具network,小程序,notepad++

    微信开发者工具network,小程序,notepad++

6.5 真机调试

点击工具栏真机调试按钮 -> 生成二维码。
注意:真机调试需选择扫码手机系统后再扫码
微信开发者工具network,小程序,notepad++

扫码后手机与电脑皆会弹出调试窗口,该调试窗口会互为联动。
例如电脑中调整样式、手机中发送请求双方皆有影响。
微信开发者工具network,小程序,notepad++

6.6 清缓存

因为微信开发者工具,缓存问题非常严重!!!
常常写好的代码,即使刷新和重新编译还是与预期不同。
这时可使用清缓存来按需清除。
微信开发者工具network,小程序,notepad++

总结

微信开发者工具极大简化了微信小程序的开发流程,从项目创建到代码编写、调试及发布,提供全面支持。项目结构清晰分为主体和页面文件,便于管理。支持Skyline和WebView两种渲染模式,满足不同开发需求。多样的调试工具如模拟器、真机调试等,加上可选的微信基础库版本,使得开发、测试和优化过程高效、直观。这些工具和功能共同为开发者打造了一个便捷、高效的小程序开发环境。

引用资料

  • 微信开发者文档
  • CSDN-微信小程序真机调试技巧,解决各种疑难杂症

最后

非常感谢大家抽出宝贵的时间阅读这篇关于微信小程序开发前期准备工作的文章。如果你觉得这篇文章有所启发,请不吝赐予我一个赞🌹🌹🌹,也欢迎你关注我,你的支持是我持续创作的最大动力!

这篇文章可能还有很多不足之处,因此非常欢迎诚挚的批评和建议。请随时通过私信或留言的方式与我交流,你的每一点反馈都是我成长的宝贵资源。

感谢观看,这是博主第二次写博客记录学习过程,并以此作为分享,希望能够为您解决一些困惑,也希望我们能够一起成长,共同探索微信小程序带来的无限可能。文章来源地址https://www.toymoban.com/news/detail-847806.html

到了这里,关于微信开发者工具下载及小程序项目的创建与调试(完整图文教程)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】微信Web开发者工具下载及安装

    🏆今日学习目标:微信Web开发者工具下载及安装 😃创作者:颜颜yan_ ✨个人主页:颜颜yan_的个人主页 ⏰预计时间:25分钟 🎉专栏系列:微信小程序开发 什么是微信小程序? 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者

    2024年02月09日
    浏览(67)
  • 微信小程序开发者工具基础库下载调试基础库失败的解决办法,填坑DNS问题。

    如下图: 站长工具查Ip的地址是:http://tool.zhiduopc.com/ip 查询结果如下图: 结论:res.servicewechat.com这个域名对应的ip是:125.77.176.247 首先打开文件hosts。路径通常为:C:WindowsSystem32driversetc 截图如下: 如果有C:WindowsSystem32driversetc路径但里面没有hosts文件,则新建一个。不会

    2024年02月06日
    浏览(56)
  • vue的开发者工具下载『保姆级别』

    1.先进官网 极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn) 2.搜索vue devtools,点击进去  3.下载插件  4.下载到文件下你自己的文件下:我的是下载到E盘下。  5.压缩到当前目录下  6.电脑进入拓展程序(不同的浏览器操作不同!) 谷歌浏览器如下:  Edge浏览器 :右上角

    2024年02月12日
    浏览(31)
  • 微信开发者工具安装

    目录 简介 安装过程 微信开发者工具介绍 总结: 自己打算在业余时间,学习微信小程序的开发,就先下载了微信开发者工具。下面记录一下微信小程序开发者工具安装过程。 微信开发者工具连接:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html         到此已经安装完

    2024年02月07日
    浏览(47)
  • 深入了解-微信开发者工具

    主要介绍微信开发者工具如何编译小程序代码,如何实现小程序模拟器以及如何调试小程序。 虽然在开发语言层面小程序与传统的网页差别不大:是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来描述节点的样式,但是由于

    2024年04月12日
    浏览(38)
  • 微信开发者工具使用教程

    近段时间有很多小伙伴问微信小程序怎么开发啊?开发的第一步就是安装微信web开发者工具,今天就来教你设置好开发者工具。 一、下载开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载安装好之后打开会进入这个界面,倘若开发者首次启动开发者工具

    2024年02月03日
    浏览(36)
  • 微信开发者工具实现代码加固

     node.js下载地址:下载 | Node.js 在项目代码区域右击选择生成加固配置文件  (1):单个文件代码加固 选择需要加固的文件,右击选择进行代码加固 (2):批量代码加固  直接修改 code_obfuscation_config.json 的 configs 字段,就可以实现批量代码加固   当开发者完成小程序项目开发,点

    2024年02月03日
    浏览(59)
  • HbuilderX启动 微信开发者工具

    1.  下载微信开发者工具 ( 推荐使用 稳定版 ) 2. 安装好之后打开HbuilderX编辑器,点击 文件  -  新建  -  项目 后出现如下页面, 填写项目名称,选择项目保存路径 ,然后点击右下角 创建 即可   然后在HbuilderX顶部导航栏找到 工具  -  设置   点击 左侧运行配置 ,下滑找

    2024年02月14日
    浏览(46)
  • 微信开发者工具之页面跳转

    1.声明式页面导航(跳转): 2.编程式页面导航(跳转): 3导航参数:   3.1页面传参 微信开发者工具左下角调试器可查看页面参数 3.2 onLoad接受页面参数:

    2024年02月15日
    浏览(41)
  • [微信小程序开发者工具] × #initialize

    [微信小程序开发者工具] × #initialize-error: [error] 工具的服务端口已关闭。要使用命令行调用工具,请在下方输入 y 以确认开启,或手动打开工具 - 设置 - 安全设置,将服务端口开启。 从HBuilder运行到微信小程序的时候报错 解决办法: 打开微信开发者工具,选择设置–通用设

    2024年02月11日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包