• Server酱每月访问量过2000万,加上 PushBear 接近 3000万,但服务器开销不到400元,很多同学问我是怎么做的。

    嗯,其实因为我们用的是新浪云。新浪云是 PaaS 不是 VPS,只有网站在被访问的时候才计费,所以更省钱。如果你有多个项目,可以买一个独享 MySQL 实例共用,还能再省下一点点。

    所以如果你有需要省钱的项目,可以也考虑下Server酱的承载平台和赞助商 —— 新浪云( 可点这里微博登录后使用 )。

  • 微信扫码订阅【局域网里的神明大人】更新通知 

    showqrcode.png

  • 骨骼动画的几个小技巧

    1. 所有的骨骼都是需要有父级骨骼
    2. 画骨骼时,默认是下级,要重新指定父级时,可以先点一下父级再画
    3. 不是所有图片都需要骨骼,也不是所有骨骼都需要设置IK
    4. IK只能在一根或者两根骨骼上生效,其运动路径是唯一的
  • 转发卡片

    今天有个需求, 直接支持web端预览word,excel等文件, 查了一下很多写的比较麻烦, 这里找到一种简单的方式:

    http://view.officeapps.live.com/op/view.aspx?src=

    src后面填写你上传的文件地址, 例如:https://view.officeapps.live.com/op/view.aspx?src=http://opd9w8mwo.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%96%87%E6%A1%A3.docx

    很简单,Office都为我们做好了, 我们只需要添加一个sourceUrl就可以了。

    具体的文档:https://blogs.office.com/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

  • 方糖Dapp社区公测通知,请使用微信扫码关注后订阅。

    showqrcode.jpeg

  • React native  启用修饰符

    安装 Babel 插件 

    yarn add --dev babel-plugin-transform-decorators-legacy
    


    然后修改 .babelrc

    {
      "presets": ["react-native"],
      "plugins": ["transform-decorators-legacy"]
    }
    
  • 如果在输入内容时,键盘挡住了输入框,可以用 ScrollView 包裹到最外边,这样在键盘推上来时,界面会自动向上滚动。

  • react-native-ui-lib 的 textInput 有一个 floatingPlaceholder 属性,设置为 true 的话,会在有值是自动浮起,解决了用 PlaceHolder 当标题的问题。很好用:

    <TextInput placeholder="转入地址" onChangeText={(text)=>{this.handleChange(text,"to");}} value={this.state.to}  floatingPlaceholder={true}/>
    

    Screen Shot 2018-05-30 at 10.39.03 AM.png

  • 从交易信息中恢复 publickey 

    /**
     * ECDSA public key recovery from signature
     * @param {Buffer} msgHash
     * @param {Number} v
     * @param {Buffer} r
     * @param {Buffer} s
     * @return {Buffer} publicKey
     */
    exports.ecrecover = function (msgHash, v, r, s) {
      var signature = Buffer.concat([exports.setLength(r, 32), exports.setLength(s, 32)], 64)
      var recovery = v - 27
      if (recovery !== 0 && recovery !== 1) {
        throw new Error('Invalid signature v value')
      }
      var senderPubKey = secp256k1.recover(msgHash, signature, recovery)
      return secp256k1.publicKeyConvert(senderPubKey, false).slice(1)
    }
    
  • 关于 web3.js 保存钱包时报错:

    { [Error: Secure random number generation is not supported by this browser.

    修改 web3-eth-accounts/src/index.js 34行,将

    var cryp = (typeof global === 'undefined') ? require('react-native-crypto') : require('crypto');

    改为

    var cryp = require('react-native-crypto');

    即可。

    如果要保存钱包,需要在 global 里兼容下 localStorage,方法是在 globals.js 中加入

    global.localStorage = require('react-native-sync-localstorage');
    
  • Styled Component 使用用户定义组件

    我们知道 SC 调用系统组件是这样的:

    const ContainerBox = styled.View`
        background-color:red;
        height:100%;
        display:flex;
    `;


    但如果我们想复用我们定义好的组件,按这个写法就会报错。这时候我们只需要简单修改下语法:

    const LogoIcon = styled( Icon )`
        color:#20A0FF;
    `;


    把 . 换成 () 就好了 😋 

  • React Native 使用 SVG 作为图标 

    在方糖全栈课里边我们讲了如何通过 react-native-vector-icons 来引入字体图标,但是并没有讲到如何使用自己创造的 SVG 图案。

    一 创造 SVG 图案

    使用 Sketch 、 AI 和 AD 等矢量绘图软件都可以创造自己想要的矢量图案,并导出为 SVG 格式。

    Screen Shot 2018-05-28 at 12.20.27 PM.png

    以 Sketch 为例,选中想要输出为 SVG 格式的图像层,然后 在右下角 make exportable 后,选中 svg 格式即可。

    二 导入 IcoMoon 生成字体

    虽然 React Native 是支持 SVG 显示的,但我们可以通过把一类矢量图形做成一个字体方式来更好的管理。

    访问 IcoMoon ,点击 import Icons 把刚才到处的 SVG 导入进去。

    Screen Shot 2018-05-28 at 12.23.11 PM.png

    然后点右下角的 Generate Font 。将生成的字体 Zip 文件下载下来。

    三 导入 React Native

    将 Zip 解压后,放到项目下根下,改名为 fonts 吧。

    然后

    import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
    import icoMoonConfig from '../fonts/selection.json';
    const Icon = createIconSetFromIcoMoon(icoMoonConfig);

    这样我们的图案就被载入了。需要使用的时候和字体一样:

    <Icon name="logo" size={100}/>


    之后只要不停的去更新 fonts 下 IcoMoon 生成的字体文件就能不断添加图标了。这样的好处是所有的图标都在字体里边。开发和设计流程中只要分享下字体,图标就全了。


    PS:  zip 包中的 ttf 字体文件需要复制一份到 android/app/src/main/assets/fonts 。这个目录可能不存在,build 一次后会出来。🍩

  • flex 垂直居中

     justify-content:center;
     align-items:center;
    
  • React Native 调用 Web3(1.x) 的正确姿势


    1 创建项目

    react-native init lm1
    cd lm1

    2 安装依赖包

    yarn add node-libs-browser

    3 创建 rn-cli.config.js 脚本

    const extraNodeModules = require('node-libs-browser');
    
    module.exports = {
      extraNodeModules,
    };
    

    4 创建 global.js ,引入公用包

    global.Buffer = require('buffer').Buffer;
    global.process = require('process');
    
    if (typeof btoa === 'undefined') {
        global.btoa = function (str) {
          return new Buffer(str, 'binary').toString('base64');
        };
      }
      
      if (typeof atob === 'undefined') {
        global.atob = function (b64Encoded) {
          return new Buffer(b64Encoded, 'base64').toString('binary');
        };
      }
    

    5 在 app.js 中引入 global

    import './global';
    

    6 安装 babel-preset-es2015

    yarn add --dev babel-cli babel-preset-es2015


    安装加密用包

    yarn add react-native-crypto react-native-randombytes

    安装兼容工具

    yarn add --dev tradle/rn-nodeify

    link

    react-native link 

    生成兼容js

    ./node_modules/.bin/rn-nodeify --hack --install


    然后在 App.js 中引入

    import './shim.js'
    import crypto from 'crypto'
    


    7 安装 web3

    yarn add web3
    

    8  调用 web3 

    import Web3 from 'web3';
    
    
    ...
    
    componentWillMount() {
        const web3 = new Web3(
          new Web3.providers.HttpProvider('https://mainnet.infura.io/')
        );
      
        web3.eth.getBlock('latest').then(console.log)
      }
    

    9 启动日志

    react-native log-android

    10 运行应用

    react-native run-android



    如果报错

    added 120 packages from 133 contributors, removed 95 packages and updated 1064 packages in 156.737s
    /Users/Easy/Playground/lm1/node_modules/rn-nodeify/cmd.js:74
          if (err) throw err
                   ^
    
    Error: ENOENT: no such file or directory, open '/Users/Easy/Playground/lm1/node_modules/rn-nodeify/shim.js'
    

    报错以后怎么办呢?

    react-native link

    然后 重新装 rn-nodefiy

    yarn add --dev tradle/rn-nodeify

    再运行

    ./node_modules/.bin/rn-nodeify --hack --install

    这一次终于可以在根目录下成功生成 shim.js 了。

    PS: windows下还要装 python 和 vcbuild.exe 一堆东西…… 我电脑装不下VS了……自行测试吧 🙃

  • 使用国内镜像加速npm和yarn
  • ubuntu 安装 微软字体: 


    apt-get install ttf-mscorefonts-installer
微博一键登入