全球的weex资源都在这里

头像
海皮
    阅读 7 分钟
    48

    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.
    weex
    海皮
    174 声望12 粉丝
    下一篇 »
    关于跨平台技术选型的思考

    引用和评论

    推荐阅读
    头像
    Flutter 1.2 发布，添加应用内支付和 App Bundles

    海皮阅读 2.6k

    0 条评论
    得票最新