T_one

T_one 查看完整档案

深圳编辑  |  填写毕业院校xxx  |  web python 编辑 github.com/liujianxi 编辑
编辑

抬头看看天,低头写写bug

个人动态

T_one 收藏了文章 · 2020-11-07

全球的weex资源都在这里

WeeX FAQ

QQ:

  • Weex大前端 516682889
  • Weexbox: 943913583

WeeX相关资源

专门为 Weex 前端开发者打造的一套高质量UI框架

  • ](https://mp.weixin.qq.com/s/at...

  • 知识树

    重点关注的知识点

    • 页面传参
    • Native-JS通信

      • JS 调用Native
      • Native调用JS
    • 屏幕适配
    • 配置下发
    • 降级
    • 集成到app (Native 接入)

      • 在Android方面,我们把weex的接入放入了自定义的WeexFragment。另外,新建WeexActivity,引用WeexFragment。这样使用起来更灵活。
      • 在iOS方面,我们把weex的接入放入了自定义的WeexViewController。
    • 分辨率和尺寸

      Weex 对于长度值目前只支持像素 px 值,还不支持相对单位(em、rem),需要 pt 和 px 的换算
      在 Weex 中定义的默认的屏幕宽度是750
    • 通信

      • native 到 Weex js 通信
      • Native 产生的一些事件,是怎么传回给 JS
      • Weex 的事件传递

        一是 Module 模块的 callback,二是通过 Component 组件自定义的通知事件
      • Weex js 到 native 之间的通信
      • Weex js 之间的通信
      • Web 到 Weex js 通信
      • event

        • 轻扫事件
        • 长按事件
        • 拖动事件
        • 通用触摸事件
        • Appear 事件
        • Disappear 事件
        • Page 事件
      • 生命周期事件

    工程化

    devops

    • 如何构建发布流程

    • 如何解除App组件之间和App页面之间的耦合性?
    • 1.页面降级
    • 性能监控和埋点
      1. 增量更新和全量更新
      1. 首屏加载时间极致优化

    Router

    • App之间跳转实现

      • 自家的一系列App之间如何相互跳转?
    • 从外部跳转到App内部一个很深层次的一个界面。
    • 如何在App任何界面都可以调用同一个界面或者同一个组件?
    • 如何能统一iOS和Android两端的页面跳转逻辑?甚至如何能统一三端的请求资源的方式?
    • 组件如何拆分?
    • Native 产生的一些事件,是怎么传回给 JS

    使用场景

    • 集成 Weex 到已有应用
    • 用weex实现活动模块
    • 原生的iOS工程局部页面嵌入weex的view
    • 如何在H5中使用

    扩展

    • Module 扩展 非 UI 的特定功能。
    • Component(UI)
    • Adapter
    • handler
    • 扩展 Android 的功能
    • 扩展 iOS 的功能
    • 使用 swift 扩展 iOS 的功能
    • 扩展 HTML5 的功能

      扩展 Web 渲染器
      weex-vue-render
    • 《拓展JS framework》

    最佳实践

    需要优化的内容

    • 自定义网络adapter / handler,可以针对网络请求进行拦截修改

      挂接自己的 http 适配器,适度复用 Native 的 http 实现并定制到 weex 中,同时这也是打通 native 登陆凭证和 weex 登陆凭证的必要一环。
      • wb-network [Weexbox]
    • 自定义图片适配器(adapter / handler),可以对图片进行压缩和缓存处理
    • UI增强:confirm、toast、alert
    • 路由:自定义路由,跳转规则

      • 自定义a标签component 拦截url进行跳转
      • weex native webview 无缝跳转
    • 相对地址 热更新 & 预加载weex-JS页面 提高渲染速度

      为了提升渲染效率,我们会提前把js文件下载到本地,使用时直接加载本地文件
      • 静态资源的缓冲和缓冲更新策略配置
      • SonicRuntime VasSonic是腾讯开源的一套完整的Hybrid方案,Github地址: VasSonic,官方定义是一套轻量级和高性能的Hybrid框架,专注于提升H5首屏加载速度。
      • 预加载: 静态资源离线预推
    • 动态缓存:storage module增强

      • wb-storage [Weexbox]
    • 页面局部刷新

    工程化

    • 脚手架: 对于公司接入来说我们不太会使用官方提供的脚手架工具,一般都是自己实现

      • webpack
    • 建立组件库
    • 错误监控

    参考: 「大前端」Weex在达人店的一年实践

    A: 官方文档是最好的入门

    Q: 运行weex github上的代码报错:
    CMake Error: CMAKE_C_COMPILER not set, after EnableLanguage
    CMake Error: CMAKE_CXX_COMPILER not set, after EnableLanguage
    设置环境变量(mac下   ~/.bash_profile)
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export ANDROID_NDK=$HOME/Library/Android/sdk/ndk-bundle
    source ~/.bash_profile
    
    同时修改weex_sdk/build.gradle 去掉armeabi(armeabi和mips已经不被cmake支持了)
    
    ndk {
                abiFilters "armeabi-v7a","x86"
            }

    Q: 如何从零开始,创建weex标准项目

    第一步:准备开发环境

    # 请确保你已经安装了 Node.js,然后全局安装 weex-toolkit。
    npm install weex-toolkit -g
    
    如果要添加ios或android支持,需要安装xcode或android studio

    创建一个空的Weex + Vue.js 模板项目:

    weex create awesome-app

    运行项目

    cd awesome-app
    npm install
    npm start
    或
    weex run web
    
    然后工具会启动一个本地的 web 服务,监听 8081 端口。你可以打开 http://localhost:8081 查看页面在 Web 下的渲染效果。 源代码在 src/ 目录中,你可以像一个普通的 Vue.js 项目一样来开发.

    添加特定ios或android支持

    默认情况下 weex create 命令并不初始化 iOS 和 Android 项目,需要执行以下命令:安装相关组件
    weex platform add ios
    weex platform add android

    在模拟器或真实设备上启动应用

    weex run ios
    weex run android
    weex run web

    Q: 如何在自己的app项目中d导入weex官方正式发布的Weex SDK(集成 Weex 到已有应用)

    WEEX 会在jcenter 定期发布稳定版本。jcenter
    注:国内可能需要翻墙

    android集成:
    修改build.gradle 加入如下基础依赖(版本请替换为最新版)

    compile 'com.android.support:recyclerview-v7:23.1.1'
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.alibaba:fastjson:1.1.46.android'
    compile 'com.taobao.android:weex_sdk:0.5.1@aar'

    iOS集成
    在 Podfile 文件中添加如下内容

    pod 'WeexSDK', '0.17.0'   ## 建议使用WeexSDK新版本
    
    pod install

    Q: 如何在自己的app项目中将Weex SDK源码作为模块导入项目中(集成 Weex 到已有应用)

    一般来说,直接使用官方正式发布的week-sdk库(android通过jcenter引入sdk,ios通过cocoaspod引入sdk),只有希望使用最新的weex功能时才需要将sdk源码导入到自己的app中(作为模块和app一起编译)。能够快速使用WEEX最新功能,可以根据自己项目的特性进行相关改进。

    Andorid通过以下步骤import SDK

    下载源码 
    git clone https://github.com/apache/incubator-weex.git
    
    创建 Android 工程。
    
    通过以下路径引入 SDK Module:
    File->New-Import Module-> 选择 WEEX SDK Module(weex/android/sdk) -> Finish
    
    设置app 的 build.gradle,添加如下依赖:
    compile project(':weex_sdk')
    

    iOS通过以下步骤import SDK

    自己编译好SDK后,将sdk(framework文件)导入自己app工程:
    ,参考官方文档:https://weex.apache.org/cn/guide/integrate-to-your-app.html
    

    Q: 如何自己编译week SDK

    一般来说,推荐使用官方正式发布的week-sdk库(android通过jcenter引入sdk,ios通过cocoaspod引入sdk),只有希望使用最新的weex功能时才需要自己手工编译SDK

    编译sdk方法有两个,一种是用提供的编译脚本进行自动编译(请参考代码库中的HOW-TO-BUILD.md),一种是用android studio或xcode手工编译

    Andorid通过以下步骤编译并生成 SDK

    下载源码 
    git clone https://github.com/apache/incubator-weex.git
    
    在Android Studio中打开Weex SDK
    
    选择打开已存在的andorid项目:
    (weex/android/sdk) 
    
    选中代码目录中的weex_sdk模块
    Build -> make moudle weexsdk
    
    编译后的sdk:weex_sdk-debug.aar(位于weex/android/sdk/build/outputs/aar/) 

    iOS通过以下步骤编译 SDK

    git clone https://github.com/apache/incubator-weex.git
    
    打开 WeexSDK.xcodeproj in weex/ios/sdk
    切换到WeexSDK_MTL target
    
    编译当前target,可以直接用快捷键 ⌘ + b
    
    最后找到产物在 weex/ios/sdk/Products 目录

    Q: 能否将vue项目结构转换成weex项目?

    Q: Weex中的组件(component),模块(module),扩展,三者有何区别?

    组件一般指的是UI组件,module相当月插件,提供一些工具方法。扩展指的是开发组件的过程


    Q: 如何编译weex的playground app?

    直接用android studio打开 android/palyground项目即可


    Q: 解决iOS WeexSDK与WechatSDK中枚举WXLogLevel命名冲突

    https://bmfe.github.io/2018/0...


    工程化

    将 components 抽离出来,放到内部私有 npm 仓库中以 npm 包的形式去维护。
    也就是我们将 spon-ui(内部组件库名称)作为单独的一个项目去维护,加以约束形成组件库开发规范

    作者:尚妆产品技术刊读
    链接:https://juejin.im/post/5a2d3d...

    WeexBox FAQ


    Q: 如果报错说lotties找不到某些文件,可能是需要升级cocaspods到1.6.0
    could not build Objective-C module 'Lottie
    sudo gem install cocoapods
    Q: ERROR: Failed to download Chromium r624492! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
    查看原文

    T_one 回答了问题 · 2020-06-04

    解决横向滚动的 li 被选中后跳转新页面,如何实现将选中的 li 定位到可视区域?

    既然是公共组件,点击“星秀”的时候记下这个组件的偏移量,到下一个页面的时候重新定下位

    关注 4 回答 4

    T_one 回答了问题 · 2020-06-04

    解决微信小程序中Promise,碰到setInterval,clearInterval的困惑,能解释下么?

    倒计时结束后才resolve的,这时候再运行promise.then

    关注 4 回答 3

    T_one 回答了问题 · 2020-05-28

    解决vue 点击标题 下拉展示数据

    secondaryNodeShow这个变量弄成一个数组,secondaryNode这个方法要传入index,就知道现在操作的是哪一项了。

    关注 2 回答 3

    T_one 回答了问题 · 2020-05-15

    vue如何接收后台传过来的图片呢?

    这种图片拼接就有问题啊,怎么是本地域名+图片id,我看你都打不开这张图,图片地址有误

    关注 7 回答 6

    T_one 回答了问题 · 2020-05-15

    在vue项目中 遇到一个问题

    点击了高亮可以使用a:visited,回到首页的时候滚到顶部。是使用了keep-alive吗,那在activated方法里面写个方法滚到顶部就行

    关注 3 回答 2

    T_one 回答了问题 · 2020-05-07

    vue 路由跳转 url更新了 但是视图没变

    有时候目标页面有语法问题,也是这种现象,可以检查下

    关注 6 回答 5

    T_one 回答了问题 · 2020-05-07

    vue axios 封装请求 遇到一个问题

    你现在接口返回code=400的时候,其实error.response.status=200,response并不会走error

    关注 4 回答 3

    T_one 赞了文章 · 2020-04-03

    【CSS】超出两行显示省略号

    看到了个问题,问题地址:https://segmentfault.com/q/10...
    目前没想到怎样不用行高解决问题,但是想到了之前工作中遇到的文本超出两行显示省略号,所以从之前的代码里翻出代码段记录下来,便于之后使用。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
          *{
            margin: 0;
            padding: 0;
          }
          .example{
            margin-right:20px;
            font-size: 20px;
            /*line-height: 1.5em;*/
          }
          .warp2{
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
          }
        </style>
      </head>
      <body>
        <div id="test" class="example warp2">
          如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文
        </div>
        <script type="text/javascript">
          
        </script>
      </body>
    </html>
    
    查看原文

    赞 1 收藏 2 评论 0

    T_one 收藏了文章 · 2020-04-03

    【CSS】超出两行显示省略号

    看到了个问题,问题地址:https://segmentfault.com/q/10...
    目前没想到怎样不用行高解决问题,但是想到了之前工作中遇到的文本超出两行显示省略号,所以从之前的代码里翻出代码段记录下来,便于之后使用。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
          *{
            margin: 0;
            padding: 0;
          }
          .example{
            margin-right:20px;
            font-size: 20px;
            /*line-height: 1.5em;*/
          }
          .warp2{
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
          }
        </style>
      </head>
      <body>
        <div id="test" class="example warp2">
          如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文
        </div>
        <script type="text/javascript">
          
        </script>
      </body>
    </html>
    
    查看原文

    认证与成就

    • 获得 94 次点赞
    • 获得 33 枚徽章 获得 1 枚金徽章, 获得 7 枚银徽章, 获得 25 枚铜徽章

    擅长技能
    编辑

    开源项目 & 著作
    编辑

    (゚∀゚ )
    暂时没有

    注册于 2017-06-29
    个人主页被 1.7k 人浏览