微信开发入门（二）微信小程序开发工具使用与设计规范（vx小程序开发）

您可以从这篇文章中了解到:

如何用小程序开发工具编写一个Hello World

微信小程序设计规范

微信小程序项目结构

““微信小程序开发工具使用

下载并安装小程序下载:微信网络开发者工具

下载:官方演示源代码

本系列教程使用mac版开发者工具。

安装完成后，打开微信web开发者工具。

1.扫码登录并绑定个人微信。

2.扫描代码并登录后，创建或导入一个现有项目（这里使用官方演示源快速入门）。

3.创建一个新项目并导入您刚刚下载的quickstart项目由于只有收到内部测试邀请的企业或个人才有AppID，请记住选择“无AppID”。

4.新的构建是成功的，看看开发工具-4的真实面貌-它是否与chrome开发人员模型非常相似？。。

5.开发工具介绍【调试】调试模块主要包括选择调试模型、选择网络类型、控制台输出、网络资源、视图定位、断点等。

6.开发工具介绍【编辑】左边红框是项目结构目录，右边是代码编辑区。每次修改保存后，点击“编译”即可浏览修改后的页面效果。

7.创建新文件夹或文件将鼠标放在文件夹上，“+”图标将出现在右侧。单击添加文件夹或文件。

》《小程序设计规范》（节选自微信小程序设计指南）

友好礼貌在微信上使用小程序服务时，为了避免用户的注意力受到周围复杂环境的干扰，小程序设计应注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务并引导用户以友好的方式进行操作。

重点每个页面都应该有一个明确的重点，以便用户每次进入新页面时都能快速了解页面内容。在确定焦点的前提下，我们应该尽量避免页面上的其他干扰项影响用户的决策和操作。

清晰度一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告诉用户他在哪里，可以去哪里，从而确保用户可以轻松地穿梭在页面中而不会迷路，从而为用户提供安全愉快的体验。

““微信小程序项目结构

文件结构

框架程序包括一个描述整个程序的应用程序和多个描述各自页面的页面。框架程序的主要部分由三个文件组成，它们必须放在项目的根目录中。

该文件作为app.js小程序（全局）逻辑app.json小程序（全局）的公共设置，并确定app.wxss小程序的页面文件、窗口表示、网络超时、多选项卡和其他公共（全局）样式表的路径。

框架页面由四个文件组成:

文件类型作用于js页面逻辑wxml的页面结构，一套用于框架设计的标记语言，结合基本组件和事件系统，可以构建页面结构。Wxss是一种用于描述WXML组件样式的样式语言。用于确定WXML组件的显示方式。Json页面按照“约定优于配置”的原则进行配置。一个框架页面至少包含三种文件类型，即js、wxml和wxss，文件名相同，如主页上的index.js、index.wxml和index.wxss，它们应放在同一文件夹中。注册页面时，不需要为文件名写文件后缀，因为框架会自动找到四个带路径的文件。JSON。JS。WXML和。集成WXSS。

》》》》》

以上从开发工具、设计规范、项目目录三个方面介绍了微信小程序开发的准备工作，后续将陆续更新。同时，通过导入官方演示，显示Hello World小程序页面。一般来说，小程序开发工具精简，项目结构清晰，文档齐全，入门门槛不高；微信团队已经打包了不同的操作系统和不同的模型，开发人员只需要调用相应的API即可。当然，如果你想了解整个框架，你需要研究Redux的工作原理、状态模式、数据表的双向绑定、JS调用Android/IOS原生UI组件等等。

如果你有任何问题，也可以关注我的微信官方账号“『ITNotes』”一起交流学习。

【相关建议】

1.下载微信微信官方账号平台源代码。

2.微信投票源代码

3.微信货拉拉外卖2.2.4解密微信魔方开源版源代码。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：微信开发入门（二）微信小程序开发工具使用与设计规范（vx小程序开发） https://zhujicankao.com/113873.html