一、本周项目：居家大赏主会场

问题与解决

  1. 安装过程中，经常出现类似permission denied, scandir '路径名称'的错误信息？
    通过sudo chown -R username "路径名"将指定文件的拥有者改为指定的用户或组，从而获得权限。
  2. dispatch的函数参数名称与定义的参数列表必须名称一致，否则会接受不到数据
  3. setState(...): Cannot update during an existing state transition (such as within render or another component's constructor) ...
    在reducer中不能有改变状态的举动。

  4. browser-sync在命令行运行，只能从index.html文件开始，如果配置到gulp中（webpack类似），可以通过如下配置实现从不同文件开始运行服务器： 

    1
    2
    3
    4
    5
    6
    7
    // gulp
    browserSync.init({
        server:{
            baseDir:'./app',
            index:'name.html'
        }
    });

  5. 加入时间戳防止缓存 

    1
    document.write("<script type='text/javascript' src='//site.com?t=" + Date.now() + "'><\/script>");

  6. 查看埋点数据包（包括点击跳转）
    Network面板选择Perserve log，搜索m?

  7. 沉浸式标题设置: @jmfe/jm-webview：enableTransparent
  8. 直接打出人民币单位无法确保所有字体下都是双横线，可以使用¥

React模板总结

  1. React: 用于构建界面的javascript库
  2. Redux：用于协助React状态管理的工具
  3. Redux-Saga：用于管理redux应用异步操作的中间件
    对应到React会场模板中，需要修改的文件及对应功能如下：
    • components：一个文件夹为一个组件，主要涉及UI的展示和事件绑定
    • reducers: 状态声明，通常返回的是一系列数据
    • sagas：负责异步交互事件的响应函数（包括埋点，领券等等）的具体实现，其中index.js负责主线程的数据加载等事务
    • services/fetch-data.js: 拉取数据
    • constants/index.js: 一些固定参数，如pageId, UUID等等

二、有趣的实现

  1. 纯代码实现的动态图案
    01
    02
    <css-doodle /> : 一个比较新的项目，内设一些常用的图案/函数/属性。目前兼容性很差，只在最新版的chrome和safari下支持，尚未考虑fallback。
  2. 两个火焰效果
    01
    02