开发一个微信应用号，你须要提早到官方网站下载开发者工具
发表时间：2023-10-27 07:08:38
文章来源：炫佑科技
浏览次数：130
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
11
12
13
14
//日志.js
var util = ('../../utils/util.js')
页（{
数据： {
日志：[]
},
：（）{
这。（{
日志： (wx.('日志') || []).map( (log) {
util.(新日期(日志))
})
})
})
运行结果如下：
4. 手机预览
开发工具左侧菜单栏选择“项目”，点击“预览”，扫描二维码即可在微信客户端体验。
目前预览和上传功能尚未开放手机微信小程序开发，需要等待微信下次官方更新。
可以看到，微信官方提供的开发指南还是很简单，很多细节、代码和功能都没有清晰地展示出来，所以是时候让博卡君展现自己的实力了！ 开发教程正式开始！**章：准备工作
做好准备很重要。 开发微信应用账号需要提前到微信官网（）下载开发工具。
1.下载*新的微信开发工具。 打开后你会看到这样的界面：
2、点击“新建web+”项目，出现如下界面：
3、请关注本页面各项内容——
注意：再次强调，如果你和团队成员共同开发这个项目，建议大家使用相同的目录名和本地目录，以保证协作开发的统一。 如果您之前已经有过项目，导入过程与上面类似，不再赘述。
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”文件来配置这五个菜单。 在代码行中找到“”“”：
您可以根据实际项目需要进行更改，包括：
注意：微信的底部菜单*多支持五列（五个图标），因此在设计微信应用的 UI 和基本结构时，必须提前考虑菜单栏的布局。
5、根据上面的代码规则，我准备了示例项目的基本结构供大家参考：
6、“Json”文件配置完成后，“”的基本结构如上图所示。 不需要的子集可以暂时删除，不足的子集需要自动创建。 删除子集时，记得检查“app.json”中的相关内容是否也被删除。
注意：我个人建议在创建“wxml”文件时，也一起创建对应的“js”和“wxss”文件，因为微信应用号的配置特点是，当解析“wxml”文件时，它会同时在同一目录下找到“js”和“wxss”文件名相同的文件，因此需要及时在“app.json”中预先配置“js”文件。
编写“wxml”时，按照微信应用号提供的接口编码即可。 大多数都是以前的“div”，但现在我们只用“view”。 当需要使用其他子集时，可以根据微信提供的接口进行选择。
使用“class”名称来设置样式，“id”名称在这里基本没有用处。 主要操作数据，而不是“dom”。
7、以上是示例项目主页的“wxml”编码。 从图中可以看出，实现一个页面的代码量非常少。
8.“Wxss”文件是导入的样式文件。 您也可以直接在其中编写样式。 该示例使用导入的样式文件：
9、修改代码并刷新后，可以看到没有背景的“view”标签直接变成了粉色。
注意：修改“wxml”和“wxss”下的内容后，可以直接用F5刷新查看效果。 如果修改了“js”，需要点击重启按钮才能看到效果。
10.另外，公共样式可以直接在“app.wxss”中引用。
11、“app.json”文件的“page”中需要预先配置“Js”文件。 为了理清项目结构开发一个微信应用号，你须要提早到官方网站下载开发者工具，我在示例项目中“index”主页的同级目录下创建了另外四个页面文件，如下：
通过以上步骤，案例中的五个底部菜单就全部配置完成了。
