微信官方开发者工具开发教程，你需要提前到微信的官方网站
发表时间：2023-09-11 06:11:17
文章来源：炫佑科技
浏览次数：110
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
运行结果如下：
5. 手机预览
开发工具左侧菜单栏选择“项目”，点击“预览”，扫描二维码即可在微信客户端体验。
目前预览和上传功能尚未开放，需要等待微信下次官方更新。
可以看到，微信官方提供的开发指南非常简单，很多细节、代码和功能都没有清晰地展示出来。 以下是开发教程。
开发教程
1. 准备工作
准备很重要。 开发微信应用账号需要提前到微信官网（）下载开发工具。
（1）下载*新的微信开发工具。 打开后你会看到这样的界面：
(2) 点击“新建web+”项目，出现如下界面：
(3) 请注意本页面的各项内容——
AppID：按照官方说明填写。
：项目*外层文件夹的名称。 如果将其命名为“ABC”，则后续所有项目内容都将保存在“/ABC/...”目录中。
本地开发目录：项目本地存放的目录。
注意：再次强调，如果您与团队成员一起开发此项目，建议您使用相同的目录名和本地目录，以保证协作开发的统一。 如果您之前有过项目，导入过程与上面类似，不再赘述。
（4）所有准备工作完成后，点击“新建项目”按钮，在弹出的框中点击“确定”。
（5）如上图所示，此时微信开发工具已经自动为您构建了一个初始演示项目，其中包含了微信应用项目所需的基本内容和框架结构。 点击项目名称（图中的“卡片”）进入项目，可以看到整个项目的基本结构：
2. 项目结构
微信目前拥有非常庞大的用户群。 微信推出公众号后，大家都可以看到它的受欢迎程度，这也促进了H5的快速发展。 随着公众号业务的需求越来越复杂，应用号的到来恰逢其时。
文档读一两遍就可以发现，它为开发提供的方式也在发生全面的变化，从操作DOM到操作数据。 基于微信提供的桥接工具，很多h5公众号都非常受欢迎。 实现起来比较困难的功能有点类似于开发。
与开发方式不同：微信的开放接口更加严谨，结构必须使用它为我们提供的组件。 这里不能使用外部框架和插件，让开发完全脱离操作DOM，开发思维发生了很大的变化。 。
工欲善其事，必先利其器。 了解其核心功能，首先了解其整个运行流程非常重要。
生命周期：
内部index.js：
您可以在开发工具上看到这一点：
在首页可以看到顺序是App-->App Show-->-->-->。
首先是整个app的启动和显示。 可以在app.js中配置app的启动，然后是各个页面的加载、显示等。
可以想象，这里可以处理很多事情，比如装箱子等等。
路由：
路由一直是项目开发的核心点。 其实微信这里对路由的介绍很少。 可以看到微信在路由方面封装得很好，还提供了三种跳转方式。
wx.()：保留当前页面并跳转到应用程序中的某个页面。 使用 wx. 返回原始页面。
wx.()：关闭当前页面并跳转到应用程序内的某个页面。
wx.()：关闭当前页面，返回上一页。
这三个基本就够了。 微信在路由方面封装得很好。 开发根本不需要配置路由。 很多框架往往都有非常繁琐的路由配置。
成分：
这次微信在组件提供方面也非常全面，基本满足了项目需求，所以开发速度很快。 开发前可以仔细浏览几次，开发效率会非常好。
其他：
任何外部的框架和插件基本上都无法使用，甚至原生的js插件也很难使用，因为以前我们的js插件基本上都是以操作dom的形式存在，还有微信应用账号的结构这次不允许操作。 任何DOM，甚至我们过去习惯使用的动态设置的rem.js，都不支持。
这次微信也提供了微信小程序制作软件，可以直接用它来聊天。 还有很大的开发空间。
与公众账号相比，我们发现应用账号的开发是组件化、结构化、多元化的。 新世界总是充满惊喜，还有更多彩蛋等待着大家去发现。
接下来让我们从一些简单的代码开始！
1. 找到项目文件夹并将其导入到编辑器中。 在这里，我使用文本编辑器。 您可以根据自己的开发习惯选择自己喜欢的编辑器。
2.接下来，您需要根据您的项目内容调整项目结构。 示例项目中，“”目录主要包含“”页面以及应用程序的一些配置文件。
3、示例工程的“”是五个菜单按钮：
4.找到“app.json”文件来配置这五个菜单。 在代码行中找到“”：
您可以根据实际项目需要进行更改，包括：
Color是底部字体颜色、切换到页面时的高亮颜色、切换菜单上方线条的颜色、底部菜单栏的背景颜色。 文字描述比较抽象。 建议您一一调试，查看效果，加深印象。
“列表”下的代码顺序必须按顺序排列，不能随意更改。
“”后面的文件名中，隐藏了.wxml后缀。 这是微信开发代码人性化的一面——帮助你节省编写代码的时间，而且不需要频繁声明文件后缀。
“”为未显示页面的图标路径。 这两个路径可以直接网络图标。
“”是当前显示页面上高亮图标的路径。 它可以被删除。 删除后，图标默认显示为“”。
“文本”是页面标题，也可以删除。 删除后会显示图标。 如果只删除其中一个，该位置就会被占用。
5、根据上面的代码规则，我准备了示例项目的基本结构供大家参考：
6、“Json”文件配置完成后，“”的基本结构如上图所示。 不需要的子集可以暂时删除，缺失的子集需要您主动创建。 删除子集时，记得检查app.json中的相关内容是否也被删除。
注意：我个人建议在新建“wxml”文件时，也一起创建对应的“js”和“wxss”文件，因为微信应用号的配置特点是，当解析一个“wxml”文件时，就会在同一个目录下找到“js”和“wxss”同名文件，所以需要及时在“app.json”中预先配置“js”文件。
编写“wxml”时，按照微信应用号提供的接口编码即可。 大多数都是以前的“div”，但我们现在用的是“view”。 当需要使用其他子集时，可以根据微信提供的接口进行选择。
使用类名来设置样式。 “id”名称在这里基本上没有用。 主要操作数据，而不是“dom”。
7、以上是示例项目主页的“wxml”编码。 从图中可以看出，实现一个页面的代码量非常少。
8.“Wxss”文件是导入的样式文件。 您也可以直接在其中编写样式。 该示例使用导入的样式文件：
9、修改代码并刷新后微信官方开发者工具开发教程，你需要提前到微信的官方网站，可以看到没有背景的“view”标签直接变成了粉色。
注意：修改“wxml”和“wxss”下的内容后，可以直接用F5刷新查看效果。 如果修改了“js”，需要点击重启按钮才能看到效果。
10.另外，公共样式可以直接在“app.wxss”中引用。
11、“app.json”文件的“page”中需要预先配置“Js”文件。 为了理清项目结构，我在示例项目中与索引主页同级目录下创建了另外四个页面文件，如下：
经过以上步骤，机箱内的五个底部菜单就全部配置完成了。
