（三）weex 窥探 运行我的第一个HelloWorld 应用源码结构说明 打包运行到app上面

 

创建第一个Weex应用

cmd 到要创建的目录 就是。。cd 目录名称这一步我相信已经很基础了，，但是我仍然要操作一波给大家

cd H:\week
H:
weex create hello-week

他会出现

?Project name hello-week

这就很有趣，，我还以为卡了呢 在这里等 emmmm

直接回车

又出现

This command need to install weexpack. Installing...
? Project name hello-week
? Project description (A weex project)

回车

λ weex create hello-week
This command need to install weexpack. Installing...
? Project name hello-week
? Project description A weex project
? Author (liuan <1377093782@qq.com>)

就出现

λ weex create hello-week
This command need to install weexpack. Installing...
? Project name hello-week
? Project description A weex project
? Author liuan <1377093782@qq.com>
? Select weex web render
> 1.0.17 Current: latest features
  0.12.17 LTS: recommended for most users

可以键盘上下选择

latest features ：最新功能

recommended for most users：建议大多用户使用。。

因为我们要尝尝鲜。。就选默认第一个把

回车后，出现

? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets)
> stage-0: recommended for most users, support you to use all es6 syntax
  stage-1
  stage-2
  stage-3

stage 是阶段。。。这个语言是真的讲究。。那就选第一个把 持续回车

? Use vue-router to manage your view router? (not recommended) (y/N)

使用vue-router来管理你的视图路由器？ （不建议） 既然不建议，我们写N回车

? Use ESLint to lint your code? (Y/n)

ESLint的用途

• 1.审查代码是否符合编码规范和统一的代码风格；
• 2.审查代码是否存在语法错误； 
  中文网地址 http://eslint.cn/

这么棒棒的一个东西。。你看他的Y也是大写的，，肯定是想让我们开启他

Y 回车

? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

回车

Set up unit tests (Y/n)

Y 回车 不打Y的话 他也会选Y。默认选Y

可能这就是为啥大写把 区分默认。

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

回车

直到最后一句是

Enjoy your hacking time!

享受你的黑客时间？ 我也不知道翻译的对不对

接着运行

cd hello-week
npm install

貌似出现了些错误

audited 14157 packages in 17.595s
found 13 vulnerabilities (9 low, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

再次执行npm audit fix 提示需要关闭翻墙。。关闭以后

npm install

提示

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

那就先把 peer安装上

npm install peer

出现提示

error: Microsoft Visual C++ 9.0 is required. Get it from http://aka.ms/vcpython27

访问这个网址 下载并安装

再执行

npm install peer

出现

You are using pip version 9.0.3, however version 19.0.1 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' command.

那就升级

python -m pip install --upgrade pip

再执行

pip install peer

会出现

npm WARN webpack-cli@3.2.1 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

解决方法就是安装这个的版本

npm install webpack-cli@3.2.1 -g

npm install

出现

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.

npm install babel-loader@6.4.1 -g

出现 

babel-loader@6.4.1 requires a peer of babel-core@^6.0.0 but none is installed. You must install peer dependencies yourself.

 

npm install babel-core@^6.0.0 -g

出现

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

升级minimatch到3.0.2

npm update minimatch@3.0.2

npm update -d

升级后依旧报错,只好重装:

npm update minimatch

npm -v minimatch

npm install -g npm@3

版本升级到了3.10.8

接着执行

npm install babel-core@^6.0.0 -g
npm install

更多错误

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

原因：
fsevents不在package.json里，但是仍然安装了，是因为你的系统是Windows系统，fsevents是苹果系统的可选依赖,你的项目有可能是团队项目，别人在他的mac上安装了fsevents相关依赖库，所以到这边你也就安装到你的windows上边了。你可以检查你的package.json 文件中是不是有fsevents相关依赖，删除即好！
如果没有，其他的npm包也会有依赖fsevents的！！！
这是warning错误，是因为mac下需要 fsevents，这里是在windows环境，所以可以忽略这个警告，对你没什么影响的

根据目录提示node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents

找到依赖

删除了以后

npm install

可以心旷神怡的看到 还有两个bug 我们来盘他

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

升级到webpack3就可以解决这个bug

npm install webpack@3.0.0 --save-dev

emmm 又产生了很多bug 感觉这一辈子都要沉迷bug无法自拔了

但是

webpack3几乎与webpack2完美兼容，除了会影响一些插件的使用，官方给出的数据是：98%的用户升级后，没有影响webpack功能的正常使用。升级的时候可能会有一些相关的warning，但是一般不影响使用。

那么 至此 环境总算是安装完成了

运行这个程序有三种方法都可以

npm start
npm run web
npm run serve

运行完成以后网页会出现

手机端下载应用Weex playground app, 扫描二维码访问

应用源码结构说明 

看完是不是感觉和angular结构很类似。。。

打包运行到app上面

weex platform add android

执行完效果是会在platforms文件夹下生成android代码 可以用android studio编辑使用

会出现bug No toolchains found in the NDK toolchains folder for ABI with prefix: mipsel-linux-android <---点进去看如何解决

同步后 下一个bug

Cannot set the value of read-only property 'outputFile' for 。。

修改这些 注释掉

//    applicationVariants.all { variant ->
//        variant.outputs.each { output ->
//            def outputFile = output.outputFile
//            if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
//                def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
//                output.outputFile = new File(outputFile.parent, fileName)
//            }
//        }
//    }

改为

 applicationVariants.all { variant ->
        variant.outputs.all{
            outputFileName= outputFileName.replace("app-debug.apk", "weex-app.apk")
        }
    }

再次运行及打包 再次报错误

Error:Execution failed for task ':app:javaPreCompileDebug'.Annotation processors must be explicitly declared now.  The following dependencies on the compile classpath are found to contain annotation processor.  Please add them to the annotationProcessor configuration.
- weexplugin-processor-1.3.jar (com.taobao.android:weexplugin-processor:1.3)
Alternatively, set android.defaultConfig.javaCompileOptions.annotationProcessorOptions.includeCompileClasspath = true to continue with previous behavior.  Note that this option is deprecated and will be removed in the future.
See https://developer.android.com/r/tools/annotation-processor-error-message.html for more details.

需要在build.gradle文件的defaultConfig中添加相关设置

      javaCompileOptions {
            annotationProcessorOptions {
                includeCompileClasspath = true
            }
        }

再运行就到手机上了。。。

还好是android 我懂一点。。解决node.js的bug才让人头大，不过一回生，二回熟，，慢慢来呗

 

 

等android studio 能正常build apk（s） 的时候说明下面命令就可以在webstrom生效了

npm run android

命令的意思是编译apk直接运行到android 

android 9 会有不友善的弹框 解决方案如下

https://blog.youkuaiyun.com/mp624183768/article/details/86679055