rand

rand 查看完整档案

深圳编辑井冈山大学  |  哲学 编辑前端开发  |  旷视科技 编辑 github.com/zhaobinglong 编辑
编辑

愿每个人的有生之年都能找到自己真正喜欢做的事情,并为之奋斗终生

个人动态

rand 关注了问题 · 2020-12-22

anproxy抓包,抓不到app中嵌入的h5页面的包,那些h5页面都打不开

问题描述

我用anproxy抓包,主要用的spy-debugger,它能够抓到微信网页中的所有请求,但是在app中只能抓到一些图片,抓不到具体的请求,而且h5页面打开是空白,无法显示

问题出现的平台版本及自己尝试过哪些方法

anproxy,和spy-debugger都试过,都是出现同样的问题

有大神讲解一下不

关注 2 回答 0

rand 发布了文章 · 2020-11-15

前端工程师的以太坊入门:基于Flutter开发以太坊钱包APP

开源地址

这篇博客不涉及以太坊知识的科普,单纯记录了我在用Flutter开发钱包的过程中遇到的各种小细节问题。如果有开发钱包的各位同学,可以拿去直接用,不需要授权。

github仓库地址

钱包能力

  • 新建钱包
  • 导入/导出钱包
  • 添加Token
  • 转账
  • 兑换

演示


引用字体图标

在Flutter中引用iconFont上的字体图标非常简单,从iconfont网站上下载.ttf后缀的文件。放到APP的某个目录下,比如说 fonts 文件夹下:

project/
  lib/
  ...
  fonts/
    iconfont.ttf
  pubspec.yaml 

然后在 pubspec.yaml 中配置fonts:

 fonts:
    - family: iconfont
      fonts:
        - asset: fonts/iconfont.ttf

最后就可以在iconData中直接使用字体图标了

new Icon(
  IconData(0xe648, fontFamily: 'iconfont'),
  size: 50.0, 
  color: Colors.black26
)

Flutter内置icon在线预览

在线预览: https://material.io/resources... (需要梯子)

widget缝隙

如图所示,有一个圆形容器CircleAvatar,设置背景色backgroundColor=Colors.whiteradius设置为字体图标size尺寸的一半,理想情况下图标和容器完美贴合,在真机和debug模式下图标都会出现下偏移。为了贴合在一起,更改为stack布局

// 更改前
CircleAvatar(
      backgroundColor: Colors.white,
      radius: 25.0,
      child: Icon(
            IconData(0xe648, fontFamily: 'iconfont'),
            size: 50.0, 
            color: Colors.black12
      )
);
// 更改后
Stack(
        children: <Widget>[
          Container(
            width: 50.0,
            height: 50.0,
            decoration: new BoxDecoration(
                border: new Border.all(width: 2.4, color: Colors.black12),
                color: Colors.white,
                borderRadius: new BorderRadius.all(new Radius.circular(25.0))
            ),
          ),
          Positioned(
            child:Icon(IconData(0xe648, fontFamily: 'iconfont'),
            size: 50.0, 
            color: Colors.black12)
          ),
        ],
      );

底部弹出框设置圆角

Flutter默认的弹出框是直角边框,可以利用decoration,将Container左上角和右上角设置Radius。

Container(
      decoration: new BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18),
          topRight: Radius.circular(18)
        ),
      ),
      child: Column(
        children: ...
      ),
)

生成二维码

import 'package:qr_flutter/qr_flutter.dart';

// 生成自定义二维码比较简单
// 引入qr_flutter包,传递data和size即可控制二维码的内容和尺寸
QrImage(
    data: <your data>,
    size: 100.0,
),

自定义icon打开draw

leading: Builder(
    builder: (context) => GestureDetector(
          child: new Icon(icon.menu)
          ),
          onTap: () => Scaffold.of(context).openDrawer(),
        ),

接入bugly监控

// 第一步:导入包
import 'package:flutter_bugly/flutter_bugly.dart';

// 第二步:在main函数最外层启用SDK
void main() => FlutterBugly.postCatchedException(() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
});

沉浸式状态栏

// 导包:
import 'dart:io';
import 'package:flutter/services.dart';
··· 
runApp(MyApp());  
if (Platform.isAndroid) {
    // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后,是为了在渲染后进行set赋值,覆盖状态栏,写在渲染之前MaterialApp组件会覆盖掉这个值。
    SystemUiOverlayStyle systemUiOverlayStyle =
    SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}

并发请求

在web开发环境中,经常会遇到需要同时请求多个接口,等所有接口都返回数据后进入下一步的回调。web端可以方便的使用Promise.all来实现这个需求,那么在dart的语境中,该如何实现并发请求呢?答案就是Future.wait, dart的Future非常强大,还有更多方法等待探索

demo1(){
    return true;
}
demo2(){
    return true;
}
Future.wait([
    demo1,
    demo2
]).then((list) {
   print(list); // [true, true]
}).catchError((e) {
   print(e);
}).whenComplete(() {
   print("whenComplete");
});

延迟请求

这里可以使用Future.delayed,参数就是需要延迟执行的时间,延迟的时间以毫秒为单位

Future.delayed(Duration(seconds: 1), () => {
   demo2;
});

页面加载中状态

真实项目开发中,loading效果是一定会用到的页面过渡状态。web开发的时候,前端会先准备好loading状态,当接口返回数据后,再把loading设置为false。在Flutter中,可以很方便的使用FutureBuilder实现这个效果

new Scaffold(
    body: FutureBuilder(
      /*getData是异步数据接口*/
      future: getData(), 
      builder: (BuildContext context, AsyncSnapshot<Map> snapshot) {
        /*表示数据成功返回*/
        if (snapshot.hasData) {
          Map response = snapshot.data;
          return buildPage(response);
        } else {
          return LoadingDialog();
        }
      },
));

一些常见异常

Waiting for another flutter command to release the startup lock...

进入本地Flutter的安装目录,找到\\bin\\cache下面的lockfile文件,删除该文件

参考

查看原文

赞 0 收藏 0 评论 0

rand 回答了问题 · 2020-11-15

vue 实现回车跳转到下一个输入框

这类需求最佳解决方案是利用自定义指令

// 自定义指令,实现按下enter后,光标自动跳转下一个输入框
Vue.directive('enterNextInput', {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      if(charcode == 13){
        var dom = document.getElementsByTagName("input")
        for (var i = 0; i < dom.length; i++) {
          if (dom[i] == document.activeElement) {
            if (i==dom.length) {
              return
            }
            dom[i+1].focus()
            return
          } 
        }
      }
    });
  }
});
// 使用
<input v-enter-next-input />
<input v-enter-next-input />

关注 4 回答 3

rand 关注了问题 · 2020-11-05

微信小程序如何自己写一个埋点的sdk

微信小程序如何自己写一个埋点的sdk?
思路是咋样? 如果改写微信小程序的生命周期函数?
如何拿到登录的用户信息?
如何监听从a页面跳转到b页面?

关注 2 回答 0

rand 赞了回答 · 2020-10-29

解决defer和async的区别

先来试个一句话解释仨,当浏览器碰到 script 脚本的时候:

  1. <script data-original="script.js"></script>

    没有 deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  2. <script async data-original="script.js"></script>

    async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

  3. <script defer data-original="myscript.js"></script>

    defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

接着,我们来看一张图咯:

请输入图片描述

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

此图告诉我们以下几个要点:

  1. deferasync 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

关注 70 回答 7

rand 赞了回答 · 2020-10-29

解决既然Tengine比Nginx更强大,为什么Tengine没有取代Nginx呢?

淘宝修改Nginx满足了自己的需求,开放出来给大家围观一下而已。

我一开始工作的公司是用Tengine的,后来就换成了Openresty(也就是Nginx)。

  1. 淘宝不重视Tengine的推广

  2. 中小公司的流量感受不到性能、稳定性差别

  3. 新特性也不都是大家的痛点,例:

    • 态加载模块,你自己不会用C写模块,也就用一下现成模块,不会经常编译的

    • concat,现在用webpack打包,用处就不大了,更别说以后HTTP/2普及了,就更没用了

  4. 开发落后于Nginx,更注重稳定性,例如2016年12月才合并完2016年1月26日发布nginx 1.8.1的修改,这会对那些想尝新的用户会有影响。

补个图1:

图片描述

补个链接:Comparison of the usage of Nginx vs. Tengine for websites,Tengine要取代Nginx的路还很长,普通开发者选择合适的就好。

关注 9 回答 6

rand 关注了问题 · 2020-10-29

解决既然Tengine比Nginx更强大,为什么Tengine没有取代Nginx呢?

看了一下淘宝的Tengine,确实很多新特性非常好,性能也很高效,淘宝自己都在用,说明安全性稳定性应该是没什么问题,为什么现在没有取代Nginx呢?

关注 9 回答 6

rand 赞了问题 · 2020-10-29

解决既然Tengine比Nginx更强大,为什么Tengine没有取代Nginx呢?

看了一下淘宝的Tengine,确实很多新特性非常好,性能也很高效,淘宝自己都在用,说明安全性稳定性应该是没什么问题,为什么现在没有取代Nginx呢?

关注 9 回答 6

rand 赞了回答 · 2020-10-23

Nodejs如何获取完整URL

//需要使用的模块 http   url
 当前url   http://localhost:8888/select?aa=001&bb=002
 var http = require('http');
 var URL = require('url');
 http.createServer(function(req, res){
    var arg = url.parse(req.url).query;  
    console.log(arg.aa);//返回001
    console.log(arg.bb);//返回002
    //然后就可以根据所得到的数据处理了    
 }).listen(8888);//建立服务器并监听端口

关注 6 回答 6

rand 赞了回答 · 2020-10-22

解决不使用三元运算符和 if ,如何优雅地切换变量的值?

如果值均为数字 一个非常优雅的写法 可以这样

    // 初始值
    a = val1;
    
    a = (val1 + val2) - a;
   
    // 为了防止 val1 + val2溢出可以这样
    a = (val1 ^ val2) ^ a;

    // 简洁的写法 
    a ^= val1 ^ val2; // 上面已经有人给出这个答案了

效果
image.png

关注 10 回答 11

认证与成就

  • 获得 120 次点赞
  • 获得 233 枚徽章 获得 21 枚金徽章, 获得 94 枚银徽章, 获得 118 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2015-06-19
个人主页被 2.2k 人浏览