Weex开发之开发过程遇到的问题以及解决方案（三）
2018-06-07 本文已影响131人
AR7_
问题1：
- 从github上下载项目下来，并使用命令
npm install运行后，开始使用，出现如下图所示问题：
图中说出现的问题是因为Android SDK路径不正确。
解决方案：
- 直接使用Android Studio打开Weex项目的android源码部分，就会出现提示框，Android SDK路径不正确，点击确定即可，AS会自动使用本电脑已安装的Android SDK路径，至此，问题解决。
问题2：
如图所示，报出很多错误，主要原因是因为使用了语法检查eslint，这个主要是用来规范代码，而且很严格，哪怕是多一个空格都会报错。
解决方案：
- 只需要在configs/webpack.common.conf.js 文件里面，将eslint匹配验证删除即可，如下代码所示：
const createLintingRule = () => ({
//将下面这些代码注释掉即可。
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [helper.rootNode('src'), helper.rootNode('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
})
问题3：
- 在开发过程中，出现了点击按钮，并没有显示Toast的问题，原因是将
modal.toast写成了toast.modal，所有才会出问题，这是因为没有注意Visual Studio Code并没有像Android Studio那样会报错，所以大意了。
问题4：
- 在开发过程中，出现了图片没有正确显示的问题，主要原因是把
src写成了scr，所以才会报错。
问题5：
Custom elements in iteration require 'v-bind:key' directives
问题6：
- 设置图片无法显示，问题4是出现把“src”写成“scr”，这次是把“width”写成“widows”，解决的思路是：检查了一遍代码，发现没有什么问题，但是通过调试，在谷歌浏览器按下
F12，然后点击左上角有个鼠标的符号，再选择到图片代码的位置，悬浮的代码显示0 x 35 ，意思是说图片宽是0px，高是35px，很显然，<style scoped>里面的设置宽的属性不对，查看，才发现，把“width”写成了“widows”。
问题7:
- 在VSCode中使用“npm start” 显示“command not found”，显然这是提示npm的命令不成功。而且连“npm -v”和“node -v”都显示没有这样的命令。
解决方案：个人怀疑是nodejs出了问题，卸载重装还是不行。https://blog.csdn.net/li396864285/article/details/52572163
问题8:
- 使用mac打开weex项目，出现如下问题，显示网络代理配置问题。
解决方案：清理代理未成功，只要找到该文件，删除掉即可。
问题9:
- 使用mac打开weex项目，使用“npm run android ” 时显示如同所示的问题。
https://blog.csdn.net/weixin_38327562/article/details/71057276
https://blog.csdn.net/zhalcie2011/article/details/78182696
问题10:
Error:Failed to open zip file.
Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
Re-download dependencies and sync project (requires network)
Re-download dependencies and sync project (requires network)
- 因为week官方demo使用的gradle是
gradle-2.14.1-all.zip，所以，如果Android Studio里面没有的话，就会出现以上的报错。
解决方案：
- 第一种：可以自己到网上下载，然后再导入，直接只用下面的链接在浏览器快速下载：
services.gradle.org/distributions/gradle-2.14.1-all.zip
- 第二种（推荐）：只需在gradle-wrapper.properties里修改gradle的版本即可，只需将网址里面的
https更改为http即可。
问题11：
- 如图所示，这是在浏览器上运行显示的结果，但是使用Android真机时，会发现，返回图标所处位置是在下方，并没有在正确的位置。这是因为使用了
position: absolute;时，因为没有设置top和left导致的。
.toolbar-leftimage-warpper {
position: absolute;
left: 0px;
top: 0px;
justify-content: center;
height: 100px;
}
问题12：
Environment variable $ANDROID_HOME not found !
解决方案：
https://blog.csdn.net/k491022087/article/details/72934862
问题13:
Error: Error: Command failed: ./gradlew assembleDebug
/bin/sh: ./gradlew: Permission denied
问题14:
npm WARN invalid config https-proxy=""
npm WARN invalid config Must be a full url with 'http://'
问题15:
[Gradle sync failed: Cause: error=2, No such file or directory](https://stackoverflow.com/questions/47018879/gradle-sync-failed-cause-error-2-no-such-file-or-directory)
wenti16:
This is not a bug in npm.
Tell the package author to fix their package.json file. JSON.parse
https://stackoverflow.com/questions/31454607/npm-failed-to-parse-json
