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

作者 : admin 本文共1037个字,预计阅读时间需要3分钟 发布时间: 2024-03-8 共3人阅读

文章目录

  • 一、安装开发者工具
    • 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)

1.3. 安装

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

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(2)

二、使用开发者工具

2.1. 扫码登录开发者工具

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

2.2. 设置外观和代理

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(3)

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(4)

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(5)

三、创建小程序项目

3.1. 点击加号按钮

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(6)

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

相关:小程序账号注册登录和AppID的获取
微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(7)

3.3. 项目创建完成

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(8)

四、查看项目效果

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

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(9)

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

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(10)

五、主界面的五个部分

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(11)

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

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

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(12)

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(13)

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

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

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(14)

6.3. JSON配置文件

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(15)

6.3.1. app.json 文件

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(16)

6.3.2. project.config.json 文件

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(17)

6.3.3. sitemap.json文件

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(18)

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(19)

6.3.4. 页面的.json配置文件

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(20)

6.4. 页面的.wxml文件

6.4.1. 什么是WXML

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(21)

6.4.2. WXML和HTML的区别

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(22)

6.5. 项目的.wxss文件

6.5.1. 什么是WXSS

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(23)

6.5.2. WXSS和 CSS的区别

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(24)

6.6. 项目的.js文件

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

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(25)

七、快速新建小程序页面

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(26)

八、修改项目首页

微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)插图(27)

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » 微信开发者工具的安装和使用以及小程序的创建和资源目录介绍(最全!!)
E-->