weex+android原生开发学习笔记（一）

移动端开发（使用Weex+android原生开发笔记）：android代码编码规范，使用alibaba的规范：android studio → setting → plugin → 搜索alibaba → Alibaba Java Coding Guidelines右侧安装重启即可使用这个插件参考：https://www.cnblogs.com/chenjfblog/p/7...

漠天515

3832人浏览 · 2018-11-04 19:21:36

漠天515 · 2018-11-04 19:21:36 发布

移动端开发（使用Weex+android原生开发笔记）：

android代码编码规范，使用alibaba的规范：
   android studio → setting → plugin → 搜索alibaba → Alibaba Java Coding Guidelines右侧安装重启即可
   使用这个插件参考：https://www.cnblogs.com/chenjfblog/p/7685579.html

1、接触一个问题，android 路由跳转
   https://github.com/alibaba/ARouter/blob/master/README_CN.md
   开源库ARouter源码： https://www.jianshu.com/p/6808d4e54d4a
   阿里巴巴ARouter基本使用方法：一个用于帮助 Android App 进行组件化改造的框架 —— 支持模块间的路由、通信、解耦

2、windows使用sorceTree管理gitlib上的代码：

   1、下载SourceTreeSetup-2.4.8.0.exe ，这个是绿色支持的，不需要去安装，打开皆可用
   2、下载clone or new 一个git代码，clone → 输入远程有效地址url → 如果没有登录账号，会自动弹出登录框→ 登录成功，选择项目本地路径和名称
       （有效git url 要在gitlab上找到对应的项目 url）
       error

3、Weex学习和工作：http://weex.apache.org/cn/guide/
   当然这也有一篇入门帖子写的很详细：https://blog.csdn.net/xingxtao/article/details/79505997#commentsedit

   首先配置Node.js 、 npm 和 webstorm，还有vue的熟悉基础
   https://blog.csdn.net/u010326875/article/details/79495046
   https://blog.csdn.net/u010326875/article/details/79816789

   然后dos全局安装weex，参考http://weex.apache.org/cn/guide/ 快速上手→初始化按照命令执行
   1》、请确保你已经安装了 Node.js，然后全局安装 weex-toolkit。

       npm install weex-toolkit -g

   2》、用 weex create 命令来创建一个空的模板项目：

       weex create awesome-app

       use npm (npm我选择的这个)
       use taobao (cnpm)

   3》、cd awesome-app //切入创建的项目根目录
       npm install //npm安装
       npm start   //运行
       npm install --save weex-ui //安装weex-ui淘宝-飞猪提供的库

   4》、webstorm打开工程，enjoy your coding

   5》、如果copy src源码替换，awesome-app下的src源码，在编译环境里一定要刷新，展开各个包，不然反应不过来，npm start会报错找不对对应文件


   {
           安装的插件和对应的版本号：
           "dependencies": {
               "phantom-limb": "0.0.1",
               "vue": "^2.5.11",
               "vue-router": "^3.0.1",
               "weex-ui": "^0.6.6",
               "weex-vue-render": "^1.0.17"
           },
           "devDependencies": {
               "autoprefixer": "^8.0.0",
               "babel-core": "^6.26.0",
               "babel-loader": "^7.1.1",
               "babel-plugin-component": "^1.1.1",
               "babel-preset-stage-0": "^6.24.1",
               "chai": "^4.1.2",
               "css-loader": "^0.28.8",
               "extract-text-webpack-plugin": "^3.0.2",
               "friendly-errors-webpack-plugin": "^1.6.1",
               "fs-extra": "^5.0.0",
               "glob": "^7.1.2",
               "html-webpack-plugin": "^2.30.1",
               "html-webpack-plugin-for-multihtml": "^2.30.2",
               "ip": "^1.1.5",
               "node-notifier": "^5.1.2",
               "portfinder": "^1.0.13",
               "postcss-import": "^11.0.0",
               "postcss-loader": "^2.0.9",
               "postcss-plugin-weex": "^0.1.6",
               "raw-loader": "^0.5.1",
               "rimraf": "^2.6.2",
               "script-ext-html-webpack-plugin": "^1.8.5",
               "vue-loader": "^12.2.0",
               "vue-style-loader": "^3.0.3",
               "vue-template-compiler": "^2.5.11",
               "webpack": "^3.10.0",
               "webpack-dev-server": "^2.9.7",
               "webpack-merge": "^4.1.0",
               "webpack-uglify-parallel": "^0.1.4",
               "weex-loader": "^0.7.2",
               "weex-vue-precompiler": "^0.1.17"
           }

   }

4、运行起来的页面，浏览器访问后，页面右侧有二维码，用playground下载的weex扫描查看和操作
   https://weex-project.io/tools/playground.html 扫描下载playground
5、weex开发技术点记录

   1》、页面跳转：
           这里跳转的url是.vue文件编译成js后的路径，也就是在android端assets下对应的路径：
           navigator.push({
url: 'dist/src/index.js',
animated: "true",
params:{
name : "漠天"
}
},event=>{
modal.toast({ message: '跳转成功 ', 'duration': 1 })
} );

           传递参数：url？param 拼接参数
           url？key 拼接key存储数据storage
                       BroadcastChannel 暂定，稍后使用和整理

           注意，跳转页面，在android端需要在重新渲染js页面之前，对pageUrl做判断（否则跳转不成功）：
           Uri mUri = getIntent().getData();
           if (mUri != null) {
               //截除http:/ 留下baseUrl
               String bundleUrl = mUri.toString().substring(6);
               if (bundleUrl != null) {
                   Map<String, Object> options = new HashMap<>();
                   if (bundleUrl.contains("?")) {
                       int index = bundleUrl.indexOf("?");
                       String parameters = bundleUrl.substring(index + 1);
                       bundleUrl = bundleUrl.substring(0, index);
                       String[] arr = parameters.split("=");
                       options.put(arr[0], arr[1]);
                   }
                   String pageName = bundleUrl.substring(bundleUrl.lastIndexOf("/")+1,bundleUrl.lastIndexOf("."));
                   mWXSDKInstance.render(pageName, WXFileUtils.loadAsset(bundleUrl, mWXSDKInstance.getContext()),
                           options, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
               } else {
                   mWXSDKInstance.render("index", WXFileUtils.loadAsset(mainPageJs, mWXSDKInstance.getContext()),
                           null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
               }
           } else {
               mWXSDKInstance.render("index", WXFileUtils.loadAsset(mainPageJs, mWXSDKInstance.getContext()),
                       null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
           }

   2》、页面接受参数：

           let paramerter = weex.config.param；
           const storage = weex.requireModule('storage');
           let key = weex.config.key；//通过key从storage获取数据
           storage.getItem('personalData', event => {
let mm = JSON.parse(event.data);
                   });

   3》、编译vue src文件成js文件：（https://segmentfault.com/a/1190000014887577、http://weex.apache.org/cn/tools/toolkit.html）
           使用 weex compile 命令可以编译单个weex文件或者整个文件夹中的weex文件
           $ weex compile src dest --devtool source-map -m 或者 $ weex compile src/index.vue dist 编译单个vue为js
           使用这个命令行打包完，再使用navigator 就哦了


   4》、android端集成weex：
   （笔记整理：https://blog.csdn.net/u010326875/article/details/83349969）
   （demo源码：https://download.csdn.net/download/u010326875/10742167）


   5》、使用weex-ui控件后，编译报错：
       $ weex compile src/index.vue dist
       ERR! [webpack errors]
       ../AppData/Roaming/npm/~/weex-toolkit/~/weex-previewer/~/weex-builder/~/babel-loader/lib!../AppData/Roaming/npm/~/weex-toolkit/~/weex-previewer/~/weex-builder/~/vue-loader/lib/selector.js?type=script&index=0!./src/index.vue

       解决：https://blog.csdn.net/u010326875/article/details/83376570

   6》、weex在android上调用图片资源：
       weex代码：
       {
title: '首页',
icon: 'mipmap://tab_task1.png',
activeIcon: 'mipmap://tab_task2.png'
/* icon: 'assets://images/tab_task1.png',*/
/* activeIcon: 'drawable://tab_task1.png',*/
},

       图片放在android端对应的资源目录下

   7》、weex调用android的方法，其实就是weex扩展的Module里的方法：

       android端扩展的Module：
           public class MyModule extends WXModule {
               //run ui thread
               @JSMethod(uiThread = true)
               public void selectImages() {
                   Intent intent = new Intent(mWXSDKInstance.getContext(), ImageGridActivity.class);
                   ((Activity) mWXSDKInstance.getContext()).startActivityForResult(intent, 10001);
               }
           }

       weex端代码调用：
           weex.requireModule('MyModule').selectImages();

   8》、android给weex传递参数：

       android端：
       Map<String,Object> mapParams=new HashMap<>();
       mapParams.put("name","bai");
       mWXSDKInstance.fireGlobalEventCallback("event_name",mapParams);

       weex端接收：（created:function()方法去接收）
       let globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener('event_name', function (e) {
let myName = e.name;
       }

   9》、android跑起来weex应用，跳转页面会弹出选择应用的框（手机上装有playground、和自己的app；原因是weex的filter使用的一样都是 com.taobao.android.intent.category.WEEX 所以会让你选择使用那一个）

       第一、解决办法：（参考：https://www.sunzhongwei.com/weex-android-avoid-switch-page-pops-up-application-selection-box）

               可以修改源码，android工程依赖的weex源码地址：git clone https://github.com/apache/incubator-weex.git 下的 android → sdk 集成依赖包

       第二、也可以另辟蹊径：
               参考：https://www.jianshu.com/p/572199f9b838 跳转的方法重新扩展一个model即可，然后在weex代码中用这个model做跳转

               从这里学到一点，就是weex sdk依赖满足不了的话，可以自己参考sdk源码，扩展功能自己用

       第三、比较好的解决方式

               在android manifest中设置：
                   <intent-filter>
                       <action android:name="android.intent.action.VIEW" />
                       <category android:name="android.intent.category.DEFAULT" />
                       <category android:name="com.taobao.android.intent.category.WEEX" />
                       <data android:scheme="jdy" />
                   </intent-filter>
               在weex端使用，需要统一管理navigator（重写push）：
               push(params, callback) {
                       if(params && params.url && params.url.indexOf("://")===-1){
                           params.url="jdy://"+params.url;
                       }
                       navigator.push(params, callback)
                   },

   10》、android端集成weex sdk源码

       https://blog.csdn.net/u010326875/article/details/83718626



6、手欠更新了一下android studio 擦，报个错 could not download appt2.0 ，百度和google竟然都没有遇到过，日了狗；无奈只能重新下载安装

   然，android studio 3.2安装又他娘的错误百出，参考解决：https://blog.csdn.net/broken_quark/article/details/82853796