微信开发工具_微信开发工具很卡 - CSDN
精华内容
参与话题
  • 微信开发者工具下载地址

    万次阅读 多人点赞 2017-06-08 10:19:13
    微信官方开发工具下载
    展开全文
  • 微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必...

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

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

    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

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

    展开全文
  • 微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用 网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件...

    微信小程序学习(三):在微信开发者工具中,使用WeUI

    这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用
    网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件导入项目中,然后引用

    一、先下载WeUI

    这个是下载的GitHub地址:
    https://github.com/weui/weui-wxss/
    下载完后解压是这个样子的
    在这里插入图片描述
    然后打开src==>style,找到weui.wxss文件
    在这里插入图片描述
    然后复制weui.wxss文件到项目的总目录下
    在这里插入图片描述
    我这里就是Test7里面

    二、在app.wxss中配置

    我是放在总目录下的,所以这样就行了,

    /**app.wxss**/
    @import "weui.wxss";
    

    另外说一下,每个"…/“是向上翻一层目录,没有数对”…/"的话就可能引用不到
    在这里插入图片描述

    三、实验成果

    先上代码

    <!-- 充值信息 -->
    <view class="weui-panel">
      <view bindtap='logout' class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <!-- 这里之后可以放图标 -->
        <view class="weui-cell__bd weui-cell_primary margin-left-icon">
          <view class='text-size-09 init-wordspace'>充值信息</view>
        </view>
        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
      </view>
    </view>
    

    这个是wxml的页面
    这个是没有连接上的样子,代码就写了一个充值信息的,就看看效果,别的没拷
    在这里插入图片描述
    这个是连接后的样子,可以看到在不改变wxss的情况下,仅仅是把app.wxss中加了配置,就改变了样式
    在这里插入图片描述

    因为是配置到全局内的,所以 不需要在别的地方额外配一次,都是可以引用的

    另外加上两个可以看样式的网址:
    这个好像是微信的
    https://weui.io
    这个和上面那个差不多,不过感觉好看点
    http://weui.shanliwawa.top

    展开全文
  • 微信开发工具

    2020-06-11 23:30:09
    .net 微信SDK 完美封装得.net 方便学习和直接使用。
  • 微信小程序开发者工具详解

    万次阅读 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,这就是对开发者工具详解。

    展开全文
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 1.首先下载web微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2.安装:点击下一步   点击我接受 选择路径 等待程序安装成功就可以了 运行查看程序是否能...
  • 微信公众号之开发者工具

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

    万次阅读 2018-05-14 10:07:29
    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了...
  • 微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。 微信开发者工具官方下载地址:...
  • 微信开发者工具查看项目存放路径

    千次阅读 2018-02-10 17:30:22
    鼠标点击红色箭头指向的...
  • 微信开发者工具快捷键

    万次阅读 2017-05-12 17:42:15
    1:首先先说第一个:Ctrl + s 因为我第一次写的时候,一直调试多没有效果,后面才知道没有按Ctrl+s 一定要记住 保存 2:Ctrl+Shift +[ 折叠打开代码块 3:Shift + Alt + f 代码格式化 ...
  • 微信手机端调试工具[下载地址] (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html) 进入后的页面 注:1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具...
  • 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,...
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    2016年底,微信小程序正式上线。很多人和我一样开始对这个新兴的东西产生了兴趣,但许多人却遇到了这样一个问题,安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨...
  • 背景:使用微信web开发者工具进行移动调试,按照 配置网络代理后,如图: 当重启微信后,发现公共号上不去了,也不能正常的上网了 可以将服务器地址更改为: 去掉http://后再尝试,就可以了,然后...
  • 微信小程序开发工具 ubuntu linux版本

    万次阅读 2017-05-19 10:09:37
    在网上找了一些ubuntu下安装小程序开发工具的文章,很多不好安装,步骤太多,现在分享一个简单的方法: https://github.com/cytle/wechat_web_devtools 参考以上地址按步骤来就可以了,不过下面命令可能不行 git ...
  • 一般浏览器里鼠标在元素上右键点击审查元素或检查元素即可快速打开开发者工具并定位到该元素,但在微信开发者工具中不支持, 解决方法 点击 elements左边的 小鼠标 图片,然后在主页面点击元素即可快速定位 ...
  • 基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成身微信小程序和面向手机的移动应用开发;高效、稳定和可扩展的特点,使微信小程序的开发更快捷和简单。 源码只需要20000元。 HTML我帮您打造微信小...
1 2 3 4 5 ... 20
收藏数 140,746
精华内容 56,298
关键字:

微信开发工具