精华内容
参与话题
问答
  • 微信公众号之开发者工具

    万次阅读 2018-06-30 00:32:11
    一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...

    一、前言

       这次的项目主要是关于微信公众号的一个开发,本人这次分配的模块是后台微信公众号的支付和退款,第一次接触微信公众的项目刚开始一脸懵逼,开发过程中遇到各种坑,所以想自己写一篇详细的关于微信公众号的开发,希望能对小伙伴们有所帮助!在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署到正式环境中测试。

    二、使用方法

    进入到在线接口调试工具页面如下图所示:

    详细介绍:

    1.第一步:选择上图的接口类型为基础支持,输入测试账号分配的appid和secret,点击检测可以获取到AccessToken,如下图所示:

    2.第二步,通过第一步中得到的AccessToken,可以进行其他接口的测试,这里以自定义菜单为例测试。复制第一步中得到的AccessToken到自定义菜单对应的AccessToken位置,然后将事先准备好的菜单复制到body文本框中,然后点击检测,返回OK自定义菜单就设置好了,如下图所示:

    3.第三步,查看自定义菜单,在测试账号管理中找测试二维码,用微信二维码扫描关注测试账号就可以看到自定义菜单了,如下图:

    附自定义菜单格式:

    {
        "button": [
            {
                "name": "便民服务", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "个人中心", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appId=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/PersonalInfo&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "预约挂号", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/li_room&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "费用支付", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/Clinic&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "报告查询", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/report&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "咨询互动", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/xie_consultation&response_type=code&scope=snsapi_base#wechat_redirect"
                    }
                ]
            }, 
            {
                "name": "资料下载", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "官方网站", 
                         "url": "http://www.szmbzx.com/"
                    }
                ]
            }
        ]
    }

    三、注意事项

    要想使关注的测试账号能真正的访问到后台,需要在测试管理页面中配置一些参数。

    1.接口信息配置和JS接口安全域名配置

               下图中的域名是使用ngrock代理生成的外网可访问的域名,改域名是免费,但不是很稳定经常容易掉线。

    2.网页授权获取用户基本信息配置

       还是在测试账号管理页面中,往下拉找到网页账号对应的网页授权获取用户基本信息,点击右侧修改,然后数据域名,该域名与第一条中涉及到域名相同,如下图:

     

    有兴趣的朋友可以关注下本人的微信公众号:“JAVA菜鸟程序猿”

     

     

     

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 百度开发者工具

    2019-02-18 12:24:52
    百度开发者工具..
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:   2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。     AppID需要去设置里边获取...

    一、微信小程序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

    展开全文
  • 微信Web开发者工具报错:net::ERR_BLOCKED_BY_CLIENT  打开微信Web开发者工具,每次不清除缓存和cookie,直接将url粘贴上去,回车,能看到net::ERR_BLOCKED_BY_CLIENT错误,但瞬间又被刷掉了。不影响功能,求问怎么...
  • Chrome 开发者工具介绍

    万次阅读 2020-01-19 12:49:51
    Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。 打开谷歌浏览器控制台 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击,选择...

    作为一个程序员我认为我们一定要对自己使用的工具很熟悉,这样才能在工作当中游刃有余,今天我要给大家讲的不是我们常常使用的编辑器,而是我们的Chrome浏览器控制台。

    Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。

    打开谷歌浏览器控制台

    • 在Chrome菜单中选择 更多工具 > 开发者工具
    • 在页面元素上右键点击,选择 “检查”
    • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
    • 使用另外快捷键 F12(Windows)或 fn+F12(Mac)

    了解面板

    在这里插入图片描述
    在这里插入图片描述

    和百分比圈在一起的是手机的状态。一共四个选项:

    1. 在线【online】
    2. 中端手机【mid-tier mobile】
    3. 低端手机【low-end mobile】
    4. 离线【offline】

    元素面板【Elements】

    使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.
    在这里插入图片描述

    控制台面板【Console】

    在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell在页面上与JavaScript交互。
    在这里插入图片描述

    关于更多console的内容请看:你不知道的console,控制台也能玩出花样

    源代码面板【Sources】

    在源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。

    在这里插入图片描述

    网络面板【Network】

    使用网络面板了解请求和下载的资源文件并优化网页加载性能。
    在这里插入图片描述

    性能面板【Performance】

    使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

    内存面板【Memory】

    如果需要比时间轴面板提供的更多信息,可以使用“配置”面板,例如跟踪内存泄漏。 Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.

    应用面板【Application】

    使用资源面板检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。
    在这里插入图片描述

    安全面板【Security】

    使用安全面板调试混合内容问题,证书问题等等。

    参考文献:https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn&authuser=2

    展开全文
  • ``` InputStream fileSource = req.getInputStream();...提交后发现开发者工具中的request payload不显示post的内容,但是打开那个临时文件却已被写入内容,请问这个是什么问题,怎么样才能让工具中显示内容
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...

    相关文章

    微信小程序开发(二)开发之日历打卡小程序发现页

    微信小程序开发(三)入门之创建打卡活动

    微信小程序开发(四)入门之打卡功能开发


    前言

    一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序如雨后春笋般出现在我们的视线里。追着这波大浪潮,笔者所在的公司也开始将有些需求转移到微信小程序上。接下来将以几篇文章将最近的一个日历打卡小程序的开发过程以及遇到的问题和大家做个分享。

    (一)微信开发者工具

    小程序团队推出了自己的开发工具-微信开发者工具,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。论坛上吐槽的文章也是一大堆,存在很多bug,笔者在开发过程中也是被它坑过。笔者是安卓开发者,习惯于这种可视化的编程,所以没有选择Webstrom或者其他开发工具,接下来将介绍微信开发者工具基本功能



       

    1. 机型选择:小程序以IPhone6的屏幕尺寸为设计标准,让UI小姐姐按照IPhone6屏幕尺寸来切图。
    2. 预览界面:写好视图布局后点击编译,视图界面刷新显示
    3. 远程调试:手机端和PC端开发工具联调(非常实用)
    4. 上传代码:上传到腾讯服务器,提交审核必经步骤。可以填写版本号和备注信息
    5. 5-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFiledownloadFile域名。注意:域名小程序要求必须是https 
    6. 控制台:打印输出信息,方便调试
    7. 资源文件:对应项目的文件目录,一般可以在这里进行断点调试
    8. 本地数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
    9. 视图调试:标组件以子父层级结构呈现,方便调试。

    以上就是在开发过程中微信开发者工具常用到的功能,微信开发者工具也在不断的完善,为了以后更好的提升开发效率,也需要我们在开发过程中将遇到的问题不断的反馈给小程序团队做优化,希望大家抱着包容的心态。开发过程中大家也可以依照自己的习惯选择其他的开发工具。


    (二)小程序框架以及目录结构介绍

        

    •  逻辑层

      小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。逻辑层对应的是js文件,在每个页面的js文件中,系统提供了一系列的方法如:页面生命周期onLoad(),onShow(),onHide(),等,下拉刷新onPullDownRefresh(),页面到底部(上拉加载)onReachBottom()方法,分享功能onShareAppMessage()等。


    • 视图层

      框架的视图层由 wxml  wxss 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 wxml 由小程序提供的组件组成,wxss css 样式。

    • app文件

      app.json 
      文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。页面的json文件一般用来配置当前页面的窗口表现。app.js 用来提供全局变量,如baseUrl。app.wxss 提供全局的css样式

      {
        "pages": [                    //页面的路径(在此处可快捷创建页面)
          "pages/index/index",
          "pages/logs/index"
        ],
        "window": {                   //视图窗口
          "navigationBarTitleText": "Demo"
        },
        "tabBar": {                   //底部tab
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页"
          }, {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }]
        },
        "networkTimeout": {           //设置是否超时
          "request": 10000,
          "downloadFile": 10000
        },
        "debug": true
      }
      
      
    • utils/.json 

      系统提供的工具类,一般编写公共的方法导出方便其他页面调用。

    (三)结束语

        本篇文章简单的介绍了微信开发者工具和小程序的框架,微信的开发文档对相关功能的介绍十分的详细。接下来将开始我们的日历打卡小程序开发之旅。


    展开全文
  • 有时候,我们在使用微信开发者工具导入别人开发好的项目时会提示:登录用户不是该小程序的开发者。如下图所示: 这时候,找到“project.config.json”文件,我们需要修改项目中的“project.config.json”文件。 ...
  • 如何使用浏览器的F12开发者工具调试页面?

    万次阅读 多人点赞 2018-05-27 22:25:23
    通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的...
  • 在本次课程中,将会就高通骁龙™开发者工具链、异构并行计算SDK、功耗优化SDK和性能分析工具进行深入浅出的介绍,帮忙开发者实现更高效的图形渲染和更低功耗,从而设计出更具表现力的游戏画面和更加稳定流畅的高帧率...
  • 本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工作效率...
  • 1.将安装好的 微开发者工具移动到没有中文路径的地址,然后将 微信开发者工具.exe 更改为英文名字,然后发送到桌面快捷方式 2,按照谷歌配置可跨域的方法配置 配置方法(配置的时候请保证 你的软件在关闭状态) ...
  • 大家都知道使用开发者工具会让工作事半功倍,不过今天遇到一个问题,其实也不算是问题啦 就是我在sources中找不到我自己引入的js,这是什么原因呢,一些其他的插件的js是存在的啊
  • 开发者工具找回密码

    千次阅读 2018-07-12 15:23:24
    最讨厌的就是记密码了,所以以前我的密码只有一个for all account,直到有一天新浪微博强行要我换密码,再到有一天,申请华为账号,告知我密码必须字母+数字+特殊字符,,原密码不... 1.打开菊厂官网,login时由于...
  • 处理方法:阅读了链接文章,确实学习,但是处理起来很简单。 直接在微信开发者工具中,“设置-通用设置-安全”里面,开启服务端口即可
  • 开发者工具中能正常的请求到后台 [img=https://img-bbs.csdn.net/upload/201611/10/1478747696_650020.png][/img] 日记也能看到有请求到我后台 [img=...
  • 微信web开发者工具0.7

    2018-04-04 08:57:39
    微信web
  • ie开发者工具

    千次阅读 2015-12-14 21:57:00
    今天把ie浏览器从9升级到了11,却发现f12后开发者工具出错不能使用 在网上查找了下原因,需要下载一个补丁IE11-Windows6.1-KB3008923-x64.msu(我的是64位) 问题解决,熟悉下ie11的开发者工具带来的全新体验 1...
  • chrome开发者工具

    2019-04-05 21:48:01
    随笔分类 - Chrome开发者工具系列 Chrome开发者工具详解 最新 Chrome DevTools(v57) 使用详解 Chrome开发者工具中文文档 Chrome DevTools — JS调试 chrome DevTools - 圣耀 - 博客园 ...
  • 微信开发者工具

    2020-09-04 17:21:21
    文章目录微信开发者工具存在的原因微信开发者工具底层框架代码编译模拟器 微信开发者工具存在的原因 微信开发者工具存在的原因肯定是因为当时其它开发者工具写不了微信小程序。 因为小程序渲染层和逻辑层分离,...
  • 微信开发者工具下载地址

    万次阅读 多人点赞 2017-01-05 10:52:03
    微信官方开发工具下载
  • 问题1:hbuilder不能调用正常调用微信开发者工具(调用之后显示在选择项目主页) 解决方法:打开manifest.json,点击微信小程序配置,输入你登录微信的appid(注意一定是要登录微信账号的),重启项目 问题2...
  • 微信开发者工具(小程序)源码
  • Chrome开发者工具详解

    万次阅读 多人点赞 2018-06-15 10:52:51
    Chrome开发者工具详解(1)-Elements、Console、Sources面板Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、...
  • 微信开发者工具使用bug

    千次阅读 2018-10-22 21:19:04
    之前下载了微信开发者工具,最近一直提示下载更新。因为嫌麻烦,就没有更新。结果今天微信开发者工具竟然打不开了!好吧!以后还是经常更新比较好!  遇到了微信开发者工具打不开的问题,就重新下载了最新版的微信...
  • 你不知道的,F12开发者工具调试技巧 1. 调试伪类 (点击styles 选择:hov 在下方选择元素的状态即可) 方式二 (在elments中选中节点然后右键选中元素前状态,点击后 节点前就会出现一个橘色小球,然后在右侧就可以...
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...

空空如也

1 2 3 4 5 ... 20
收藏数 50,281
精华内容 20,112
关键字:

开发者工具