安科网

全球的weex资源都在这里

mht

mht

2019-07-01

关注 关注

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 ul

mht

mht

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Weex playground手机扫描二维码后显示network error解决

2.第一步确认没问题后，还是报network error，确认下PC上wifi的连接策略是否为专用；

xiaobo0 2019-12-29

如何把 alibaba Rax 组件转换到 React 下

背景最近接手公司的一个移动端项目，是通过 Rax 作为 dsl 开发的，在发布的时候构建多分代码，在 APP 端编译为能够运行在 weex 上的代码，在 H5 端使用降级的 weex. 这一套开发体系，看起来很完美，一次开发，三端运行。weex 相对于 H

junzaivip 2019-11-03

weex开发

一. java环境搭建，上面包文件下载里面有。在“系统变量”栏下单击“新建”，创建新的系统环境变量。

junzaivip 2019-09-08

WEEX stream.fetch() POST跨域解决

changeOrigin: true,},const API = "/api/admin/login";method: "POST",url: API,type: "json",headers:

JxMY 2019-07-01

浅谈跨平台框架 Flutter 的优势与结构

因此，开发人员迫切地希望进行应用内容的更新时，可以不更新版本，提升工作效率。原生开发一般需要技术团队对iOS、Android两个开发平台进行维护。当版本更新迭代时，开发和测试的成本都会增加。针对上述两个问题，跨平台框架应运而生。

yaonga 2019-07-01

Weex系列(9) —— Weex和安卓升级兼容

目录Weex系列(序) —— 总要知道原生的一点东东Weex系列(序) —— 总要知道原生的一点东东Weex系列 —— Hello World项目Weex系列 —— 页面跳转和通信Weex系列 —— 单页面还是多页面Weex系列 —— 老生常谈的三端统一W

kangtingting0 2019-07-01

Weex系列(7) ——踩坑填坑的总总

目录Weex系列(序) —— 总要知道原生的一点东东Weex系列(序) —— 总要知道原生的一点东东Weex系列 —— Hello World项目Weex系列 —— 页面跳转和通信Weex系列 —— 单页面还是多页面Weex系列 —— 老生常谈的三端统一W

hhbbeijing 2019-07-01

Weex系列(6) —— web组件和webview

最后一章就简单分析一下流程原理。还是言归正传吧，webview是一个基于webkit引擎、展现web页面的控件，app里面是经常用到的，weex官方提供了web组件。webview这块是比较复杂的，所以官方提供的远远不够，但是对原生又不是很熟悉，就找到组件

yaonga 2019-07-01

关于跨平台技术选型的思考

在我们进行技术架构和技术选型的时候，我们经常犯一个错误就是，试图找一个完美的解决方案即：坑少、功能多。但是，无数次惨痛经历仍然难以记住这个事实，就是，好的架构是需要迭代的。比如我们团队选择vue而不是react主要是考虑到了当前情况和团队条件以及应用场景后

凌燕 2019-07-01

WeexBox 给你最好的图片加载方式

在讲WeexBox之前，我们先来看看Weex是如何做图片加载的。Weex提供了<image>来加载图片，更具体的说，<image>有3种使用方式。相对路径是相对bundle URL的，相对路径将被重写为绝对资源路径。抛开weex的限

hhbbeijing 2019-07-01

小白学Weex（一） —— 环境搭建

Weex的环境搭建非常的麻烦，很多人可能在这一步就放弃了，包括我最开始想自学的时候。因为需要一些科学上网的方法才能保证环境正确搭建，同时还需要非常大的耐心，以下搭建方法建立在win10的基础上，其他系统环境可能会出现未知的问题。安卓环境1. Node环境n

Yvettre 2019-06-30

Weex开发之mask

mask弹层示例在移动开发中，我们经常会做一些弹框相关的东西，在Weex跨平台框架中，实现mask效果也比较简单。

JxMY 2019-06-30

跨越适配&性能那道坎，企鹅电竞Android weex优化

WeTest 导读企鹅电竞从17年6月接入weex，到现在已经有一年半的时间，这段时间里面，针对遇到的问题，企鹅电竞终端主要做了下面的优化：。Image组件weex的list组件和image组件非常容易出问题，企鹅电竞本身又存在很多无限列表的weex页面，

DaLei 2019-06-30

移动跨平台技术方案总结

“得移动端者得天下”，移动端取代PC端，成为了互联网行业最大的流量分发入口，因此不少公司制定了“移动优先”的发展策略。为了帮助读者更好地学习WEEX，本节将对React Native、Weex和Flutter等主流的跨平台方案进行简单的介绍和对比。Reac

JxMY 2019-06-30

宜信投米RA | 安卓跨平台开发实践

移动端目前市面上主流的平台主要有Android和IOS两大平台，为了尽可能复用代码和节省开发成本，各大巨头都开发了自己的跨平台框架，比如Facebook的React-Native，阿里的Weex，Cordova，以及今年Google开发者大会上介绍的Flu

junzaivip 2019-06-30

weex页面上划动，固定header

<header :key="`${index}-header`" v-if="i%2===0 && i != 0">. 'First', 'Second', 'Third', 'Fourt

JxMY 2019-06-30

Weex系列(5) —— 封装原生组件和模块

]哇，2019年了，时间总是那么快，快过新年了，忙点了也懒点了，还有点想家了，先祝大家新年快乐吧。这一章官网上有介绍，但还是单独拎出来讲一讲，因为后期这块用的还是挺多的。在官网 扩展版块，是可以找到封装的方法步骤的。在上层vue里面，我们可以require

DaLei 2019-06-30

Weex开发之地图篇

weex-amap是高德针对Weex开发的一款地图插件，在Eros开发中，Eros对weex-amap进行二次封装，以便让开发者更集成地图功能。本文介绍的是如何在iOS中集成weex-amap，以及它的一些核心功能。下面是部分的业务实现代码：

hhbbeijing 2019-06-30

WeexBox 快速上手

概述Weex是由阿里巴巴研发的一套移动跨平台技术框架，研发的初衷是为了解决移动开发过程中频繁发版和多端研发的问题。使用Weex提供的跨平台技术，开发者可以很方便的使用Web技术来构建高性能、可扩展的Native级别的性能体验，并支持在Android、iOS

junzaivip 2019-06-30

【开源】合摩 WeexBox 正式发布

WeexBox一套简洁高效的APP混合开发解决方案写在开头WeexBox官方QQ群号:943913583. 一提到 Weex，相信下面已经有一群小伙伴在哀嚎了，是的，大多数开发者对 Weex 的感情是既爱又恨的。首先聊聊我们为什么选择weex，在我们做技术

hhbbeijing 2019-06-30
mht

mht

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号