微信小程序—创建项目+开发者工具-界面介绍

博客概要

     简单分享创建一个微信小程序的步骤+开发工具的主要页面介绍~

文章目录

    • 博客概要
    • 创建项目
      • 1.下载工具
      • 2.点击打开工具
      • 3.微信登录
      • 4.登录成功
    • 微信开发者工具页面
      • 1.菜单栏
      • 2.工具栏
      • 3.模拟器
      • 4.编辑器
      • 5.调试器
      • 6.其他

创建项目

1.下载工具

     想着手煮饭,自然需要一口锅,下面提供这口“锅”的下载地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.点击打开工具

在这里插入图片描述

3.微信登录

在这里插入图片描述
     打开工具,来到登录页,使用微信扫码登录开发者工具,开发者工具将会根据你使用的这个微信账号的相关信息进行小程序的开发和测试。总之,扫就完了= =

4.登录成功

     成功登录会来到这个页面,如果你已经使用开发者工具编辑过,那么就会和我一样,会呈现出已存在的项目痕迹。在左侧的项目列表中还可以选择公众号网页调试,进入到公众号网页调试模式。

     点击上图红框部分,也就是“新建项目”的区域,当符合以下条件时,就可以在本地创建一个小程序项目了:

  1. 需要一个小程序的AppID;如没有AppID,可以选择申请使用测试号
  2. 登录的微信号需要是该AppID的开发者
  3. 需要选择一个空目录,或者选择的非空目录下存在app.json或者project.config.json。当选择是否在该目录下生成一个简单的项目

     当你填写设置好了一切之后,当当当当当,你就新建好了项目,至此来到“开发者工具”的页面了,下面展开介绍


微信开发者工具页面

在这里插入图片描述

     由上图可知,微信开发者工具的界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。

1.菜单栏

项目
在这里插入图片描述

  • 新建项目:快速新建项目
  • 打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目
  • 查看所有项目:新窗口打开启动页的项目列表页
  • 关闭当前项目:关闭当前项目,回到启动页的项目列表页

文件
在这里插入图片描述

  • 新建文件
  • 保存
  • 保存所有
  • 关闭文件

编辑
在这里插入图片描述

  • 可以查看编辑相关的操作和快捷键

工具

在这里插入图片描述

  • 编译:编译当前小程序项目
  • 刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(⌘) + R
  • 编译配置:可以选择普通编译或自定义编译条件
  • 前后台切换:模拟客户端小程序进入后台运行和返回前台的操作
  • 清除缓存:清除文件缓存、数据缓存、以及授权数据

界面

在这里插入图片描述

  • 控制主界面窗口模块的显示与隐藏

设置

在这里插入图片描述

  • 外观设置:控制编辑器的配色主题、字体、字号、行距
  • 编辑设置:控制文件保存的行为,编辑器的表现
  • 代理设置:选择直连网络、系统代理和手动设置代理
  • 通知设置:设置是否接受某种类型的通知

微信开发者工具

在这里插入图片描述

  • 切换帐号:快速切换登录用户
  • 关于:关于开发者工具
  • 检查更新:检查版本更新
  • 开发者论坛:前往开发者论坛
  • 开发者文档:前往开发者文档
  • 调试:调试开发者工具、调试编辑器;如果遇到疑似开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题
  • 更换开发模式:快速切换公众号网页调试和小程序调试
  • 退出:退出开发者工具

2.工具栏

个人中心

在这里插入图片描述

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

显示/隐藏

在这里插入图片描述

  • 控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示

工具栏中间

在这里插入图片描述

  • 可以选择普通编译
  • 也可以新建并选择自定义条件进行编译和预览
  • 通过切后台按钮,可以模拟小程序进入后台的情况
  • 提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试

开发辅助功能

在这里插入图片描述

  • 在这里可以上传代码、申请测试、上传腾讯云、查看项目信息

工具栏管理

在这里插入图片描述

  • 在工具栏上点击鼠标右键,可以打开工具栏管理

3.模拟器

在这里插入图片描述

     可以模拟小程序微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。
开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

4.编辑器

     左侧代码目录,右侧具体编辑代码段

5.调试器

在这里插入图片描述
     各种调试区域,码代码的时候就会知道了= =请务必灵活运用

6.其他

独立窗口

在这里插入图片描述

     点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器


http://www.niftyadmin.cn/n/908083.html

相关文章

VGG16提取图像特征 (torch7)

VGG16提取图像特征 (torch7)VGG16loadcaffetorch7下载pretrained model,保存到当前目录下th> caffemodel_url http://www.robots.ox.ac.uk/~vgg/software/very_deep/caffe/VGG_ILSVRC_16_layers.caffemodel th> proto_urlhttps://gist.github.com…

FastStone Capture—截图功能

博客概要 “FastStone Capture”,咳咳咳(敲黑板.gif),“FastStone”意思是“截图工具、截图软件”,“Capture”意思是“捕获、虏获”…gang了这么多,懂了吧,这是一款获取屏幕信息的工具&#xf…

[HDU4417]Super Mario(主席树+离散化)

传送门 又是一道主席树模板题&#xff0c;注意数组从0开始&#xff0c;还有主席树耗费空间很大&#xff0c;数组开大点&#xff0c;之前开小了莫名其妙TLE。QAQ ——代码 1 #include <cstdio>2 #include <cstring>3 #include <algorithm>4 #define ls son[no…

FastStone Capture—截图处理

博客概要 上一篇博文中介绍了FSC的七大截图功能&#xff0c;FSC除了能方便的截图外&#xff0c;还能在很大程度上对所截获的图片进行处理&#xff0c;本博文简单分享几个FSC的“截图处理”功能~ 文章目录博客概要FastStone Capture-使用案例_总目录截图处理1.绘制2.模糊3.调整大…

英文绕口令

1 Can you can a can as a canner can can a can? 你能够像罐头工人一样装罐头吗&#xff1f; 2 I wish to wish the wish you wish to wish, but if you wish the wish the witch wishes, I wont wish the wish you wish to wish. 我希望梦想着你梦想中的梦想&#xff0c; 但…

深入理解Tomcat虚拟文件夹

我们知道&#xff0c;Web站点中的内容&#xff08;包含网页&#xff0c;图片&#xff0c;音频文件等&#xff09;一般都存放在App的文件夹下。但随着站点内容的不断丰富&#xff0c;用户须要把不同层次的内容组织成站点的子文件夹。我们通常的做法是在站点主文件夹下新建子文件…

FastStone Capture—屏幕录像

博客概要 FSC还有一个简易的“视频录制”功能&#xff0c;即“屏幕录像”&#xff0c;可以满足一般精度的录制需求&#xff0c;本博文分享利用FSC录制的简要过程&#xff0c;以及对视频的简易处理~ 文章目录博客概要FastStone Capture-使用案例_总目录屏幕录像1.打开-选择区域音…

搜索引擎最经典的书籍——《走进搜索引擎》(梁斌 著)百度网盘免费下载

近期在学习搜索引擎的一些知识&#xff0c;在网上下载了一本经典书籍——《走进搜索引擎》。在此和大家分享。 电子书基本信息&#xff1a; 《走进搜索引擎》 梁斌 著 2007年10月出版 下载地址&#xff1a; http://pan.baidu.com/s/1jGooFn4 转载于:https://www.cnblogs.com…