微信小程序教程
8.2.1 界面
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

概述

界面

界面

启动页

登录页

在登录页,可以使用微信扫码登陆微信开发者工具,微信开发者工具将使用这个微信帐号的信息进行微信小程序开发和调试。

登录

模式选择

微信开发者工具提供两种开发模式的选择。

  1. 公众号网页调试。选择公众号网页调试,将直接进入公众号网页项目调试界面,在地址栏输入 URL,即可调试该网页的微信授权以及微信 JS-SDK 功能。
  2. 微信小程序调试。选择微信小程序调试,将进入微信小程序本地项目管理页,可以新建、删除本地的项目,或者选择进入已存在的本地项目。

模式选择

新建项目

当符合以下条件时,可以在本地创建一个微信小程序项目

  1. 需要一个微信小程序的AppID;如没有 AppID,可以选择体验模式,但体验模式无法进行代码真机预览和上传等操作,部分 API 无法正常调用;
  2. 登录的微信号需要是该 AppID 的开发者;
  3. 需要选择一个空目录,或者选择的非空目录下存在app.json或者project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目。

新建项目

管理项目

对本地项目进行删除和批量删除

管理项目

主界面

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

菜单栏

1)微信web微信开发者工具

切换账号:快速切换登录用户

关于:关于微信开发者工具

检查更新:检查版本更新

开发者论坛:前往开发者论坛

开发者文档:前往开发者文档

调试:调试微信开发者工具、调试编辑器;如果遇到疑似微信开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题

更换开发模式:快速切换公众号网页调试和微信小程序调试

退出:退出微信开发者工具

2)项目

新建项目:快速新建项目

打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目

查看所有项目:新窗口打开启动页的项目列表页

关闭当前项目:关闭当前项目,回到启动页的项目列表页

3)文件

新建文件

保存

保存所有

关闭文件

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

4)工具

编译:编译当前微信小程序项目

刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(⌘) + R

编译配置:可以选择普通编译或自定义编译条件

前后台切换:模拟客户端微信小程序进入后台运行和返回前台的操作

清除缓存:清除文件缓存、数据缓存、以及授权数据

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

5)设置

外观设置:控制编辑器的配色主题、字体、字号、行距

编辑设置:控制文件保存的行为,编辑器的表现

代理设置:选择直连网络、系统代理和手动设置代理

通知设置:设置是否接受某种类型的通知

工具栏

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

用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。

工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览。

通过切后台按钮,可以模拟微信小程序进入后台的情况

工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

工具栏右侧是开发辅助功能的区域,在这里可以上传代码、申请测试、上传腾讯云、查看项目信息

模拟器

模拟器可以模拟微信小程序在微信客户端的表现。微信小程序的代码通过编译后可以在模拟器上直接运行。

开发者可以选择不同的设备,也可以添加自定义设备来调试微信小程序在不同尺寸机型上的适配问题。

在模拟器底部的状态栏,可以直观地看到当前运行微信小程序的场景值,页面路径及页面参数

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验