小程序开发工具_普通小程序开发工具 小游戏开发工具 - CSDN
精华内容
参与话题
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...

    一、微信小程序web开发工具下载地址

     

    1.1 在微信公众平台-小程序里边去下载开发工具下载地址

    1.2 下载后安装一下就可以使用了:

    二、创建项目

     

    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:

     

    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。

     

     

    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:

     

     

     

    三、开发工具界面介绍:

     

     

     

    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi

     

     

     

    四、调试区六大工具介绍:

     

    在调试区开发工具提供了6种调试模式:

     

    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。

     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。

     

    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。

     

    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究

     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。

     

    4.6 Wxml

     

    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。

     

     

    转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

    展开全文
  • 微信小程序开发步骤 一、首先我们进入 微信公众平台 微信公众平台 (1) 进入之后显示这个页面,点击注册 (2) 点击小程序 (3) 根据流程完成注册 (3) 注册成功 (4) 接下来,点击开发者工具 (5) 下载...
    微信小程序开发步骤

    开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

    一、首先我们进入 微信公众平台

    微信公众平台

    (1) 进入之后显示这个页面,点击注册

    (2) 点击小程序
    在这里插入图片描述
    (3) 根据流程完成注册

    在这里插入图片描述
    (3) 注册成功
    在这里插入图片描述
    在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。
    (4) 登入
    我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
    在这里插入图片描述
    小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

    有了小程序帐号之后,我们需要一个工具来开发小程序。

    二、搭建开发环境

    (1) 点击进入到开发者工具下载页面
    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》

    (1) 下载开发者工具
    在这里插入图片描述
    (3) 选择版本 点击下载
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    可以选择安装目录
    在这里插入图片描述
    (4) 安装成功
    打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧
    在这里插入图片描述

    下一遍 创建项目 环境介绍 https://blog.csdn.net/weixin_45522071/article/details/106362108

    展开全文
  • 微信小程序开发(二) -工具

    千次阅读 2018-03-06 16:41:13
    上一节,我们已经把微信小程序开发所必须的都已准备好 这一节 ,我们将 了解 微信开发者工具的基本使用,以及各项功能 这里我们不讲公众号网页调试 这款 ide 基本功能 有如下三点 小程序调试(开发者可以完成小...

    上一节,我们已经把微信小程序开发所必须的都已准备好
    这一节 ,我们将 了解 微信开发者工具的基本使用,以及各项功能

    这里我们不讲公众号网页调试

    这款 ide 基本功能 有如下三点
    小程序调试(开发者可以完成小程序的 API 和页面的开发调试)
    代码查看和编辑
    小程序预览和发布等
    暗示
    至于 最新版本添加的

    使用腾讯云,快速搭建小程序后台运行环境; 
    申请测试报告,了解小程序在真实的移动设备上运行性能和运行效果。

    我们暂不使用
    叼事

    菜单栏

    微信开发者工具选项
    士大夫

    切换账号:快速切换登录用户
    关于:关于开发者工具
    检查更新:检查版本更新
    开发者论坛:前往开发者论坛
    开发者文档:前往开发者文档
    更换开发模式:快速切换公众号网页调试和小程序调试
    退出:退出开发者工具

    调试:
    撒旦

    调试开发者工具 ,调试编辑器
    作用就是通过浏览器 调试工具 进行外部调试 该 ide

    项目
    sad

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

    文件 不多介绍

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

    工具
    撒大大

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

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

    前后台切换:模拟客户端小程序进入后台运行 和 返回前台的操作 ,可选择不同场景来进行模拟
    擦拭
    清除缓存
    这里写图片描述
    需要注意的是:
    在最近版本的ide中添加了后面几个选项

    将在后面一一讲解

    界面
    控制主界面窗口模块的显示与隐藏
    阿萨大

    设置
    萨德而我却
    士大夫

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

    工具栏上的东西 其实在菜单栏中都有,只不过为了方便单独拿出来 ,做成按钮 ,方便使用,这里不介绍

    下面是一些,常用功能介绍

    打开已创建好的项目

    非空目录下 必须存在
    app.json 或者 project.config.json
    实打

    项目

    工具支持同时打开多个项目
    每次打开的项目会从新窗口打开

    1. 首先 点击标题栏的项目选项 ,后展开如下
      sad
    当 需要 * 管理(删除)项目*

    点击 查看所有项目 ,然后会弹出一个新的窗口
    sds

    在上面的界面中 ,点击管理项目 ,便能删除,添加项目

    当 需要 多开项目

    选择添加项目 即可 在新窗口中 开始新项目的 代码编辑

    此时 便可以选择 新建一个项目 或者 是 按上面的不走打开一个 已创建的项目

    模拟器

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

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

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

    展开全文
  • 微信小程序web7.0版 微信小程序(wei xin xiao cheng xu),简称小程序,缩写XCX,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 ...
  • 本文主要对小程序开发工具进行简单介绍: 界面布局 菜单栏/工具栏 模拟器 编辑器 调试器 二 界面布局 小程序项目创建成功后,会自动进入开发调试环境,从图中可以看出,微信开发者工具的主界面主要由菜单栏...

    一 概述

    本文主要对小程序开发工具进行简单介绍:

    • 界面布局
    • 菜单栏/工具栏
    • 模拟器
    • 编辑器
    • 调试器

    二 界面布局

    小程序项目创建成功后,会自动进入开发调试环境,从图中可以看出,微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、编辑器和调试器组成。接下来对这些功能分别进行讲解

    三 菜单栏

    通过菜单栏可以访问微信开发者工具的大部分功能,常用的菜单如下:

    • 项目:用于新建项目,或打开一个现有的项目
    • 文件:用于新建文件、保存文件或关闭文件
    • 编辑:用于编辑代码,对代码进行格式化
    • 工具:用于访问一些辅助工具,如自动化测试、代码仓库等
    • 界面:用于控制界面中各部分的显示和隐藏
    • 设置:用于对外观、快捷键、编辑器等进行设置
    • 微信开发者工具:可以进行切换账号、更换开发模式、调试等操作

    四 工具栏

    工具栏提供了一些常用功能的快捷按钮,具体解释如下:

    • 个人中心:位于工具栏最左边的第一个按钮,显示当前登录用户的用户名、头像
    • 模拟器、编辑器和调试器:用于控制相应工具的显示和隐藏
    • 云开发:开发者可以使用云开发来开发小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发能力从基础库2.2.3开始支持
    • 模式切换下拉菜单:用于在小程序模式、搜索动态页和插件之间进行切换
    • 编译下拉菜单:用于切换编译模式,默认为普通编译,可以添加其他编译模式
    • 编译:编写小程序的代码后,需要编译才能运行。默认情况下,直接按Ctrl+S快捷键保存代码文件,微信开发者工具就会自动编译运行。若要手动编译,则单击“编译”按钮即可
    • 预览:单击“预览”按钮会生成一个二维码,使用手机中的微信扫码二维码,即可在微信中预览小程序的实际运行效果
    • 真机调试:可以实现直接利用开发者工具,通过网络连接对手机上运行的小程序进行调试,帮助开发者更好地定位和查找在手机上出现的问题
    • 切后台:用于模拟小程序在手机中切后台的效果
    • 清缓存:用于将代码上传到小程序管理后台,可以在“开发管理”中查看上传的版本,将代码提交审核。需要注意的是,如果在创建项目时使用AppID为测试号,则不会显示“上传”按钮
    • 版本管理:用于通过Git对小程序进行版本管理

    五 模拟器

    模拟器用于模拟手机环境,查看不同型号手机的运行效果

    图中,上方的iPhone 12 5表示手机型号,单击可以切换成其他手机。由于不同手机屏幕的CSS像素不同,宽高比也不同,在开发小程序时应对常见的手机屏幕进行适配。100%表示缩放百分比,可以调节预览画面的大小。WIFI表示网络环境,还可以切换成2G、3G、4G或Offline(离线),不同环境的网速不同,从而可以测试小程序的网络加载速度。模拟器的底部状态栏显示了当前的页面路径为/pages/index/index

    六 编辑器

    编辑器分为左右两栏,左栏用于浏览项目目录结构,右栏用于编写代码。在左栏中单击某个文件,就可以在右栏中对改文件进行编辑。

    七 调试器

    调试器类似于Google Chrome浏览器中的开发者工具。下面对调试器中的各个面板的功能进行简要介绍。

    • Console:“控制台”面板,用于输出调试信息,也可以直接编写代码执行
    • Source:“源代码”面板,可以查看或编辑源代码,并支持代码调试
    • Network:“安全”面板,用于调试页面的安全和认证等信息,如HTTPS
    • AppData:“App数据”面板,可以查看或编辑当前小程序运行时的数据
    • Audits:“审计”面板,用于对小程序进行体验评分
    • Sensor:“传感器”面板,用于模拟地理位置、重力感应
    • Storage:“存储”面板,用于查看和管理本地数据缓存
    • Trace:“跟踪”面板,用于真机调试时跟踪调试信息
    • Wxml:Wxml面板,用于查看和调试WXML和WXSS
    展开全文
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,...
  • 小程序开发工具调试

    千次阅读 2018-08-17 22:44:51
    小程序开发过程中,调试是让程序跑起来的关键。 第一步:点击调试器 第二步:点击sources 第三步:在目录中找到需要调试的js文件,打开图中文件,注意不是后缀为js的文件,而是js?[sm]的文件 第四步: 在...
  • linux 系统安装微信小程序开发工具

    千次阅读 2017-01-17 17:16:27
    一 、首先要安装 nw.js sdk 环境  nw.js的安装:  1.首先是osx下安装,你可以参考官方文档进行app下载然后设置路径,也可以直接一步到位,一条命令直接安装!  前提先安装好node.js环境,然后直接终端下输入命令...
  • 微信小程序开发工具安装详解

    千次阅读 2016-09-23 17:42:07
    自从前几日微信传出小程序这款产品,就受到大家的广泛关注,今天也去安装了一个开发工具...2、开发工具肯定用新的好,目前已经有0.9版本,点击下载小程序开发工具0.9,下载包中带有破解文件,注意:安装0.9之前需要先安
  • 直都想着手做一个微信小程序,尝试了很多微信小程序开发工具,因为不懂代码,所以尝试的是模板制作类型的小程序开发工具,从界面设计、操作难易程度、功能性上来说,有一款微信小程序开发工具我认为用户体验比较高,...
  • 蚂蚁开发者工具也就是支付宝小程序开发工具,支付宝小程序已经进入公测阶段,目前公测主要面向的是企业级开发者,蚂蚁开发者工具是支付宝小程序必备的工具! 小程序介绍: 支付宝小程序是手机应用嵌入支付宝...
  • 1.开发工具下载地址 Windows 64位 下载  Windows 32位 下载 MacOS 下载 2.安装过程 对于Windows用户直接双击下一步的方式安装即可,此处注意我们使用的版本是官方最新的版本(不需要破解),可以不用AppID,也...
  • 小程序开发工具命令行启动配置

    千次阅读 2018-10-31 11:45:02
    在cmd窗口中使用命令启动指定的小程序项目 命令形如: wechat -o miniapp-shops 1.自定义一个 wechat.bat 文件,输入以下代码: @echo off call C:"\Program Files (x86)\Tencent\微信web开发者工具\&...
  • 微信小程序开发工具显示网络错误

    千次阅读 2019-04-30 22:04:47
    在使用微信小程序开发工具时,提醒我有版本更新,然后我就更新了,再然后······再然后就打不开了,刚开始显示未知错误,在网上找了很多办法都没有解决,于是卸载重新安装,重装也不行,如果不是因为电脑上有...
  • 新版遍地是坑,怨声载道。...虽然会造成如下问题: 从新版退回旧版,造成部分功能无法使用。 我是Mac book,重新用回旧版...即,打开开发工具,一片空白,之前的项目都没了。需要重新添加项目地址 但至少能接着开发啊!!
  • 微信小程序开发工具取消用户授权

    千次阅读 2018-11-16 17:06:06
    之前没仔细研究小程序开发工具,对界面不熟悉。开发中对小程序做了个授权,然后想取消程序的授权,在手机上可以直接操作,但是在开发工具上不行。 其实,直接把缓存清除了,授权就没了,就这么简单。 ...
  • 微信小程序开发工具快捷键大全

    千次阅读 2018-04-29 16:41:16
  • 有时候项目直接从GIT 拉取 ,会存在.git 隐藏文件或者因为编辑器 会存在一些隐藏文件夹,导致我们直接在新建的时候直接选择当前文件夹时微信小程序开发工具不会显示快速搭建项目解决方案 只需要讲文件的隐藏文件清空,...
  • 小程序开发工具中的那些快捷键-mac

    万次阅读 2018-07-10 10:30:58
    玩编程的同学都是知道的,开发工具是很重要的,开发工具中的快捷键会让你的开发速度有所提升,近期正在学习小程序,在这里对小程序开发工具的一些快捷键做一些总结。快捷键Mac OS 快捷键Windows 快捷键说明⌘ + Q ...
  • @所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, ...
1 2 3 4 5 ... 20
收藏数 772,498
精华内容 308,999
关键字:

小程序开发工具