2017-09-12 17:07:55 machunlin2010 阅读数 3156
  • 微信h5支付开发-php开发微信h5支付demo

    会员免费看,http://edu.csdn.net/lecturer/842右侧可办理会员卡。微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131

    8026 人正在学习 去看看 秦子恒

一、微信配置:
参考地址:https://testerhome.com/topics/6871

1.打开微信,设法打开网址 http://debugx5.qq.com (推荐直接把这个网址发给文件传输助手,然后就可以直接打开链接了)
2.在打开的网页中选择 【信息】->【TBS settings】,勾选 【是否打开 TBS 内核 Inspector 调试功能】,并点击提交按钮
3.微信提示需要重启,点击重启

二、手机打开USB调试功能

三、PC端配置
1.PC上安装adb驱动程序,
下载地址:https://pan.baidu.com/s/1hrRfkVi, 官网地址:http://adbdriver.com/downloads/
2.安卓手机连上PC,安装驱动

四、调试
参考:http://www.cnblogs.com/JinQingsong/p/6591830.html
1.PC连接上手机,手机允许USB调试
2.PC打开Chrome,输入:chrome://inspect/#devices
3.手机上,在微信中打开一个H5页面,就可以正常调试了
4.如果chrome inspect调试时,弹出的界面为空白,那么编辑hosts文件,添加:
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com

2016-06-29 11:12:56 ddwendy 阅读数 9258
  • 微信h5支付开发-php开发微信h5支付demo

    会员免费看,http://edu.csdn.net/lecturer/842右侧可办理会员卡。微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131

    8026 人正在学习 去看看 秦子恒

H5这个由HTML5简化而来的词汇,正通过微信广泛传播。H5是集文字、图片、音乐、视频、链接等多种形式的展示页面,丰富的控件、灵活的动画特效、强大的交互、实现信息传播,非常适合通过手机的展示、分享。也因其灵活性高、开发成本低、制作周期短的特性使其成为当下企业营销的不二利器,常见于企业宣传、活动推广、产品介绍、会议邀请、公司招聘等。

下面就给大家介绍如何通过应用之星网站轻松制作微信H5页面简单几步操作,一个酷炫的H5页面将呈现在大家眼前。

第一步: 登陆网站点击“应用制作”,进入制作页面。

第二步:选择高级模式,点击+ 创建新应用。

第三步: 进入制作页面。九个控件,通过点击添加到制作界面,控件的选择使用按照你的需求进行。简单介绍一下每个控件:

文本控件:用来输入文字的,输入文字内容要在右边的窗口进行输入;

图片控件:是用来添加图片的。

按钮控件:是用来制作按钮的

音乐控件:用来添加音乐的

视频控件:用来添加视频的

链接控件:用来加网址的

拨号控件:用来添加电话号码的

表单控件:用来做调查,投票等这类收集信息的 

地图控件:用来定位地址的。

关于九大控件具体使用方法,请看教程:http://www.appstar.com.cn/help/course.html

第四步:等你一切制作好后,点击保存,发布,即可生成H5页面。

第五步:发布后,你将看到预览页面,其中Web就是你要的H5页面,微信扫描二维码将看到页面的内容,同时也可以分享到你的朋友圈。

如果你想在生成H5页面的同时,也想生成Android app,那么请看这篇教程:应用之星能生成APP吗?怎样生成?

第六步:如果你还想修改你的内容,请直接去个人中心的应用管理里面进行修改,重新发布即可完成内容的更新。

最后跟大家分享一下我做的微信H5页面,相信你们会比我做的更好!

2017-10-11 11:53:45 Liutt55 阅读数 2917
  • 微信h5支付开发-php开发微信h5支付demo

    会员免费看,http://edu.csdn.net/lecturer/842右侧可办理会员卡。微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131

    8026 人正在学习 去看看 秦子恒

(如需完整代码,开发遇到什么问题,可与本人联系,代码给大家下载并帮你解决问题,微信号:1131237188)

1.公众号开发,首先需要微信公众号的appId,secret 相当于账号密码

2.到公众号后台配置域名,微信用户授权,微信支付目录(在公众号平台配置不了,要到商户后台配置)

3.配置好了之后就可以开发了,直接上代码

微信用户授权

如果文章对您有帮助,请扫描最底下的二维码赞赏,你的支持是我最大的动力谢谢!

/**
* Desc:请求微信接口URL1获取code跳转到redirect_url,请求微信接口URL2获取openId
* param:
* return:openid
* Author:LiuChuanting
* Date:2017/9/14
**/
public void getUrlCode(){
String status = this.getRequest().getParameter("status");
if(StringUtils.isNotBlank(status)){
CacheKit.put("reder", "status_code","1");
}
String url = Constant.WECHAT_INFO.URL1;
   String appid= Constant.WECHAT_INFO.APP_ID;
   String REDIRECT_URI = Constant.WECHAT_INFO.REDIRECT_URL;
   url  = url.replace("APPID",ToolUtil.str2Encode(appid)); 
   url  = url.replace("REDIRECT_URI",ToolUtil.str2Encode(REDIRECT_URI));
   //getUserInfo();
   this.redirect(url);
}

/**
* Desc:请求微信接口URL2获取openId
* param:code
* return:无
* Author:LiuChuanting
* Date:2017/9/14
**/
public void getUrlOpenid(){
String code = this.getPara("code");
String openId = HttpClientConnectionManager.getOpendId(code);
this.setAttr("openId",openId);
String status = CacheKit.get("reder","status_code");
if("1".equals(status)){
//从菜单进入个人中心
CacheKit.remove("reder","status_code");
this.render("/admin/page/redirectCenter.jsp");
}else{
//去下单用户授权
this.render("/admin/page/redirect.jsp");
}

}

用户授权原理是后台获取openid 返回到第三方页面 在第三方页面进行跳转到H5页面,并且带上openId ,一般我们放到cookie

 

<script type="text/javascript"> 
function setCookie(key, value) {   
if(!key) return;
var option = {
Domain: "",
Path: "/"
};
if(/(\.cn|\.com)/.test(window.location.host)) {
var tmp = window.location.host.split("\.");
var t = tmp[tmp.length - 1].split(":");
option.Domain = "." + tmp[tmp.length - 2] + "." + t[0];
}
if(typeof(value) === "object") {
value = JSON.stringify(value);

var tmp = "";
for(var s in option ){
tmp += ";" + s + "=" + option[s]; 
}

document.cookie = key + "=" + escape(value) + tmp;
   /*  var Days = 30;  
    var exp = new Date();  
    exp.setTime(exp.getTime() + 60 * 5000);//过期时间5分钟  
   */
    //document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();  
}
setCookie("openId",'${openId}');
window.location.href = "http://wechat.qzt360.com/page/index.html";
 

</script>

获取微信用户的基本信息,根据页面传过来的openId查询ACCESS_TOKEN

在根据获取的ACCESS_TOKEN请求微信服务器获取用户信息并然后返回JSONObject对象

/**
* Desc:获取微信用户信息
* param:openid
* return:无
* Author:LiuChuanting
* Date:2017/9/14
**/
public void getUserInfo(){
String openId = getOpenId();
   String user = HttpClientConnectionManager.getUserInFo(openId);
   renderRb(user);
}

/**
* Desc:获取cookie openId
* param:
* return:无
* Author:LiuChuanting
* Date:2017/9/21
**/
public String getOpenId(){
String openId = "";
   javax.servlet.http.Cookie[] cookies = this.getRequest().getCookies();
   for(javax.servlet.http.Cookie cookie : cookies){
       if(cookie.getName().equals("openId")){
        openId = cookie.getValue();
       }
    }
return openId;
}

/**
* Desc:获取cookie 订单编号
* param:
* return:订单编号
* Author:LiuChuanting
* Date:2017/9/21
**/
public String getOrderCode(){
String orderCode = "";
   javax.servlet.http.Cookie[] cookies = this.getRequest().getCookies();
   for(javax.servlet.http.Cookie cookie : cookies){
       if(cookie.getName().equals("orderCode")){
        orderCode = cookie.getValue();
       }
    }
return orderCode;
}

获取access_token的原理是 先去缓存拿 如果缓存为空,去请求微信服务器,并更新到缓存中,如果从缓存拿到不为空 根据access_token请求用户信息,报access_token过期(默认两个小时过期)再去请求拿access_token并更新到缓存(获取access_token需要公众号的appid和secret的两个参数就可以请求到)

//根据用户ID和token获取用户信息
public static String getUserInFo(String openId){
DefaultHttpClient client = new DefaultHttpClient();
JSONObject jsonObject = null;
Object token = CacheKit.get("ACCESS_TOKEN","token");
//第一次请求token为空,需要去获取
if(token == null){
String accessToken = HttpClientConnectionManager.getAccessToken();
token = accessToken;
//token放到缓存
CacheKit.put("ACCESS_TOKEN","token", accessToken);
}
String url = Constant.WECHAT_INFO.GET_USERINFO_URL;
url = url.replace("ACCESS_TOKEN",token.toString()).replace("OPENID",openId);
HttpGet get = HttpClientConnectionManager.getGetMethod(url);
HttpResponse response;
try {
response = client.execute(get);
String jsonStr = EntityUtils.toString(response.getEntity(), "utf-8");
jsonObject= (JSONObject) JSON.parse(jsonStr);
if(jsonObject.get("errcode") != null){
//token过期重新获取
String accessToken = HttpClientConnectionManager.getAccessToken();
//token放到缓存
CacheKit.put("ACCESS_TOKEN","token", accessToken);
getUserInFo(openId);
}
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return jsonObject.toString();
}

微信开发需要的一些参数

/**
* 微信接口参数snsapi_userinfo/snsapi_base
*/
public static class WECHAT_INFO {
public static final String APP_ID = ""; //公众号ID
public static final String SECRET= ""; //公众号秘钥
public static final String ACCESS_TOKEN= "NaR8fNK4LXfaqUekYQhViOpEszPo8mIszyWYA58hKtF5hdxW_0ropKxmR4VeThq8jspiA8Y76-fn8bZZOTnDcG5mCle0ifd19IZPqVED0UCz81dm3P7cpYK3TbZh-HtiHUAcAFAWJP"; //公众号token
public static final String URL1= "https://open.weixin.qq.com/connect/oauth2/authorize?"
+ "appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";//获取code的url
public static final String REDIRECT_URL= "http://wechat.qzt360.com/api/weTrack/getUrlOpenid";//重定向的本地URL返回code
public static final String URL2= "https://api.weixin.qq.com/sns/oauth2/access_token?appid=AppId&secret=AppSecret&code=CODE&grant_type=authorization_code";//获取用户openid的URL
public static final String GET_TOKEN_URL= "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";//获取用户公众号token
public static final String GET_USERINFO_URL= "https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID";//获取用户信息
}
/**
* 微信支付参数
*/
public static class WECHAT_PAY {
public static final String CALLBACK_URL = "http://wechat.qzt360.com/api/weTrack/getPayResult"; //请求支付后回调路径
public static final String DESCRIPTION = "企智通设备购买"; //商品描述
public static final String ATTACH = "qztgm"; //附加数据
public static final String MCH_ID = "1488893999"; //商户号
public static final String USER_IP = "192.168.1.1"; //用户终端IP
public static final String PAY_KEY= "BA6B005BEF79E7B95F3E097887HGHGH"; //支付KEY
public static final String SIGN_TYPE= "MD5"; //签名类型
public static final Integer LOGISTICE_MONEY= 15; //运费
public static final String ORDER_URL= "https://api.mch.weixin.qq.com/pay/unifiedorder"; //统一下单URL
}

接下来就是微信支付接口了,支付接口非常简单,首先要先预下单去请求微信服务器,返回prepay_id,通过这个ID进行封装,和生成签名返回给H5页面调用微信支付页面弹窗支付密码的窗口,支付成功后 进行回调修改后台业务状态就OK了。

/**
* Desc:微信支付获取支付配置参数
* param:code
* return:无
* Author:LiuChuanting
* Date:2017/9/19
**/
public void getPayConfig(){
String ipurl = this.getRequest().getRemoteAddr();
String openId = getOpenId();
String orderCode = getOrderCode();
JSONObject json = new JSONObject();


   try {
   //调用微信接口统一下单,获取prepayId
String prepayId = WeChatService.me.getPrepayId(openId,ipurl,orderCode);
//生成支付参数返回到页面请求
json = WeChatService.me.createPayConfig(prepayId);
} catch (Exception e) {
logger.error(e.getMessage());
}
renderRb(json);
}

  /**
     * 统一下单
* @param ipurl 
* @param orderCode2 
     * @Title: unifiedOrder 
     * @Description: TODO 
     * @param: @param openId 微信用户openId
     * @param: @param callbackUrl 回调路径
     * @param: @return
     * @return: PrepayId
     */
public String getPrepayId(String openId, String ipurl, String orderCode) {
Record order = Order.me.selectOrderDetail(orderCode);
Integer price = order.getInt("pay_money");
UnifiedOrder unifiedOrder = new UnifiedOrder();
       unifiedOrder.setAppid(Constant.WECHAT_INFO.APP_ID);
       unifiedOrder.setAttach(Constant.WECHAT_PAY.ATTACH);


       unifiedOrder.setBody(Constant.WECHAT_PAY.DESCRIPTION);
       unifiedOrder.setMch_id(Constant.WECHAT_PAY.MCH_ID);


       String nonce = UUID.randomUUID().toString().substring(0, 30);
       unifiedOrder.setNonce_str(nonce);
       unifiedOrder.setNotify_url(Constant.WECHAT_PAY.CALLBACK_URL);


       unifiedOrder.setOpenid(openId);
       unifiedOrder.setOut_trade_no(orderCode);


       unifiedOrder.setSpbill_create_ip(ipurl);
       unifiedOrder.setTotal_fee(1);
       
       String sign = createUnifiedOrderSign(unifiedOrder);
       unifiedOrder.setSign(sign);
       unifiedOrder.setSign_type(Constant.WECHAT_PAY.SIGN_TYPE);


       /**
        * 转成XML格式
        */
       String xml = XmlKit.getBeanXml(unifiedOrder);


       String response = null;
try {
response = HttpConnection.post(Constant.WECHAT_PAY.ORDER_URL, xml);
} catch (Exception e) {
e.printStackTrace();
}
       Map<String, String> responseMap = XmlKit.getXml2Map(response);


       return responseMap.get("prepay_id");
}

注意签名的参数要跟请求统一下单的参数要保持一致除了key,sign以外,因为你自己生成的签名,和你统一下单的参数一起请求微信服务器接口,微信根据你的参数也生存一个签名,然后跟你的签名进行对比,如果不一致会返回 “签名错误” 状态信息

  /**
     * 获取统一下单签名
     * @Title: createUnifiedOrderSign
     * @Description: TODO
     * @param @param unifiedOrder
     * @param @return    
     * @return String    
     * @throws
     */
    public String createUnifiedOrderSign(UnifiedOrder unifiedOrder){
        StringBuffer sign = new StringBuffer();
        sign.append("appid=").append(unifiedOrder.getAppid());
        /*sign.append("&attach=").append(unifiedOrder.getAttach());*/
        sign.append("&body=").append(unifiedOrder.getBody());
        sign.append("&mch_id=").append(unifiedOrder.getMch_id());
        sign.append("&nonce_str=").append(unifiedOrder.getNonce_str());
        sign.append("&notify_url=").append(unifiedOrder.getNotify_url());
        sign.append("&openid=").append(unifiedOrder.getOpenid());
        sign.append("&out_trade_no=").append(unifiedOrder.getOut_trade_no());
        sign.append("&spbill_create_ip=").append(unifiedOrder.getSpbill_create_ip());
        sign.append("&total_fee=").append(unifiedOrder.getTotal_fee());
        sign.append("&trade_type=").append(unifiedOrder.getTrade_type());
        sign.append("&key=").append(Constant.WECHAT_PAY.PAY_KEY);
        return DigestUtils.md5Hex(sign.toString()).toUpperCase();
    }

微信支付回调

    /**
     * 获取支付配置
     * @Title: createPayConfig
     * @Description: TODO
     * @param @param preayId 统一下单prepay_id
     * @param @return 返回json参数到H5页面调起微信支付
     * @param @throws Exception    
     * @return JsAPIConfig    
     * @throws
     */
    public JSONObject createPayConfig(String prepayId){
    JsAPIConfig config = new JsAPIConfig();
    JSONObject json = new JSONObject();
    try {
            String nonce = UUID.randomUUID().toString();
            String timestamp = Long.toString(System.currentTimeMillis() / 1000);
            String packageName = "prepay_id="+prepayId;
            StringBuffer sign = new StringBuffer();
            sign.append("appId=").append(Constant.WECHAT_INFO.APP_ID);
            sign.append("&nonceStr=").append(nonce);
            sign.append("&package=").append(packageName);
            sign.append("&signType=").append(config.getSignType());
            sign.append("&timeStamp=").append(timestamp);
            sign.append("&key=").append(Constant.WECHAT_PAY.PAY_KEY);
            String signature = DigestUtils.md5Hex(sign.toString()).toUpperCase();


            json.put("appId",Constant.WECHAT_INFO.APP_ID);
            json.put("timeStamp",timestamp);
            json.put("nonceStr",nonce);
            json.put("package",packageName);
            json.put("signType",config.getSignType());
            json.put("paySign",signature);
} catch (Exception e) {
logger.error(e.getMessage());
}
        return json;
    }

    /**
     * 微信支付回调页面
     * @Title: wechatPayNotify
     * @Description: TODO
     * @param @param request
     * @param @param trade_status
     * @param @param out_trade_no
     * @param @param trade_no    
     * @return void    
     * @throws
     */
    public String getPayResult(){
    try {
            Map<String, String> map = XmlKit.getCallbackParams(this.getRequest());
            if (map.get(Constant.RESULT_CODE).toString().equalsIgnoreCase(Constant.STATUS)) {
            //这里写成功后的业务逻辑
            WeChatService.me.finishOrder(map,0);
            logger.equals("支付成功");
            }else{
            logger.equals("支付失败");
            WeChatService.me.finishOrder(map,1);
            }
       } catch (Exception e) {
      logger.error(e.getMessage());
       }
return XmlKit.getPayCallback();
    }

如果文章对您有帮助,请扫描最底下的二维码赞赏,你的支持是我最大的动力谢谢!

 

2016-01-22 17:36:17 qq_20379925 阅读数 1389
  • 微信h5支付开发-php开发微信h5支付demo

    会员免费看,http://edu.csdn.net/lecturer/842右侧可办理会员卡。微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131

    8026 人正在学习 去看看 秦子恒

大神可以直接略过本贴分为3个步骤  

1.申请微信订阅号并绑定自己的微信   

绑定过程   

申请地址 :https://mp.weixin.qq.com/

(1).申请帐号  

 












                       (2).绑定微信 




 2.下载开发工具和文档  地址:http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

微信扫扫登录   就可以访问你想要看的网址了   

                           

2019-08-04 14:00:04 zwkkkk1 阅读数 509
  • 微信h5支付开发-php开发微信h5支付demo

    会员免费看,http://edu.csdn.net/lecturer/842右侧可办理会员卡。微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131

    8026 人正在学习 去看看 秦子恒

最近在项目中接手微信环境h5页面的开发,主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。

目前项目暂时告一段落,希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~

由于微信环境、sdk的限制,在微信环境下如何有更加良好的调试体验还是有一些坑的,本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法(由于没有苹果手机,所以在开发自测时多以安卓系统为主要的测试环境)。

1.使用 Chrome 模拟移动设备进行调试

1.1 简单介绍

Device Mode 可以近似模拟出网页在移动设备上的显示效果,就是下面红框所示的,可以说是最常用的移动端 h5 调试方式,这里不过多进行介绍。

在这里插入图片描述

在项目中因为要在微信环境下调用sdk,其余浏览器不能调用相关sdk功能,所以会根据不同的 User Agent 将 h5 页面分为普通浏览器环境微信环境有不同的业务逻辑(当然,根据不同的系统也会分 iOSAndroid )。

然而 Chrome Device Mode 只有如下的一些预设机型:

在这里插入图片描述

1.2 添加 User Agent 模拟微信环境

所以这里我们需要自己添加机型去模拟出微信环境,打开 chrome 开发者工具下面是简单的步骤示意图:

在这里插入图片描述

在这里插入图片描述

在图2第三个红框中加上 User Agent

Mozilla/5.0 (Linux; Android 7.0; MI 5s Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/64.0.3282.137 Mobile Safari/537.36 wxwork/2.4.16 MicroMessenger/6.3.22 NetType/WIFI Language/zh

这是我用的安卓系统微信环境的 User Agent,网上还可以搜到许多,也有iOS系统微信环境的,

加上之后就可以切换到对应预设机型进行调试啦~

1.3 简单的使用体验总结

总的来说,在 Device Mode 中基本不能调试微信 js-sdk 功能,微信支付、微信授权登录一般也有限制,那么能拿它来做啥呢?

因为项目中会根据微信环境普通浏览器环境有一些不同的 UI 样式,重新加载的速度个人感觉是今天介绍的方法中算是最快的,单纯以调整 UI 的目的来说体验是最好的,而且通过修改虚拟设备的宽高调试页面在不同设备上的 UI 效果。

2. 使用微信web开发者工具

微信官方推出的 web 开发者工具,可以通过模拟微信客户端的表现,使得开发者方便地在 pc 上进行开发和调试工作,下面是官方手册地址,有详细的介绍和入门教程,这里就不多加赘述

传送门

2.1 简单地聊聊使用体验

微信web开发者工具集成了 Chrome 开发者工具,可以像上面介绍的一样用来进行一些 UI 样式的调试

在这里插入图片描述

此外微信web开发者工具最大的特点是可以模拟 JSSDK 在微信客户端中的请求,并且可以直观的看到请求结果,如下图所展示的:

在这里插入图片描述

这一点真的很赞,可以直观地看到每次调用 JSSDK api 输入参数和请求结果。虽然微信 JSSDK 也可以开启调试模式,不过它是将调用的 所有 api 的返回值在客户端中 alert 出来,这种调试体验真的不是很好

不过因为是在 pc 端进行模拟,一些如扫码、定位、摇一摇等比较复杂的 sdk 功能无法进行模拟调试

2.2 再来唠唠移动调试的体验

微信 web 调试工具也带了真机调试功能,针对 Android 提供了 X5 Blink 调试和普通调试两种方式。

在开发中首先学习使用的是普通调试,简单来说就是借助 weinre 让你可以进行真机无线调试,下面是基本的调试界面:

在这里插入图片描述

最常用的功能有检查dom元素、查看network请求和console窗口,就是一个简陋版 chrome devtools,最大的劣势是不能进行断点调试,综合调试体验不如后面要介绍的 X5 Blink 调试

emmm… 这里要介绍的基于 X5 Blink 的真机调试不是微信 web 调试工具自带的那个。不知道为啥我在微信 web 调试工具中 X5 Blink 内核调试 的调试均以失败告终。只能使用另一种基于 X5 Blink 的真机调试方法。

3. x5 内核 + Chrome://inspect 进行微信环境 h5 真机调试

因为对底层原理不甚了解,所以此节着重介绍一些配置的步骤,也会贴出一些比较好的学习文章链接。

下面是谷歌官方对 Android 远程调试的介绍,可以自行学习:

Android 设备的远程调试入门

对 X5 内核的介绍:

X5 浏览器内核调研报告

3.1 打开微信 TBS 调试

微信进入下面的网址:http://debugx5.qq.com,或者扫下面的二维码

可能会有错误信息,先退出来,按照错误提示依次访问几个网址

  1. 进入 http://debugmm.qq.com/?forcex5=true

  2. 进入 http://debugtbs.qq.com 选择 “安装线下内核”

  3. 重新扫上面的码,可以进入下面的页面,选择 “打开TBS内核Inspector调试功能”

  4. 然后 USB 连接手机、电脑,打开开发者模式,打开 USB 调试,然后在 Chrome 中进入 chrome://inspect/#devices 页面,可以看到下面的页面

在这里插入图片描述

然后就可以选择对应页面 inspect,就可以开始真机调试,而且完美拥有 Chrome devtools 的功能

微信H5支付

阅读数 1705

没有更多推荐了,返回首页