Weex 从入门到完整项目(1) 环境搭建

Weex简介

---

weex 一个简单的介绍

阿里为了自己电商系APP 开发的一套快速迭代的混合开发框架,Weex 可打包为静态js 文件发布公网实现随时热更新的需求.

混合开发的几种方式 简单的优势与劣势

1.历史悠久且 经久不衰的 cordova 传送门:http://cordova.apache.org/
前身是Adobe 的PhoneGap 这种模式 适合纯前端人员制作App.其 主要原理就是将 一些html等资源文件打包到APP 中,抛弃原生View 用WebView来实现其跨平台的特性. 只要兼容 Android 和IOS 内置的WebView 界面就可以做到 复用.ionic 是使用angular 语法+Cordova 插件 基本类似
但是 这种方式在不同的手机上 表现力不同. 太依赖手机的性能与系统WebView 的优化能力. (IOS 还行 ,Android性能看 手机厂商 手机型号 手机价格 手机电量 手机... 总之很多很多) 版本升级 一般需要将 新版本的 页面 通过下载文件的方式下载到本地. 不需要 重写安装apk. 也可以通过 不需上架的方式进行更新 但是毕竟体验不好 IOS 有很大风险 说不定哪天不给上架了. 学习成本上来讲 纯前端 很容易搞定 .

2.RN 现在最主流的混合开发方式,传送门:https://reactnative.cn/
时间也比较久的 偏向原生的混合开发方式,支持 全部项目使用RN 或者 部分页面接入RN.RN 只是简单 看了一些文档, 目测 是打包资源到本地 版本更新 下载新文件到本地,本地js 文件 通过RN 原生解析翻译为 Native 代码. 相对比较稳定,文档全.react 学习成本略高.比较麻烦的是 IOS Android 要兼容各自特点 可能需要写两套代码.React Native，Learn once, write anywhere

3.Weex 阿里巴巴 开源项目 传送门:
http://weex.apache.org/cn/guide/
https://alibaba.github.io/weex-ui/#/cn/
缺点: 官网文档 感觉一年不更新了.
优点:不需要用户下载文件进行更新. 可以部署在 公网上.也支持将静态文件打包到APP 安装包中, 做下来感觉 原生的知识 还是要有一些.

图片.png

综上所述吧 第一种是 Web前端 一个人就可以搞定一个APP.时间 人力成本很低. 但是性能 还无法替代 原生APP地位 .但是 技术的发展 慢慢有的RN 使用前端技术编写 最后映射成原生代码. 效率上 肯定没有纯原生,不过已经发展的很好了.所以 后面APP 混合开发肯定是主流了. RN 和 Weex 都有不错的效果 都有不少的坑. 慢慢 排坑吧.

环境搭建

详见http://weex.apache.org/cn/guide/set-up-env.html
原生接入
Android 环境
下载Android Studio
Gradle

    implementation 'com.squareup.picasso:picasso:2.5.2'
    implementation 'com.facebook.fresco:fresco:0.10.0'
    implementation 'com.taobao.android.weex_inspection:protocol:1.1.4.1'
    implementation 'com.taobao.android:weex_inspector:0.11.0'
    implementation 'com.taobao.android:weex_sdk:0.17.0'
    implementation 'com.taobao.android:weex_analyzer:0.1.0.5'
    implementation 'com.taobao.android.weex_inspection:urlconnection_interceptor:1.0.0'
    implementation 'com.squareup.okhttp:okhttp:2.3.0'
    implementation 'com.squareup.okhttp:okhttp-ws:2.3.0'
    implementation 'com.alibaba:fastjson:1.2.44'

IOS 环境
首先 卖肾买个Mac 然后 安装 Xcode
pod

pod 'WeexSDK' 
pod 'WXDevtool', '0.15.3'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'
pod 'ATSDK-Weex', '0.0.1'

Weex 环境
按照文档 安装 node 与weex-toolkit
使用脚手架 创建一个项目
weex-Ui 介绍
https://alibaba.github.io/weex-ui/#/cn/
npm i weex-ui -S
安装weex-ui

使用 WebStorm 或者 VS Code 打开项目
1.npm run build
2.npm run serve/dev

可以在web 端 打开 简单 helloWord

---

到此 环境 搭建成功！
制作一个Demo
实现 weex->native->weex 的交互
功能点
1.原生按钮点击 跳转 至 Weex 页面
2.点击Weex 按钮 显示原生 时间选择控件
3.将选择时间 回传给weex 并在weex 中显示 选中的时间

Demo 目的：实现 原生与weex 的相互调用。

weex 代码

这部分有一个 小坑
highlight必须写在一行
下方写法是 错误方式 （毕竟 不是web，必须按照他的标准去编写 最终要反射为原生文本控件 ）

highlight

代码解释
官方给的 一些对话框 提示框的内置组件
weex.requireModule("modal");

全局事件 组件
weex.requireModule("globalEvent");

原生注册 Moudle 需要在 Android （APplication）IOS （APPDelegate ） 中注册 myModule 
weex.requireModule("myModule" )

Android 使用 注解的方式 weex.requireModule("myModule").showPickTime("js调原生时间选择控件");
在Android 自定义Moudle 创建 showPickTime 方法
加上@JSMethod(uiThread = true) 映射 js方法

    @JSMethod(uiThread = true)
    public void showPickTime(String msg) 

image.png

在IOS 自定义Moudle 创建 showPickTime 方法

将方法 映射js 方法
WX_EXPORT_METHOD(@selector(showPickTime:))
-(void)showPickTime:(NSString *) msg

image.png

效果图

Simulator Screen Shot - iPhone 8 Plus - 2018-01-10 at 11.14.18.png

图片2

图片3

源码下载地址 ：

IOS ：http://download.csdn.net/download/chinaltz/10198137
Android http://download.csdn.net/download/chinaltz/10198144
weex:http://download.csdn.net/download/chinaltz/10198200