微信小程序开发教程-准备工作
发表时间：2023-09-19 20:12:35
文章来源：炫佑科技
浏览次数：193
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑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”文件。 为了理清项目结构，我在示例项目中与索引主页同级目录下创建了另外四个页面文件，如下：
经过以上步骤，机箱内的五个底部菜单就全部配置完成了。
好了，以上就是下载吧小编为大家带来的关于什么是微信小程序以及如何开发微信小程序的介绍了。 我希望它可以帮助你！
微信小程序示例
目前，微信小程序尚未正式上线。 在这里，小编给大家介绍一款将于1月9日与微信小程序一起上线的小程序——嗨图！ 您可以直接在这个微信小程序上DIY自己的照片。 我们先来看看HiPi的具体功能吧！
微信小程序嗨图功能
1.专题-DIY图片模板，点击生成并使用，分享到朋友圈。
2.分享墙——用户上传的DIY作品。
3.立即制作-您可以使用自己的图片来DIY。
4. 告诉我 - 告诉我有关产品改进和内容添加的信息。
想要体验如何制作属于自己的个性朋友圈照片的用户，只需在1月9日微信小程序上线后扫描下方二维码即可！ 还等什么，快扫描二维码体验一下，开启你的赏图之旅吧！
