weex再次使用笔记

一、weex+webstorm使用配置：

      1、安装依赖（官方文档）：

            https://weex.apache.org/zh/guide/develop/setup-develop-environment.html#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96

      2、用webstorm创建空的项目 WeexProgram：

        terminal执行：

        配置vue环境：

        （1）安装 nodejs

        （2）安装 webpack : npm install webpack -g

        （3）安装 vue-cli 脚手架：npm install vue-cli -g

             参考：https://blog.csdn.net/u010326875/article/details/79816789

        配置weex环境：

            （1）全局安装 weex-toolkit ： npm install weex-toolkit -g

            （2）创建初始化weex项目：weex create awesome-project

                报错： Sorry, didn't recognize that command!
                       Type weex help to view common commands.

                原因是：安装的时候选择的方式有问题

                解决：weex repair  修复一下，然后选择：

                    report improve :YES
                    taobao npm

                整理：https://blog.csdn.net/u010326875/article/details/103470848

            （3）继续执行：weex create awesome-project 就可以了

      3、创建完成后，会默认下载依赖的库：

        （1）进入创建的项目 ： cd awesome-project

        （2）执行 ：npm install 再次下载依赖，因为创建的时候有可能下载失败

        （3）启动本地 web 服务，浏览器预览渲染效果：npm start

      4、这里eslint代码规范校验，有点烦给它关掉：

            参考：https://www.jianshu.com/p/05de429e190b

      5、引入 weex-vue-render：

         官网参考：https://www.npmjs.com/package/weex-vue-render

        （1）下载依赖：npm install weex-vue-render

        （2）为啥要用 weex-vue-render ：

            weex-vue-render 可以让你为 weex 开发的 .vue 文件跑在 webkit webview 或者任何基于
            webkit 内核的移动端浏览器里。比如 dotwe 网站上这个 demo 就是用 weex-vue-render
            渲染出来的。

            你可以打开 console 看到里面有版本信息，目前 dotwe 网站上的版本是 0.12.1

        （3）配置 weex-vue-render ：

            在 entry.js 中的内容替换成：

                import Vue from 'vue';
                import weex from 'weex-vue-render';

                weex.init(Vue);

      6、添加js-base64 基础库在weex端js文件中引入备用（es6）：

        （1）下载依赖：npm install --save js-base64

        （2）使用参考：https://www.npmjs.com/package/js-base64

        （3）使用eg：

            import { Base64 } from 'js-base64';

            Base64.encode('dankogai');  // ZGFua29nYWk=

            Base64.decode('ZGFua29nYWk=');  // dankogai

二、管理weex资源：

    （一）、逻辑：

        1：加载android项目中assets里的weex资源
        2：下载服务器weex资源，解压到手机内存，并加载使用

    （二）、执行步骤：（可以按照逻辑自己管理）

        1：加载android项目中assets里的weex资源

             不用管理版本信息，每次更新都要发布项目才能生效，不能热修复

        2：下载服务器weex资源，解压到手机内存，并加载使用

           （1） 自己管理weex本地存储的最新版本信息，用作更新配置文件比较时是否需要更新下载

                管理当前weex版本信息、weex更新后最新版本信息

                 release.json:

                    [
                        {
                            "build": 1001,//version_code
                            "ver": "1.0.0.1"//version_name
                            "path": "weex.zip",//最新的weex资源包  baseUrl+path
                            "releaseNote": "测试",//更新记录
                            "targetAndroidAppVer": "1.0.0.1001",//目标版本号
                            "miniAndroidAppVer": "0.0.0.1"//最小版本号
                        }
                    ]

           （2） 下载服务器对weex管理的更新配置文件（json格式文件或者其他自己处理）到指定目录


           （3）下载服务器最新weex资源到指定目录，并解压

                // 下载到指定目录后，删除已经存在的指定目录，解压到指定目录

                // 下载成功，更新管理本地weex最新版本的值

           （4） 页面加载逻辑：
				
				区分加载内存和assets的资源方式
				
           （5） 具体实现可以按照上面的大概逻辑自己实现就好

三、自定义weex页面跳转的Navigator和对应的逻辑：

   android manifest.xml 、android 扩展Navigator 和 weex router文件对应：

        # scheme：定义跳转的唯一标识

        # android manifest.xml中配置：

            <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="bai-r-dev"/>  <!-- scheme 自定义scheme来指定加载本地assets下的资源 -->
            </intent-filter>

        # android 扩展Navigator:

            （Weex的Sdk中默认的navigator源码）
            Uri rawUri = Uri.parse(url);
            String scheme = rawUri.getScheme();
            Uri.Builder builder = rawUri.buildUpon();
            if (TextUtils.isEmpty(scheme)) {
                builder.scheme(Constants.Scheme.HTTP);
            }
            Intent intent = new Intent(Intent.ACTION_VIEW, builder.build());
            intent.addCategory(WEEX);
            intent.putExtra(INSTANCE_ID, mWXSDKInstance.getInstanceId());

        # weex router处理和manifest对应的scheme：

              push(params, callback, paramValue) {
                    let bundleUrl=params.url;
                    if(params && params.url && params.url.indexOf("://")===-1){
                        if(bundleUrl.indexOf("weex/main.js")===0){
                            params.url="m-"+scheme+"://bai.cn/"+params.url;//m-bai-r-dev 对应android WeexMainActivity
                        } else {
                            params.url=scheme+"://bai.cn/"+params.url;//bai-r-dev 对应android WeexMainPageActivity
                        }
                    }

                    if(paramValue){
                        if(typeof paramValue==='object'){
                            if(params.url.indexOf("?") !== -1){
                                params.url=params.url+'&paramValueBase64='+Base64.encodeURI(JSON.stringify(paramValue));
                            }else{
                                params.url=params.url+'?paramValueBase64='+Base64.encodeURI(JSON.stringify(paramValue));
                            }
                        }else{
                            if(params.url.indexOf("?") !== -1){
                                params.url=params.url+'&paramValueBase64='+Base64.encodeURI(paramValue);
                            }else{
                                params.url=params.url+'?paramValueBase64='+Base64.encodeURI(paramValue);
                            }
                        }
                    }
                    navigator.push(params, callback,params.resultCallback?params.resultCallback:null);
                }

四、可以扩展WeexFragment和WeexActivity一样使用：

    public static final String MAIN_FRAGMENT_URL = "weex/mainFragmentPage.js";

    bundleUrl = Constants.Weex.MAIN_FRAGMENT_URL;
    String pageName = bundleUrl.substring(bundleUrl.lastIndexOf("/") + 1, bundleUrl.lastIndexOf("."));
    mWXSDKInstance.render(pageName, WXFileUtils.loadAsset(bundleUrl, mWXSDKInstance.getContext()),options, null, WXRenderStrategy.APPEND_ASYNC);