微信开发者工具的安装和使用以及小程序的创建和资源目录介绍（最全！！）

文章目录

• 一、安装开发者工具
• • 1.1. 了解微信开发者工具
  • 1.2. 下载
  • 1.3. 安装
  • 二、使用开发者工具
  • • 2.1. 扫码登录开发者工具
    • 2.2. 设置外观和代理
    • 三、创建小程序项目
    • • 3.1. 点击加号按钮
      • 3.2. 填写项目信息并选择模板
      • 3.3. 项目创建完成
      • 四、查看项目效果
      • • 4.1. 在模拟器上查看项目效果
        • 4.2. 在真机上预览项目效果
        • 五、主界面的五个部分
        • 六、小程序代码的目录结构
        • • 6.1. 了解项目的基本组成结构
          • 6.2. 小程序页面的组成部分
          • 6.3. JSON配置文件
          • • 6.3.1. app.json 文件
            • 6.3.2. project.config.json 文件
            • 6.3.3. sitemap.json文件
            • 6.3.4. 页面的.json配置文件
            • 6.4. 页面的.wxml文件
            • • 6.4.1. 什么是WXML
              • 6.4.2. WXML和HTML的区别
              • 6.5. 项目的.wxss文件
              • • 6.5.1. 什么是WXSS
                • 6.5.2. WXSS和 CSS的区别
                • 6.6. 项目的.js文件
                • 七、快速新建小程序页面
                • • 八、修改项目首页

                    一、安装开发者工具

                    1.1. 了解微信开发者工具

                    1.2. 下载

                    推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具，

                    下载页面的链接如下

                    1.3. 安装

                    一路下一步即可，推荐自定义安装目录

                    二、使用开发者工具

                    2.1. 扫码登录开发者工具

                    相关：小程序账号注册登录和AppID的获取

                    2.2. 设置外观和代理

                    三、创建小程序项目

                    3.1. 点击加号按钮

                    3.2. 填写项目信息并选择模板

                    相关：小程序账号注册登录和AppID的获取

                    3.3. 项目创建完成

                    四、查看项目效果

                    4.1. 在模拟器上查看项目效果

                    4.2. 在真机上预览项目效果

                    五、主界面的五个部分

                    六、小程序代码的目录结构

                    6.1. 了解项目的基本组成结构

                    6.2. 小程序页面的组成部分

                    小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：

                    6.3. JSON配置文件

                    6.3.1. app.json 文件

                    6.3.2. project.config.json 文件

                    6.3.3. sitemap.json文件

                    6.3.4. 页面的.json配置文件

                    6.4. 页面的.wxml文件

                    6.4.1. 什么是WXML

                    6.4.2. WXML和HTML的区别

                    6.5. 项目的.wxss文件

                    6.5.1. 什么是WXSS

                    6.5.2. WXSS和 CSS的区别

                    6.6. 项目的.js文件

                    一个项目仅仅提供界面展示是不够的，在小程序中，我们通过js文件来处理用户的操作。例如: 响应用户的点击、获取用户的位置等等。

                    七、快速新建小程序页面

                    八、修改项目首页