小程序入门（2）-- 开发工具的使用

苯宝宝
752 阅读8分钟

新建项目

image.png

新建项目

  1. 点击上图“+”新建一个空白项目

需要选择一个空目录，或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时，可以选择是否在该目录下生成一个简单的项目。

image.png

  • 项目名称：项目的名称，显示在开发者工具顶端，也可通过project.config.json进行配置。

image.png

  • 目录：项目在本地的创建路径。

  • AppID：在后台管理界面查找。

  1. 新建项目的目录 image.png

  • pages：主包的主页面，每个页面都有四个文件。

    • wxml：页面元素
    • wxss：页面样式
    • json：页面配置信息
    • js：数据交互逻辑

  • utils：工具文件，里面包含工具函数

    utils.js 中使用CommonJS进行模块的导出

    导出模块：

    module.exports = {
  formatTime,formatNumber
}

    引入模块：

    const util = require('../../utils/util.js')

    使用模块：

    date: util.formatTime(new Date(log))

    CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

    在一个node执行一个文件时，会给这个文件内生成一个exports和module对象，而module又有一个exports属性。他们之间的关系如下图，都指向一块{}内存区域。

    💡 `exports = module.exports = {};`

  • app.js：注册微信小程序应用

  • app.wxss：全局样式

  • app.json：微信小程序的全局配置

  • sitemap.json：配置小程序的索引是否被爬虫找到

  • project.config.json：小程序开发工具配置文件

  • images：存放所有图片

导入项目

点击上图“导入”按钮，将项目导入到开发者工具中，点击新建按钮。导入项目会自动填入项目名称、目录和AppId。

image.png

管理项目

点击上图“管理”按钮，可删除目前已有的项目

打开已有项目

点击已有项目，可打开已有项目

image.png

小程序开发工具

小程序开发工具界面分为五个部分：菜单栏、工具栏、模拟器、编辑区、调试器

image.png

菜单栏

  • 微信web开发者工具：关于开发者工具介绍、查看许可协议、切换账号、更换开发模式、下载微信客户端、快速体验开发版、版本回退、检查更新、调试、进程管理、退出开发者工具等。
  • 项目：新建项目、导入项目、打开最近项目、查看所有项目、关闭当前项目、新建代码片段、导入代码片段。
  • 文件：新建文件、新建窗口、保存、自动保存、关闭文件。
  • 编辑：可以查看编辑相关的操作和常用快捷键。
  • 工具：编译、刷新、预览、上传、清除缓存。
  • 界面：设置主界面窗口模块的显示与隐藏。
  • 设置：通用设置、外观设置、快捷键设置、编辑设置、代理设置、拓展设置。

工具栏

  • 点击用户头像可以打开个人中心，在这里可以便捷的切换用户和查看开发者工具收到的信息。

  • 用户头像右侧是控制主界面模块显示/隐藏的按钮，主界面模块有五个：模拟器、编辑器、调试器、可视化、云开发，至少需要有一个模块显示。

  • 工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览，编译就是执行的意思。预览分为二维码预览和自动预览。

    • 二维码预览：手机扫描二维码进行预览

    • 自动预览：自动在手机上弹出小程序进行预览

image.png

  • 真机调试：分为二维码真机调试和自动真机调试，同上，微信扫描二维码打开小程序，开发者工具上可实时查看，方便处理兼容性问题。

  • 清缓存：可以快捷清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。

  • 开发辅助功能区域：可以上传代码、版本管理、查看项目详情等。

    • 上传

    image.png

    • 版本管理：界面化的代码管理工具

    • 查看项目详情

      • 基本信息：包括图标、AppID、第三方平台名（只有第三方平台的开发小程序才会显示）、目录信息、上次提交代码的时间以及代码包大小。

      • 本地设置

        • 将JS编译成ES5：开启此选项，开发者工具将使用 babel 将 JS 代码编译成 ES5 标准的代码，以满足运行在低版本手机系统的要求。
        • 使用npm模块：从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。参见小程序开发文档—工具—开发辅助—npm支持。
        • 上传代码时样式自动补全：在预览、真机调试、上传时使用 autoprefixer 对 wxss 文件中的样式类自动补全前缀，以对不同的浏览器内核的真机做样式兼容性适配 autoprefixer 的 browsers 参数为 [ 'iOS >= 8', 'Chrome >= 37', ]，勾选此项会增大代码包体积。
        • 上传代码时自动压缩样式：在预览、真机调试、上传时使用 cssnano 对 wxss 文件进行压缩。
        • 上传代码时自动压缩混淆：在预览、真机调试、上传时使用 UglifyJS 或者 Terser 对 js 文件进行压缩混淆。
        • 上传时进行代码保护：开启此选项，开发者工具会尝试对项目代码进行保护，主要是对文件进行扁平化处理并替换 require 引用的文件名。
        • 自动运行体验评分
        • 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书：正式发布的小程序的网络请求是需要校验网络请求（wx.request, wx.connectSocket、wx.downloadFile, wx.uploadFile）、<web-view /> 组件允许加载的业务域名是否已经配置成为合法域名，以及域名的 TLS 版本、HTTPS 证书有效性，其中服务器域名和 <web-view /> 业务域名可以在 mp 管理后台 开发-开发管理-开发设置 中进行配置。在开发过程中可以开启此选项，开发工具将不会校验安全域名、<web-view /> 业务域名，以及 TLS 版本、HTTPS 证书，帮助在开发过程中更方便的完成调试工作。
        • 启用数据预拉取**：**开启后模拟器每次编译都会先同步预拉取数据，预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度 。参见小程序开发文档—基础能力—数据预拉取。
        • 启用代码自动热重载**：**开启后，修改代码文件，模拟器可以在不刷新的情况下生效变更。 进入热重载模式后，会在模拟器区域有个显示的提示，该功能在 2.12.0 及以上的基础库生效。除了在这个地方可以设置，在模拟器模块也可以设置。
        • 启用自定义处理命令**：**开启后，工具在编译前、预览前、上传前这三个时机调用开发者自定义的命令， 开发者可以去对代码进行一些预处理或者上报的逻辑。

      • 项目配置

        • 域名信息：将显示小程序的安全域名信息，合法域名可在 mp 管理后台 开发-开发管理-开发设置 中进行设置。
        • 高级设置：将显示小程序代码包允许的大小等其他配置信息。

模拟器

  • 机型选择
  • 热重载：设置自动编译
  • 模拟操作
  • 页面信息：在模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数，可快捷复制当前页面的路径。
  • 预览：点击模拟器底部的预览按钮，可进行预览。
  • 生成骨架屏
  • 生成darkmode适配

编辑区

  • 新建：在文件夹上点击右键，可新建文件。叮叮叮

    • 新建文件

    • 新建Page：新建页面有两种方式

      1. 在目录树上右键，选择新建 Page，将自动生成页面所需要的 wxml、wxss、js、json，新建的文件就放在当前目录树下，所以需要先建一个空白文件夹，再新建Page
      2. 在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件

    • 新建Component:在目录树上右键，选择新建 Page，将自动生成页面所需要的 wxml、wxss、js、json，新建的文件就放在当前目录树下，所以需要先建一个空白文件夹，再新建Page

    新建Page和新建Component的区别：APP>Page>Component

  • 复制路径

  • 复制相对路径

  • 重命名

  • 删除

  • 查找：command+shift+F

  • 替换：command+shift+H

  • 自动补全：支持js、json、wxml文件的自动补全

  • git状态展示

avatar
文章
阅读
粉丝