精华内容
下载资源
问答
  • 一般调试微信页面的时候,我们都会按照微信开发的官网教程,让你去安装微信开发者工具,然后在微信开发者工具上调试, 这样有时候会不会感觉很麻烦? 而且这个工具还经常卡死.1515737321133.jpg当然 微信开发者工具主要是...

    一般调试微信页面的时候,我们都会按照微信开发的官网教程,让你去安装微信开发者工具,然后在微信开发者工具上调试, 这样有时候会不会感觉很麻烦? 而且这个工具还经常卡死.

    1515737321133.jpg

    当然 微信开发者工具主要是让你模拟页面嵌套在微信里面的状态,或者说可以把它想象成一个容器, 你把页面扔到这个容器里 看看协调不协调,美观不美观. 比如这个容器自带导航栏等等.

    这些都不是我们接下来要关心的问题, 我们今天要说的是,为啥在其他浏览器就不能调试微信页面呢? (毕竟一方面你后端接口调用的是微信的)

    那么你会不会很好奇这是为什么呢? 微信开发者工具都做了什么事情呢?

    首先提到一个关键字: user-agent

    User Agent中文名为[用户代理] ,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的[操作系统]及版本、CPU 类型、[浏览器](及版本、浏览器渲染引擎、浏览器语言、[浏览器插件]等。

    想了解浏览器的前世今生的话,可以去看下这个:浏览器野史:

    https://mkblog.cn/889/

    想当初3Q大战那会. QQ空间在 360浏览器上无法使用一样, 全都是通过 user-agent 搞的鬼.

    我之前是做移动端的, 当发现这个玩意的时候,就像发现了新大陆一样, 自嗨了半天, 最后突发奇想,试了下能不能在火狐上调试微信页面.

    然后百度了下,还真有这样的帖子, 但是细节不够详细.

    我就在微信开发者工具上 用开发者模式,抓取到了 user-agent.

    看到后面跟了这么几个参数, 然后恍然大悟,

    AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.01.1712150 MicroMessenger/6.5.7 Language/zh_CN webview/15157367222261342 webdebugger port/9974

    细节点: wechatdevtools webdebugger 等关键词

    这肯定是在网络请求的时候,他们通过请求头拿到user-agent 这些信息,做了相应的判断和拦截.

    然后,替换到火狐浏览器的user-gent, 完美的解决了普通浏览器无法调试微信页面的问题.

    哦对了 火狐浏览器的user-gent原本是 FireFox 这个标识.火狐浏览器替换user-agent 的教程也附上:

    火狐浏览器修改userAgent的办法一:

    在火狐浏览器地址栏输入“about:config”,按下回车进入设置菜单。

    找到“general.useragent.override”,如果没有这一项,则点右键“新建”->“字符串”,输入这个字符串。

    将其值设为自己想要的UserAgent(下面附有常见UA)

    火狐浏览器修改userAgent的办法二:

    常见UA:

    Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.8.1.6) Gecko/20070914 Firefox/2.0.0.7

    Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

    Mozilla/5.0 (Windows; U; Windows NT 6.0; en) AppleWebKit/522.15.5 (KHTML, like Gecko) Version/3.0.3 Safari/522.15.5

    Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/103u (KHTML, like Gecko) safari/100

    Opera/9.23 (X11; Linux x86_64; U; en)

    Opera/9.23 (Windows NT 5.1; U; en)

    Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)

    Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0)

    Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

    查看user-agent信息的网页(具体用法就是在对应的浏览器下打开这个网址):

    http://tool.mkblog.cn/ua/

    1515738894024.jpg

    感兴趣的可以去了解下这个东西. 包括浏览器 模拟ipone , 模拟诺基亚n97 ,模拟黑莓手机,模拟windows phone, 模拟IE, 模拟 iPad显示效果 等.

    比如我平时就喜欢通过 user-agent 把火狐改成ipad模式. 广告少很多,用起来很流畅,体验超级棒哈

    1531965606190.jpg

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 本人最近在搞微信小程序开发,就碰到运行到微信开发者工具无法启动的问题,上网去查了一些博客,问题得到了解决。 如果有和一些作者的内容有相似的地方请见谅【抱拳】! 工具: HbuilderX、微信开发者工具 现在正式...

    本人最近在搞微信小程序开发,就碰到运行到微信开发者工具无法启动的问题,上网去查了一些博客,问题得到了解决。
    如果有和一些作者的内容有相似的地方请见谅【抱拳】!

    工具:
    HbuilderX、微信开发者工具

    现在正式开始进入我们的正题:
    1.点击文件,选择新建下面的项目,如下图所示:
    新建一个uni-app项目:
    在这里插入图片描述

    2.接着选择uni-app类型,起个名字即可,如下图所示:
    在这里插入图片描述

    3.然后就建好了小程序的目录,如下图所示:
    在这里插入图片描述

    4.接着点击工具下面的设置,如下图所示:
    在这里插入图片描述

    5.然后在运行配置里面设置微信开发者工具的路径,如下图所示:
    在这里插入图片描述

    6.接着登录微信开发者工具,点击设置下面的安全设置:
    在这里插入图片描述

    7.然后开启服务端口,如下图所示:
    在这里插入图片描述

    8.接着在运行配置中填写web服务调用URL:
    在这里插入图片描述

    9.接着点击运行下面的运行到小程序模拟器,如下图所示:
    在这里插入图片描述

    10.最后HbuilderX就自启动微信开发者工具,如果如下图所示:
    在这里插入图片描述
    最后,如果HbuilderX里面的内容更新了,相应的微信开发者工具的内容和模拟器也会跟着改变

    展开全文
  • 2、下载并注册微信开发者工具,具体教程可以问度娘; 3、打开微信开发者工具,导入项目中的 unpackage => dsit => dev => map-weixin 4、项目导进来后,选择 设置 => 安全设置 => 打..

    因为不太熟悉移动端开发,最近在上手小程序开发的时候,遇到一些问题,记录一下。

    首先,技术选型为uniapp,毕竟人家是一套代码,多端运行的嘛,够强大!

     

    1、在HBuilder中引入代码,然后使用快捷键 ctrl + r ,点击微信开发者工具;

    2、下载并注册微信开发者工具,具体教程可以问度娘;

    3、打开微信开发者工具,导入项目中的 unpackage => dsit => dev => map-weixin

    4、项目导进来后,选择 设置 => 安全设置 => 打开服务端口

    5、然后,点击编辑按钮后,就可以在微信开发者工具中运行并调试代码,是不是很简单。

    6、如何想再手机上预览小程序,点击预览,会自动生成二维码,微信扫一扫,就可以实现预览,前提是手机和电脑在同一网段。

     

    结束

    展开全文
  • 微信小程序开发:使用微信开发者工具与Web Service之间通信(已登录为例子)准备创建微信小程序项目微信开发者程序部分创建Web Services服务微信小程序访问Web Service测试 准备 首先下载好微信开发者工具以及VS2017...

    微信小程序开发:使用微信开发者工具与Web Service之间通信(已登录为例子)

    准备

    首先下载好微信开发者工具以及VS2017,注册好账户并在微信开发者工具中申请一个APPID。这一部分步骤网上有很多教程,在这里就不多说了。我这里使用过的服务端是使用的C# 工具为VS2017专业版。

    创建微信小程序项目

    1.打开微信小程序香项目,创建一个微信小程序项目,输入对应的APPID。这一部分的具体操作大家可以参考微信官方的开发文档。
    [外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblogcqnimg.cn/202zIdW10327110544600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shad0,text_aHR0cHMoLy9ibG9nLmNzZG6ubmV0L8FxXzQyNDkyMjI4,size_13,color_FFFFFF,t_70756)(n)]
    2.创建成功(为了方便我这里使用的是测试号进入的),里面会有一个默认的项目,小伙伴们可以点击运行测试一下是否可以使用。
    创建成功
    3.创建成功后我们先去掉图中选项。
    在这里插入图片描述

    微信开发者程序部分

    1.前面我们已经做好了配置,现在我们写一个简单的登录界面,如下创建相关页面。
    在这里插入图片描述

    2.打开login文件夹选中login.wxml,填写相关的wxml代码,为了方便我这里随便写一下,代码如下:

    <!--pages/login/login.wxml-->
    <view class="container"> 
     <form bindsubmit="formSubmit" bindreset="formReset">
     <view class="login-icon"> 
     </view> 
     <view class="login-from"> 
     <!--账号-->
     <view class="inputView"> 
       <text class="iconfont icon-yonghuming" style="margin-left: 44rpx; "></text>
      <input class="inputText" placeholder="请输入邮箱" bindinput="usernameInput" /> 
     </view> 
     <!--密码-->
     <view class="inputView"> 
      <text class="iconfont icon-mima" style="margin-left: 44rpx; "></text>
      <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> 
     </view> 
     <!--按钮-->
     <view class="loginBtnView"> 
      <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录(Login)</button> 
     </view> 
     </view> 
    </form>
    </view>
    

    保存后结果如下:
    在这里插入图片描述

    创建Web Services服务

    1. 这里我们使用经典的web窗体
      在这里插入图片描述
      在这里插入图片描述
    2. 创建成功后我们右键应用添加一个web服务:
      在这里插入图片描述
    3. 去掉图中的注释:
    4. 写一个方法来响应登录请求,我们这里为了方便,展示不连接数据库。用一个函数来模拟一下。代码如下:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    
    namespace WebApplication1
    {
        /// <summary>
        /// login 的摘要说明
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
         [System.Web.Script.Services.ScriptService]
        public class login : System.Web.Services.WebService
        {
    
            [WebMethod]
            public string HelloWorld()
            {
                return "Hello World";
            }
            [WebMethod]
            public string logincheck(string user, string password)
            {
               // linqDataContext db = new linqDataContext();
                int i = login1(user, password);
                //int ii = db.proc_select_isblack(user, 0);
                if (i == 1 )
                {
                    return "ok";
                }
                else
                {
                    return "no";
                }
            }
    
            public int login1(string user,string password)
            {
                if (user == "LX2000" && password == "123456")
                {
                    return 1;
                }
                else
                {
                    return 0;
                }
            }
        }
    }
    
    

    代码中我们可以看到,当用户名是LX2000,密码为123456时,我们认为是运行成功。这里我们在浏览器中检验一下,并记住URL地址:http://localhost:55946/login.asmx
    在这里插入图片描述
    输入相关值可以调用此方法 这里我就不测试了。
    在这里插入图片描述

    微信小程序访问Web Service

    1. 回到微信开发者工具,我们进入app.js文件,在globalData中加入一个全局的字符串globalReqUrl:“https://gjxysie.hbpu.edu.cn/webserver”。在里面的地址就是我们刚刚复制的。由于js中每个请求都会用到此部分连接字符串,因此在在这里设置为全局参数方便以后就行更改。关于IP/域名,微信是有一定的限制的,大家先要了解可以阅读微信开发者文档。
      在这里插入图片描述
      2.阅读最新的开发文档,我们发现微信现在不允许我们向本机的IP发起请求,所以现在我们把刚刚写的webservice通过IIS发布在内网环境下。绑定一个内网IP。发布后浏览器测试一下能不能用内网访问。
      在这里插入图片描述
      3.回到微信开发者工具,修改步骤一中的字符串为:http://192.168.31.59/login.asmx,打开login.js,写入以下代码逻辑:
      在这里插入图片描述

    (1)开头加入const app = getApp();
    (2)在page中的data中初始化参数username和password(如下)
    (3)获取输入框中username和password的值(如下)

      data: {
        username: '',
        password: ''
      },
    // 获取输入账号 
      usernameInput: function (e) {
        this.setData({
          username: e.detail.value
        })
      },
     
      // 获取输入密码 
      passwordInput: function (e) {
        this.setData({
          password: e.detail.value
        })
      },
    
    1. 写入登录执行逻辑:首先我们判断输入是否为空,然后若不为空发起wx.request请求,具体语法参考相关文档。设置请求为POST,使用DATA传入数据,注意这里数据名要和Web Service接口中对应方法要获取的参数名一致。获取返回的请求后做出相应其他的操作。这里的JS引用在前面写wxml时已经添加。所以一共加上前面步骤3中的逻辑完整代码为:
    // pages/login/login.js
    const app = getApp()
     
    Page({
      data: {
        username: '',
        password: ''
      },
     
      onShow: function () {
        // 生命周期函数--监听页面显示
        // wx.hideTabBar({})
      },
      onLoad: function () {
       
      },
     
     
      // 获取输入账号 
      usernameInput: function (e) {
        this.setData({
          username: e.detail.value
        })
      },
     
      // 获取输入密码 
      passwordInput: function (e) {
        this.setData({
          password: e.detail.value
        })
      },
     
      // 登录处理
      login: function () {
        var that = this;
        if (this.data.username.length == 0 || this.data.password.length == 0) {
          wx.showToast({
            title: '账号或密码不能为空',
            icon: 'none',
            duration: 2000
          })
        } else {
          wx.request({
            url: app.globalData.globalReqUrl+'/logincheck', //
            method: 'post',
            data: {
              user:  that.data.username,
              password:  that.data.password
            },
          
            success(res) {
              console.log(res.data);
              if (res.data.d == "ok") {
                wx.showToast({
                  title: '成功登录',
                  icon: 'none',
                  duration: 2000
                });
               
              } else{
                wx.showToast({
                  title: "密码错误",
                  icon: 'none',
                  duration: 2000
              })}
            },
            fail(){
              wx.showToast({
                title: '服务器繁忙,请稍后重试',
                icon: 'none',
                duration: 2000
              })
    
            }
          })
        }
      }
    })
    
    

    测试

    由于限制不能访问本机IP,所以这里我们使用微信开发者工具自带的真机调试功能(手机需要和Web service发布的IIS机器在同一内网环境下)。测试结果如下:
    在这里插入图片描述在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 本小节我们将介绍微信开发者工具如何使用 同学们可以通过两种方式进入官网,一是直接浏览器输入如下网址;二是通过百度搜索“微信公众平台” 每个小程序都拥有一个身份证号,成为AppID,同学们可以首先...
  • 首先这个问题是微信开发者工具代理的使用问题,我们要着手通过修改代理配置进行修改,其他网络教程列如修改注册表,重新安装系统、还有修改微信开发者工具配置文件的教程都是乱用药,大家千万不要尝试。 解决方法: ...
  • 本文为大家介绍一下微信小程序开发者工具版本管理的一些使用方法,结合了笔者的一些使用体验和官方使用文档,致力于方便大家理解使用该项功能。本文编写时笔者使用的开发者工具版本为Stable v1.02.1910120.使用本...
  • 1)首先,我们访问微信开发者工具下载地址,如下图所示,我们下载稳定版本,按你系统去选择Windows 或者macOS,我这里因为是Windows环境,所以后面教程都是以Windows环境为例,macOS实际使用跟Windows没有太大区别:...
  • 1.2软件微信开发者工具 下载地址 ===》https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 界面如下 设置 2.1项目导入 2.2设置微信appid 点击该地址申请一个测试账号即可...
  • 上一篇文章已经运行起了一个uni-app项目的小demo,但是运行在Chrome浏览器的H5页面,那在微信开发者工具中如何实时模拟查看该项目呢? 1.在微信开发者工具中运行 配置小程序IDE相关路径 说明:只有配置了才能在...
  • 微信开发者工具上传功能如何设置官网视频没有说明 https://ke.qq.com/webcourse/index.html#cid=343370&term_id=100408141&taid=2796517631278410&vid=5285890787986942538 微信小程序开发工具官网...
  • 一年一度的微信小程序开发大赛即将拉开帷幕,在使用微信开发者工具进行多人开发时,代码管理就成了比较棘手的问题。好在,微信开发者工具中集成了Git工具,只需链接到远程仓库,即可轻松协作。 #使用方法 ##安装Git ...
  • 没办法,现在需要硬着头皮装微信开发者工具。 直接用的github上的一个教程。链接:https://github.com/cytle/wechat_web_devtools 因为我的电脑之前为了装微信和qq,安装过deepin-wine环境,所以在我安装微信...
  • 我们下载了其它人的源代码,想要编译,当用微信开发者工具打开时,应该将该项目的appid修改为我们自己的。 两种方法: 一、点击菜单:工具->项目详情,修改为申请的 AppID 二、修改 project.config.json中的...
  • 今天新弄了个企业微信,在使用微信开发者工具调试的时候,遇到了如下的问题: 在网上找了下教程,发现全都是旧版本的解决方法不适用。这里介绍下新的企业微信的解决方案:1.首先,你必须是这个企业微信的管理员。这...
  • “若HBuilderX不能正常启动微信开发者工具,者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面” 这里讲一下怎么手动完成这句话的内容,对于零基础应该有所帮助 这是我的项目,以及项目结构 ...
  • 尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊。。。 相关教程: Egret微信小游戏教程 ...微信开发者工具 1.02.1803210 开发流程: 一. 注册微信小程序账号。 二. 下载安装...
  • 如果直接打开官方的demo,微信开发者工具上是不显示云开发按钮的。 是因为默认appid是测试号。要换成一个正式appid就会显示云开发按钮了。 分享一个朋友的人工智能教程。零基础!通俗易懂!风趣幽默!大家可以...
  • 参考教程:https://ruby-china.org/topics/30339 1.下载nw sdk $ wget -c http://dl.nwjs.io/v0.15.3/nwjs-sdk-v0.15.3-linux-x64.tar.gz 2.检查文件nwjs-sdk-v0.15.3-linux-x64.tar.gz是否下载好了 $ ...
  • 跟随这个教程,开始你的小程序之旅吧! 二、申请帐号 进入小程序注册页(https://mp.weixin.qq.com/wxopen/waregister?action=step1)根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 在这...
  • 网址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 安装教程:https://jingyan.baidu.com/article/363872ec6296f36e4aa16f74.html 选择稳定版,安装
  • 微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折。 1、下载nwjs 下载nwjs的SDK。 2、将微信web开发者工具拷贝到nwjs 将在window系统下安装的微信web...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 642
精华内容 256
关键字:

微信开发者工具教程