微信开发工具_微信开发工具放大 - CSDN
精华内容
参与话题
  • 微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必...

    如果你要开发自己的微信小程序或者小游戏,微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必不可少的。

    老实说该工具不管是对久经沙场的老人还是萌新来说都是非常简单的,能很快上手,并且还是中文的哦,下面我们看看整体界面

    image

    整个编辑器大题分为四块,模拟器编辑器调试器工具栏,下面我们每个模块来独立讲解

    一、模拟器

    模拟器是工具为了让我们的代码达到所见即所得的效果,我们编写的代码效果能很快的在左边的界面上显示出去,做过web开发的小伙伴应该也很清楚,浏览器上按下F12也可以达到类似的效果,其实微信开发工具本身就是对浏览器进行了一定程度的封装,我们使用起来也相对亲切,模拟器还可以模拟不同手机,百分比、网络状态等,极大的方便了我们的开发和测试

    image

    二、编辑器

    编辑器是每个开发工具必不可少的一部分,功能也大同小异,微信开发工具上有新增WXML、WXSS等文件的快捷方式,还是比较方便的,微信小程序采用的是ES6的语法,这个工具的提示确实有些差了,很多时候都不能提示出来,所以有很多人现在会采用WebStorm(前端开发最强神器)编写后在到微信开发工具上提交,当然也会有些坑,后续将专门讲解,不过微信开发工具目前更新速度还是很快的,希望能快点改善智能提示的问题

    三、调试器

    第一眼看到这个调试器有没有一点眼熟,它和浏览器按下F12后几乎是一样的,但是微信工具也做了一些简化和新增,我们主要看看几个不同和比较有用的三个功能

    image

    1、Storage

    Storage可以理解成一个本地存储数据库,可以通过wx.setStorageSync(‘logs’, logs)等方法将我们需要的数据直接存储和取出,有时在开发的过程中是非常有用的,后续将介绍具体使用场景

    2、AppData

    AppData中主要存储了我们在页面上所有用到的变量,这个对于我们开发和调试来说是非常重要的,能通过它快速看到每个值的赋值情况,快速定位问题

    3、Audits

    这个是一个程序性能的分析工具,可以在开发和开发完成后,测试一下,看看我们的程序在那块还需要进行优化,非常方便

    三、工具栏

    工具栏提供了我们一些常用的操作,在此我们也只将一下常用到的,和一些有用的,主要有以下几点

    image

    1、预览

    点击预览按钮后,我们可以用我们的后台绑定的微信扫描,在真机上看具体的效果,因为工具毕竟是模拟器,在模拟器上没问题,而在手机上却存在问题的情况是常有的,所以开发完一个功能后,我们有必要在真机上看看效果

    2、真机调试

    如果在“预览”中发现在真机上有问题,我们可以点击真机调试,我们的手机上也能看到调试信息,非常方便的让我们进行调试真机问题

    3、清缓存

    有时候我们可能用到Storage或者修改了页面和样式等,但是在渲染的时候还是使用的原来的代码,此时清缓存就是非常必要的操作了

    4、上传

    上传是在我们将我们的小程序开发完成后,点击上传,就会将我们的代码提交给微信官方审核了,只有审核通过后,其他用户才能在微信中搜索和使用我们自己开发的小程序

    5、详情

    image

    详情中可以设置项目的一下信息,主要关注开发基础库的选择,版本不要过低或过高,教低的版本会让很多方法无法使用,太高的版本会让很多微信版本较低的用户无法使用你的小程序(当然你可以做兼容处理);开发使用本地的服务时,需要勾选上“不校验本地域名…”,这样小程序就可以调用本地的服务了

    展开全文
  • 微信开发工具使用git

    千次阅读 2018-11-16 17:09:29
    1、初始化本地仓库 在微信Web开发者工具中点击「版本管理」。... 这一步骤相当于执行「git init」命令。 ...2、初始化完成后,我们可以...下图为微信Web开发者工具初始化后的版本控制面板。 3、配置仓库信息 初...

    1、初始化本地仓库

    微信Web开发者工具中点击「版本管理」。由于是新建项目,并没有初始化过Git仓库,所以项目会提示初始化Git仓库,点击「初始化 Git 仓库」,点击「确认」,完成本地仓库的初始化。

    这一步骤相当于执行「git init」命令。

    2、初始化完成后,我们可以看到本地的仓库和当前的Git状态。下图为微信Web开发者工具初始化后的版本控制面板。

    3、配置仓库信息

    初始化完成后,依次点击「工作空间」->「设置」->「通用」->「编辑」,编辑在Git中使用的用户名和邮箱。这一步相当于git config命令中的配置操作。

    $ git config --global user.name "用户名"
    $ git config --global user.email "邮箱"

    需要注意的是:此处配置的邮箱名需要和 码云 https://gitee.com 上的邮箱保持一致,才能保证提交后能统计到Git的提交贡献信息。

    4、点击微信号开发工具的项目管理---设置--远程--添加

    5、 设置在码云上创建的项目的名称和克隆地址,点击确定即可

    6、 左侧会出现远程的路径目标

    7、 选择网络认证,认证方式为用户名、密码认证,填写在码云上使用的用户名密码即可

    8、 推送代码到远程仓库

    点击操作面板上的「推送按钮」,在弹出窗口选择「推送到新的远程仓库分支」,名称填写「master」,表示推送到远程仓库的master分支,然后点击「确定」

    9 、修改并提交代码

    点击开发工具面板的「版本管理」按钮,关闭「版本管理」面板,打开「pages/index/index.wxml」,修改其中内容「获取头像昵称」为「我的第一次修改提交」,保存。

    再次切换到「版本管理」面板,可以看到当前本地分支有一个文件等待提交,选中并勾选文件,可以查看当前文件内发生的改动。

     

    在下方提交框填写提交的备注信息,点击「提交」,将代码提交到本地仓库主干分支上。提交后,可以在本地仓库分支上查看提交记录。

     

    接下去我们再次将代码从本地分支推送到远程仓库。点击操作面板上的「推送按钮」,在弹出窗口选择「推送到一下远程仓库分支」,选择一存在的远程master仓库的master分支,然后点击「确定」。

     

    推送完成后,即可在码云对应的仓库主页看到提交的代码变更。

    注意事项:当一个小程序多个人共同开发时,在拉取最新的码云上代码的时候,拉取下来到微信开发工具上,开发工具并不能很好的识别并更新本地代码

    所以这里我们需要用到,git和tortoiseGit管理工具,

    下载下来安装到本地,在本地的工作空间目录生成.git版本库,再进行项目的拉取和推送,码云上的代码会更新到项目的工作空间内,进而更新到微信开发工具内

     

    展开全文
  • 微信小程序开发者工具详解

    万次阅读 2018-09-17 10:43:59
    在头像后边有三个按钮: ...编译模式:普通编译和自定义编译条件 预览:在真机预览 远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试 切后台:切后台按钮会帮助我们快速的切...

    这里写图片描述
    个人中心:点击头像显示的是个人中心面板,展示的是小程序版本以及系统版本更新之后的一个推送消息,也方便我们去切换我们的小程序账号
    在头像后边有三个按钮:
    模拟器,编辑器和调试器:点击来显示或隐藏相应的模块
    编译模式:普通编译和自定义编译条件
    预览:在真机预览
    远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试
    切后台:切后台按钮会帮助我们快速的切到不同的场景值,通过这个场景值可以帮助我们去个性化一些我们的功能需求
    清缓存:我们可以清楚我们开发者工具和我们调试设备的一个数据缓存,文件缓存,授权缓存,网络缓存和我们的登录状态
    上传,测试,腾讯云,详情
    上传会帮助我们把本次的小程序代码上传到我们的管理后台,会默认的设置为我们的开发版本
    小程序都有哪些版本?
    这里写图片描述
    预览版本:在手机上预览在我们手机上是一个怎样的表现
    开发版本:通过上传之后把我们的本地代码。上传成一个具有版本号的小程序的应用,那么应用开发者权限的成员可以通过小程序开发助手来看到我们的开发版本
    体验版本:就是我们在小程序管理后台可以直接将我们的开发版本切换成我们的体验版本,具有体验权限的成员就可以看到体验版本
    如果我们要将我们的开发版本上线成一个线上版本的话,我们需要先去提交审核,提交审核之后,我们的小程序就称为了一个审核版本的小程序,那么微信通过我们的审核之后,我们的小程序就正式的发布上线了。

    测试按钮:测试按钮我们可以通过每24小时生成一个测试报告。微信会给我们随机的分配4到8种的机型测试我们的小程序页面的一个首屏加载时间,CPU占比等这些指数
    腾讯云:第三方平台,可以快速的帮助我们构建一个小程序的开发环境和线上环境
    点击详情,会弹出一个详情的面板,可以通过一些项目的设置,还可以看到我们一些域名信息,腾讯云的状态
    项目设置:可以设置调试的一个基础库版本,
    可以设置编译的配置:Es6转ES5等等

    调试模块:
    主要分为七个模块
    这里写图片描述
    console: 打印小程序页面的调试log信息
    sources:会列出微信小程序页面的所有脚本文件
    Network:展示网络请求的状态信息
    Stroge:在小程序里面通过调用wx.setStroge和wx.setStrogeSycc函数设置我们的缓存的时候,在这里可以动态的修改这些缓存数据
    APPData: 是微信小程序页面上真实展示的一个数据,可以在这里动态的修改,来查看我们小程序页面在模拟器上不同设备的一个兼容性的情况
    wxml 页面:展示了微信小程序页面 的各个组件元素以及我们可以通过对这些组件元素。对它进行一个样式属性的修改
    sensor:只要是我们的一个地址位置信息和一个设备旋转角度的一个展示,在这里我们可以动态的去修改我们的地理位置信息来模拟我们小程序在不同地理位置下的一个表现,在设备旋转角度这里,我们可以设置旋转角度的参数来查看它的一个设备的旋转角度,可以看到各个坐标轴的变化

    OK,这就是对开发者工具详解。

    展开全文
  • 微信开发者工具下载地址

    万次阅读 多人点赞 2017-06-08 10:19:13
    微信官方开发工具下载
    展开全文
  • 由于比较熟悉linux开发环境而微信开发工具官方只提供了windows和mac,就在网上找了下相关内容,花了老半天安装,其中有个坑搞了半天。记录一下,提醒自己。 git上有大牛写了,Linux微信web开发者工具 ...
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 1.首先下载web微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2.安装:点击下一步   点击我接受 选择路径 等待程序安装成功就可以了 运行查看程序是否能...
  • 如上图所示为开发者工具错误,刷新或者忽略即可
  • 一个人的一生只有三天,昨天,今天,和明天。-----------Banana • Banuit Gang(香柚帮BUG) 1,首先大香蕉用自己的GitHub先创建了一个私有库 2,创建好之后点击settings进行设置合作者 ...6...
  • 微信公众号之开发者工具

    万次阅读 2020-04-06 16:49:32
    一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...
  • 微信开发本地调试工具(模拟微信客户端)开源免费微信管家系统(java)源码下载微信部署需要依靠80端口,如何快速有效的调试本地微信开发程序,捷微团队(jeewx-java微信开源系统),采用微信开发调试工具,供本地...
  • 微信小程序开发者工具简介

    万次阅读 2018-05-14 10:07:29
    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了...
  • 微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。 微信开发者工具官方下载地址:...
  • 微信手机端调试工具[下载地址] (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html) 进入后的页面 注:1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具...
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    2016年底,微信小程序正式上线。很多人和我一样开始对这个新兴的东西产生了兴趣,但许多人却遇到了这样一个问题,安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨...
  • 微信开发者工具快捷键

    万次阅读 2017-05-12 17:42:15
    1:首先先说第一个:Ctrl + s 因为我第一次写的时候,一直调试多没有效果,后面才知道没有按Ctrl+s 一定要记住 保存 2:Ctrl+Shift +[ 折叠打开代码块 3:Shift + Alt + f 代码格式化 ...
  • 基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成身微信小程序和面向手机的移动应用开发;高效、稳定和可扩展的特点,使微信小程序的开发更快捷和简单。 源码只需要20000元。 HTML我帮您打造微信小...
  • 微信小程序开发工具 ubuntu linux版本

    万次阅读 2017-05-19 10:09:37
    在网上找了一些ubuntu下安装小程序开发工具的文章,很多不好安装,步骤太多,现在分享一个简单的方法: https://github.com/cytle/wechat_web_devtools 参考以上地址按步骤来就可以了,不过下面命令可能不行 git ...
  • 背景:使用微信web开发者工具进行移动调试,按照 配置网络代理后,如图: 当重启微信后,发现公共号上不去了,也不能正常的上网了 可以将服务器地址更改为: 去掉http://后再尝试,就可以了,然后...
  • 微信开发者工具的快捷键

    万次阅读 2017-08-30 17:51:05
    微信开发者工具的快捷键
1 2 3 4 5 ... 20
收藏数 139,597
精华内容 55,838
关键字:

微信开发工具