5-微信小程序工具使用

1、概述：

为了帮助开发者简单和高效地开发和调试微信小程序，咱们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

2、界面：

一、启动页 【1】登陆页 在登陆页，可使用微信扫码登录开发者工具，开发者工具将使用这个微信账号的信息进行小程序的开发和调试。 【2】模式选择 在登陆页，可使用微信扫码登录开发者工具，开发者工具将使用这个微信账号的信息进行小程序的开发和调试。 1.公众号网页调试。选择公众号网页调试，将直接进入公众号网页项目调试界面，在地址栏输入 URL，便可调试该网页的微信受权以及微信 JS-SDK 功能。 2.小程序调试。选择小程序调试，将进入小程序本地项目管理页，能够新建、删除本地的项目，或者选择进入已存在的本地项目。 【3】新建项目 1.须要一个小程序的 AppID；如没有 AppID，能够选择申请使用测试号。 2.登陆的微信号须要是该 AppID 的开发者； 3.须要选择一个空目录，或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时，能够选择是否在该目录下生成一个简单的项目。 【4】多开项目 1.从项目选择页打开项目，处于项目窗口时能够从菜单栏的项目 -> 查看全部项目打开项目选择页 2.从菜单栏的最近打开项目列表中打开的项目会重新窗口打开 3.新建项目 4.命令行或 HTTP 调用工具打开项目 【5】管理项目 对本地项目进行删除和批量删除 【6】主界面 开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。

二、菜单栏 【1】微信web开发者工具：切换帐号、关于、检查更新、开发者论坛、开发者文档调试、更换开发模式、退出 【2】项目：新建项目、打开最近、查看全部项目、关闭当前项目 【3】文件：新建文件、保存、保存全部、关闭文件 【4】工具：编译、刷新、编译配置、先后台切换、清楚缓存 【5】设置 三、工具栏 四、工具栏管理 五、模拟器 六、独立窗口

七、设置 【1】外观设置 【2】编辑设置 【3】代理设置 【4】通知设置

八、项目页卡 【1】项目设置 《1》ES6 转 ES5 《2》样式补全 《3》压缩代码 《4》不校验请求域名及 TLS 版本 《5》启用多核心编译 《6》域名信息 《7》腾讯云状态 【2】域名信息 【3】腾讯云状态

3、快捷键：

⌘ + B：编译项目 ⌘ + R：焦点在编辑器外，编译项目 ⌘ + Q：退出开发者工具 ⇧ + ⌘ + P：预览代码 ⇧ + ⌘ + U：上传代码

4、代码编辑：

一、文件格式 二、文件支持 提供了 5 种文件的编辑： wxml、wxss、js、json、wxs 以及图片文件的预览 三、文件操做 新建页面有两种方式： 1.在目录树上右键，选择新建 Page，将自动生成页面所须要的 wxml、wxss、js、json 2.在 app.json 的 pages 字段，添加须要新建的页面的路径，将会自动生成该页面所须要的文件 四、自动保存 五、实时预览 六、自动补全 七、Git状态展现 八、目录树 九、文件编辑 十、windows风格回车设置 十一、项目配置文件

5、小程序调试(模拟器、调试工具和小程序操做区)：

一、模拟器 二、自定义编译 三、自定义预处理：自定义预处理命令 —》 默认预处理命令 —》 编译/预览/上传 四、先后台切换 五、调试工具(七大模块): 【1】Wxml panel（用于帮助开发者开发 wxml 转化后的界面） 【2】Sources panel（用于显示当前项目的脚本文件） 【3】AppData panel（用于显示当前项目运行时小程序 AppData 具体数据） 【4】Storage panel（用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储状况） 【5】Network panel（用于观察和显示 request 和 socket 的请求状况） 【6】Console panel 《1》开发者能够在此输入和调试代码 《2》小程序的错误输出，会显示在此处 【7】Sensor panel 《1》开发者能够在这里选择模拟地理位置 《2》开发能够在这里模拟移动设备表现，用于调试重力感应 API 六、自定义数据上报 七、自动预览 八、特殊场景调试 《1》扫码接口 《2》微信支付 《3》启动使用自定义参数 《4》进入场景值 《5》普通的转发 《6》带shareTicket的转发 《7》预览使用自定义编译条件 《8》跳转小程序调试支持 《9》调试小程序是否可以正确的跳转 《10》调试被打开的小程序时候正确的接收参数 九、真机调试 《1》功能概述 《2》调试流程 《3》远程调试窗口 《4》调试器 《5》信息视图 《6》手机端展现 十、多帐号调试 《1》功能描述 《2》功能入口 《3》如何使用

6、nmp支持：

一、使用nmp包 【1】在小程序中执行命令安装 npm 包 【2】点击开发者工具中的菜单栏：工具 --> 构建 npm  【3】勾选“使用 npm 模块”选项 【4】构建完成后便可使用 npm 包

二、发布nmp包 【1】发布小程序 npm 包的约束 《1》小程序 npm 包要求根目录下必须有构建文件生成目录（默认为 miniprogram_dist 目录），此目录能够经过在 package.json 文件中新增一个 miniprogram 字段来指定。 《2》小程序 npm 包里只有构建文件生成目录会被算入小程序包的占用空间，上传小程序代码时也只会上传该目录的代码。若是小程序 npm 包有一些测试、构建相关的代码请放到构建文件生成目录外。另外也可使用.npmignore文件来避免将一些非业务代码文件发布到 npm 中。 《3》测试、构建相关的依赖请放入 devDependencies 字段中避免被一块儿打包到小程序包中。

【2】发布其余 npm 包的约束 《1》只支持纯 js 包，不支持自定义组件。 《2》必须有入口文件，即须要保证 package.json 中的 main 字段是指向一个正确的入口，若是 package.json 中没有 main 字段，则以 npm 包根目录下的 index.js 做为入口文件。 《3》测试、构建相关的依赖请放入 devDependencies 字段中避免被一块儿打包到小程序包中，这一点和小程序 npm 包的要求相同。 《4》不支持依赖 json文件、c++ addon，不支持依赖 nodejs 的内置库。 《5》使用 require 依赖的时候下列几种方式也是不容许的。 《6》小程序环境比较特殊，一些全局变量（如 window 对象）和构造器（如 Function 构造器）是没法使用的。

【3】发布流程 《1》若是尚未 npm 账号，能够到 npm 官网注册一个 npm 账号 《2》在本地登陆 npm 账号，在本地执行 《3》在已完成编写的 npm 包根目录下执行

【3】原理介绍 《1》首先 node_modules 目录不会参与编译、上传和打包中，因此小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。 《2》构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的全部文件到 miniprogram_npm 中；其余 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（相似 webpack）。 《3》寻找 npm 包的过程和 npm 的实现相似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包先后的目录状况，构建以前的结构。

7、体验评分：

一、运行环境要求 【1】下载并安装 beta 版开发者工具，下载地址。 【2】基础库须要切到 2.2.0 或以上版本。

二、使用流程 【1】打开开发者工具，在详情里切换基础库到 2.2.0 版本 【2】在调试器区域切换到 Audits 面板 【3】点击左上角”开始“按钮（见下图），而后自行操做小程序界面，运行过的页面就会被“体验评分”检测到 【4】点击“Stop"中止分析，就会看到一份分析报告，以后即可根据分析报告进行相关优化

8、Git版本管理：

一、提交工做区更改 二、查看历史 三、查看文件修改历史 四、检出和建立分支 五、拉取，推送和抓取 六、网络和认证设置 七、用户设置 八、子模块 九、初始化Git仓库

9、命令行调用：

一、命令行启动工具 二、命令行登陆 三、命令行提交预览 四、命令行上传代码 五、支持自动化测试

10、HTTP调用：

一、打开工具或指定项目 二、登陆 三、预览 四、上传 五、自动化测试

11、测试号：

一、申请测试号 二、建立测试号项目

12、小程序开发助手：

一、“小程序开发助手” 是微信公众平台发布的官方小程序，帮助开发和运营人员在手机端更方便快捷地查看和预览小程序，扫描下面小程序码可当即体验。 二、使用者能够在小程序开发助手查看和预览与本身关联的全部小程序。小程序将会按照其更新时间自动排序，显示在最上面的小程序是最近有提交的小程序，例如开发者预览了新的代码，或者体验版有更新。 三、经过点击并展开小程序列表，使用者能够根据本身的身份，浏览到小程序的线上版本、体验版本或开发版本。若是使用者是小程序的管理者，能够浏览到所有三种版本；若是使用者身份是 “体验者”，则能够浏览到线上版本、体验版本，而不会浏览到任何开发版本。若是一个小程序有多个开发者，则开发版本的列表将会显示每个开发者提交预览的最新版本。 三、经过点击列表上的相应版本，使用者能够当即预览该版本对应的小程序。点击导航栏的返回，能够返回到小程序开发助手，预览其余版本的小程序。

十3、代码片断：

一、建立代码片断 二、代码片断主界面 三、分享代码片断 四、导入代码片断

十4、第三方平台：

一、小程序运营者，能够一键受权给第三方平台，经过第三方平台来完成业务。 二、建立项目 三、小程序模板开发 四、extAppid 的开发调试 五、概念分区： open3rd：第三方平台，是小程序官方承认的第三方开发商 3rdMiniProgramAppid：第三方平台申请的并绑定在该平台上的小程序，用于开发小程序模板 extAppid：受权给第三方平台的小程序

十5、小程序插件开发：

一、建立插件项目 【1】miniprogram 文件夹是一个普通小程序项目，用来编写小程序插件的使用 Demo，上传插件代码时这个 Demo 会一块儿上传，并做为小程序插件的发布的审核依据。 【2】plugin 文件就是小程序插件项目，用来编写小程序插件的代码。 【3】project.config.json 须要关注 compileType 字段，compileType == 'plugin' 时才能正常的使用插件项目。

二、打开已存在的插件项目 三、插件上传 四、插件文档编写、预览和上传 五、插件使用

十6、素材管理：

一、名词解释 二、免费额度 三、收费状况 四、产品介绍 五、开通步骤： 【1】经过微信公众平台受权登陆腾讯云 【2】前往腾讯云开通 素材管理服务

十7、代码托管：

一、TGit开通及配置流程 【1】开发者可登陆小程序管理后台，在 “设置-开发者工具” 内开通 TGit 功能。 【2】配置项目信息、管理员信息 【3】开通后，进入“查看权限”，可查看和配置 TGit 项目成员信息 【4】添加 TGit 项目成员（选择成员，填写TGit用户名） 二、微信开发者工具 三、如何使用： 《1》下载并安装 Git，git-scm.com/downloads 《2》熟悉 Git 使用方法，详情 《3》使用 Git 命令或者 Git 可视化工具将代码提交到 TGit 《4》使用 TGit 进行代码托管和多人协做

十8、云测试：

一、特色： 【1】缺陷发现：测试过程当中自动发现小程序抛出的JS异常 【2】性能数据分析：测试过程当中收集包含加载时间、CPU占用率、内存占用量等数据指标； 【3】机型覆盖：小程序会被随机分配到4~8个不一样机型的机器（由当时的机器资源决定）来执行，借此能够观察小程序在不一样机型的执行表现； 【4】其它：弱网络环境测试、多场景测试等（开发中）。

十9、实现差别：

一、运行环境差别 【1】在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS八、iOS九、iOS10。 【2】在 Android 上，小程序的 javascript 代码是经过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的。 【3】在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的. 二、客户端ES6 API 支持状况 【1】TBS 3.0 是指微信小程序 Android 运行环境。 【2】Array.values 不支持 【3】Proxy 不支持 三、API实现差别