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

   配置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