微信开发者工具有缓存

2018-03-26 15:09:00 weixin_30565327 阅读数 0

微信开发者工具的用途

  开发微信小程序和公众号网页开发

  

小程序

  添加小程序项目

    在小程序的管理页面可以增删项目

    

      添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用)

      

  小程序编辑器功能

    头部是编辑器的基本功能,包括打开关闭新建文件,编辑设置,界面,快捷键之类的设置

    

    左上角是用户的信息和用户要是否要显示模块

    

    左边是选择手机型号,预览百分比,信号选择,页面预览,打开路径,场景值(怎么进入小程序的区别),页面参数等信息

    

    中间上边是编译,调试,预览,远程调试,切后台(点击后就弹出场景值),清除各种缓存

    

    右上角是上传到腾讯服务器,测试服务器的按钮,上传需要填写必要的信息

    

    点开右上角的详情是这个项目的基本配置信息。基出调试库是sdk的版本版本越高功能越强大。项目配置主要是代码转移,压缩,补全,是否检验域名。域名信息主要是在小程序平台配置的安全域名,微信会根据域名验证是否安全。腾讯云状态我理解是项目在腾讯云部署的话一些配置

    

 

    

               

    代码编辑左边是目录列表,右边是单个文件代码

    

    小程序调试工具

      console:代码输出,报错

      source:当前项目编译后的脚本文件

      network:观察请求的情况

      security:看着像是安全方面的东西,有人懂给我讲一下

      stroage:显示当前stroage存储情况

      appData:显示当前页面data数据情况

      wxml:页面结构和对象的css

      sensor:模拟地理位置和重力感应

      trace:我研究这是链接手机调试的东西,没太搞懂

    

公众号开发

  编辑器头部只有前进后退一些基本功能,输入框里面是调试的网页链接

  

  展示区基本上一样

  

  调试区跟chrome的一样

  

小程序示例

  搜小程序示例。示例是腾讯的demo,可以让人快速的了解上手开发。地址https://github.com/Hao-Wu/WeApp-Demo

小程序开发助手

  搜小程序开发助手。管理开发进度和线上版本

  

vue开发小程序

  由美团实现的vue开发小程序简称mpvue。官网(http://mpvue.com/)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    

 

    

 

转载于:https://www.cnblogs.com/lichunjing/p/8651154.html

2016-05-05 10:23:29 u013022210 阅读数 8583

1.在开发页面中插入以下代码即可

<p><a style=" display:inline-block;width: 4rem; height: 2rem; border: 1px solid #006600;" href="javascript:window.location.reload()">刷新</a></p>

2017-05-04 11:09:38 DestinyLordC 阅读数 1700

方法1

  亲测该方法快捷有效,建议使用,没有windows系统的朋友,随便找一台windows计算机下载安装后,打包需要的文件即可。

安装步骤
需要先在已安装的windows微信开发者工具里面打包package.nw包,安装好后的目录中存在package.nw目录,整个目录打包成.zip格式即可。
下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

$ wget -c https://dl.nwjs.io/v0.25.2/nwjs-sdk-v0.25.2-linux-x64.tar.gz
$ ls
nwjs-sdk-v0.25.2-linux-x64.tar.gz package.nw.zip
$ tar -zxvf nwjs-sdk-v0.25.2-linux-x64.tar.gz
$ unzip package.nw.zip
$ mv package.nw/* nwjs-sdk-v0.25.2-linux-x64
$ cd nwjs-sdk-v0.25.2-linux-x64/
$ ./nw
#即可启动

方法2

  微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折。(转自https://zhuanlan.zhihu.com/p/24630979?refer=dreawer

注:带 * 的步骤或文件为不确定是否管用的步骤或文件。
本人系统为Linux Mint 18.1版本。

1、下载nwjs

  下载nwjs的SDK。

2、将微信web开发者工具拷贝到nwjs

  将在window系统下安装的微信web开发者工具文件夹中的package.nw、icon.ico、* 微信web开发者工具.exe拷贝到nwjs sdk解压后的文件夹内。

  * 解压 微信web开发者工具.exe,将解压后的文件夹内的文件移动到nwjs sdk解压后的文件夹内。

3、修改代码

  进入到nwjs文件夹,在终端内运行

$ ./nw
  会出现提示 Cannot find module ‘……’
  
  根据提示,在提示错误的文件内修改module名,因为名字大小写会有错误,比如appServiceConfig模块,它的实际模块名是appserviceConfig,这些都是大小写字母错误导致找不到模块。

  会有几个文件需要修改,根据错误提示修改。

4、在微信小程序项目文件内创建run-detectors文件

  在微信小程序项目文件夹内创建run-detectors文件,因为该文件没有扩展名,在linux系统会被认为是文件夹,导致找不到该文件导致报错。

5、下载wine

  在命令行内运行

  $ sudo apt-get install wine
  在右键选择wine环境运行wcc.exe,会提示安装依赖。wcc.exe在linux的 /home/用户名/.config/微信web开发者工具/WeappVendor 文件夹内。

6、载入项目

  在载入项目前,* 先在wine下运行wcc.exe和wcsc.exe(不提前运行wcc.exe和wcsc.exe的话可能会报错)。第一次载入项目后编译可能会慢一些,3、5s到10s左右,后面因为有缓存会快一些。


  修改wcc.exe和wcsc.exe文件名,去掉.exe。

  进入到package.nw/app/dist/weapp/文件夹,找到

  commit/build.js、trans/transWxmlToJs.js和utils/vendorManager.js,将代码中的wcc.exe和wcsc.exe改成wcc和wcsc。

  !!!使用编辑功能可能会报错,所以不要用自带的编辑功能。

7、编辑器

  推荐使用webstorm,在File - Editor - code style - File Types内设置如图下所示。将wxss添加到css类型文件,将wxml添加到html类型文件。

  微信的文件改变自动刷新会有3到5s的时间来编译,不是很快。

2020-03-11 12:31:32 La_vie_est_belle 阅读数 214

第八节 在微信开发者工具和手机上调试

下载和配置微信开发者工具

构建运行

在微信开发者工具上调试

在手机上测试


虽然游戏能在Cocos Creator引擎的模拟器上正常运行,但这不代表移植到小程序上运行时不会有问题。为确保游戏上线后正常运行,我们必须要在微信开发者工具和手机上都进行调试。

 

下载和配置微信开发者工具

首先我们访问该官方链接下载对应自己系统的微信开发者工具:

下载安装完毕后,我们打开Cocos Creator的偏好设置:

点击原生开发环境,设置好WechatGame程序路径,点击保存。

注:在Windows上填入exe应用程序的路径,在Mac上填入app的路径。

NDK和Android SDK用于安卓游戏构建,大家可以忽略。

 

构建运行

实现微信小游戏排行榜实现微信小游戏好友分享功能这两篇文章中,笔者已经详细介绍了如何进行构建,大家可先阅读下。主要注意以下几点:

1. AppID(登录小程序后台获取)和子域文件夹名称填写正确:

注:先别点运行,等下面两点完成后留到最后再点,因为点击后就会直接打开微信开发者工具。

 

2. 子域文件构建并将build文件夹中的OpenDataDomain放入主域的wechatgame文件夹中。

注:如果子域文件修改,只需要重新构建子域并放入主域的wechatgame文件夹中,不需要重新构建主域文件;如果主域文件需要修改,重新构建主域并不会删除wechatgame中的子域文件夹(也就是说不需要重新构建子域文件)。两者互不干扰。

 

3. 用于分享的图片记得放在wechatgame/res/raw-assers 路径下。

 

此时我们再回到主域的构建面板,点击运行后就会打开微信开发者工具。

如果是第一次登录(或者登录过期),那么需要先扫码:

   

登录后显示如下:

再次点击构建面板的运行就可以进入调试页面了:

 

在微信开发者工具上调试

在玩了几局后,笔者并未发现逻辑和功能方面的问题,排行榜和好友分享也都正常(如果大家发现了请私信我)。

但是在UI布局上有一个很大的问题:就是暂停按钮被小程序界面自带的按钮给挡住了,导致我们无法点击暂停按钮 。所以我们应该想办法把暂停按钮移到其他地方去。

以下是新UI布局:

虽然丑了很多,但是至少不会影响到暂停功能。

 

大家可以使用清除缓存功能删除相应的数据,如果点了全部清除,那么就会重新回到第一次进入游戏时的状态了:

 

如果你的游戏中存在网络请求,可以点击详情->本地设置,勾选下面的"不校验合法域名"这一选项。

在实际项目中我们需要在小程序后台配置合法的服务器域名,这样网络请求才可以正常发出:

P.S. "ES6转ES5"选项是为了适应大部分机型(有些机型还无法正常执行ES6)。

 

在手机上调试

如果再开发者工具上测试正常,那么我们点击上传将游戏传到小程序后台:

注:如果提示代码包超过4mb,请大家按照实现微信小游戏排行榜教程在Cocos Creator引擎中将没有用到的模块给剔除掉(加上排行榜功能对小游戏的包大小影响比较大)。

此时在小程序后台的版本管理页面我们就可以发现上传的代码:

点击提交审核旁的向下箭头按钮,将该版本选为体验版:

弹出一个框让我们填写路径,不用管,直接点击提交按钮:

接着我们就可以通过扫描下方的二维码在手机上测试了:

 

一般来讲,在微信开发者工具上测试没有问题的话,在手机上应该也会正常。万一出现问题,大家可以点击"开发调试"按钮在手机上查看控制台输出情况(点击后需要重新打开游戏):

当然我们还可以邀请其他人来体验和测试游戏,只要把体验版的二维码发给别人就行了。

不过因为是体验版,所以其他人要玩的话还需要经过管理员的确认才行。

当别人扫码后,需要点击"申请体验":

  

然后管理员再确认通过:

 

当然管理员可以在小程序后台的成员管理页面提前将体验人员的微信号填入,这样就不需要上面的申请和确认步骤了:

 

2018-10-16 17:59:34 henryhu712 阅读数 2111

有时我们会在 app.js 中定义全局变量,这样其他页面可以共享信息。那在调试的时候,如何在微信开发者工具中查看这些信息?答案是在 console 面板中使用 getApp():

在这里插入图片描述