weex踩坑记录

weex版本1.5.3
npm版本 6.4.1

请求

调用本地包，文件请求使用nat.js http://natjs.com/
没有太大的问题，记得文档看仔细，有些请求模拟器无法实现

基础

1. 文本只能放文本只能放在 <text> 标签里，否则将被忽略
2. 在 <style> 标签内，你可以写 CSS 来描述一个组件的样式，需要注意的是，这些样式在 Weex 里只能作用于当前组件。（强制 scoped）
3. 不支持背景图
4. 不支持百分比 如果写百分比会被转换成像素
5. 原生页面跳转 使用A标签 跳转对应页面名称的JS文件（weex走http协议） weex playground中这个方法有效

<template>
  <div class="container index-container">
     <a href="/dist/b.js">原始方法跳转页面B</a>
     <div @click="pageTo">
      <text style="fong-size:30px;">JS跳转B</text> 
     </div>
  </div>
</template>
<script>
const navigator = weex.requireModule('navigator')
// 页面跳转走http协议 JS中必须把根路径写死 a标签可以走相对路径
export default {
  methods: {
    pageTo () {
      navigator.push({
        url: 'http://192.168.10.127:8082/dist/pages/b.js'
      })
    }
  }
}
</script>

问题记录

Android

1. 配置ANDROID_HOME 环境
   https://blog.csdn.net/k491022087/article/details/72934862
2. 安装android studio 以及 android sdk
3. 配置android studio
   https://blog.csdn.net/k491022087/article/details/72934862
4. 打包

• 项目中添加android环境weex platform add android
• 打开android studio 文件->打开项目 打开项目中的platforms （项目不能有中文路径）
• adb会自动安装驱动
• 安装成功后运行命令打包或调试

使用夜神模拟器进行调试

1. 安装夜神模拟器 http://www.yeshen.com/
2. 打开模拟器 开启开发者模式
3. 运行adb connect 127.0.0.1:62001
   注意这一步不要在夜神的目录下执行 可能会有ADB版本不一的问题
4. 运行adb devices 查看连接设备

相关资料

1. 如何解决夜神模拟器连不上adb的问题https://blog.csdn.net/leon1741/article/details/54896861
2. 夜神安卓模拟器adb命令详解 https://www.yeshen.com/faqs/H15tDZ6YW

相关BUG

1. 模拟器启动APP白屏并显示错误代码render error:wx_create_instance_error
   解决方法https://www.jianshu.com/p/8cd872a618d4

将项目引入android studio 时编辑器报错

Error:Your project path contains non-ASCII characters. This will most likely cause the build to fail on Windows. Please move your project to a different directory. See http://b.android.com/95744 for details. This warning can be disabled by adding the line 'android.overridePathCheck=true' to gradle.properties file in the project directory.

Consult IDE log for more details (Help | Show Log)

报错原因：
编辑器不支持中文路径
解决方法：
调整文件路径

weex android打包页面跳转报错 提示'FileUriExposedException'

• 错误代码

weex.requireModule('navigator').push({
        url: toUrl,
        animated: 'true'
})

• 错误提示
  android.os.FileUriExposedException
• 错误原因
  从android7.0（SDK>=24)开始，直接使用本地真实路径的Uri被认为是不安全的，会抛出一个FileUriExposedException问题。
• 解决方法

1. Weex原理之带你去蹲坑 12点
   https://www.jianshu.com/p/ae1d7a2b0a8a
2. 安卓7.0相机拍照闪退 android.os.FileUriExposedException问题 https://blog.csdn.net/weixin_42405406/article/details/81352773

android使用navigator 跳转页面显示白屏

1. https://blog.csdn.net/yangzongbin/article/details/79003738
2. https://blog.csdn.net/jupiterxx/article/details/80026909 这篇文章中有提到解决方法 但是不能完全使用他的方法
   原因那篇文章里说了 weex不能拦截file协议，所以要自己给文件加一个拦截头
   跳转方法 仅限于android页面跳转

getJumpBaseUrl (toUrl) {
      // 获取地址跳转
      let that = this
      const baseUrl = new String(weex.config.bundleUrl)
      let nativeBase, native
      // 判断是否安卓 安卓需要在file协议之前添加local协议 weex无法拦截file协议
      let isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0
      if (isAndroidAssets) {
        // 安卓端处理
        nativeBase = 'local://assets/dist/'
        native = nativeBase + toUrl
        this.url = `安卓： ${native}`
        weex.requireModule('navigator').push({
          url: native,
          animated: 'true'
        })
      }
}

WXPageActivity.java文件中107行添加

    // 加在這裏
    if (intent.getData() != null) {
  // 将local协议替换成file协议
      if (intent.getData().toString().contains("local://")) {
        mUri = Uri.parse(intent.getData().toString().replace("local://", "file://"));
      }
    }

npm run android报错

微信图片_20180912145759.png
问题原因
eslint语法错误/文件找不到
解决方法
运行npm start 排查语法错误

Nat.js 上传图片报错

报错代码

微信图片_20180913155632.png
2.png

android 无法读取本地图片

android需要把图片复制到app目录下的asset目录中 跟dist同级
https://blog.csdn.net/blog_lee/article/details/79820410

android 无法读取https协议的图片

• 问题描述
  经测试android5.0以下机型不支持读取https协议的图片 5.0以上正常
• 解决方法
  https://blog.csdn.net/chzphoenix/article/details/77833617

这个解决方法有点问题。。在机器上一会儿读得出一会儿读不出

android引入自定义组件

todo.
https://blog.csdn.net/lucky9322/article/details/82144342

相关资料

1. weex安卓打包后控制图标和安装名称
   https://segmentfault.com/q/1010000010932590?sort=created
2. 使用weex平台添加android添加android模板报错？
   https://blog.csdn.net/mythinternet/article/details/79374386
3. 一个难得的完整的WEEX项目！！！
   https://github.com/CarGuo/GSYGithubAppWeex

IOS

1. 添加ios平台weex platfrom add ios
2. 安装并且配置相关内容
3. ios端无法直接获取weex编译好的JS文件，需要在终端运行npm run ios 然后可以在项目根目录的dist文件夹中找到编译好的文件，把这些文件粘贴到ios目录中的bundlejs 文件夹内
   参考文档：https://blog.csdn.net/deft_mkjing/article/details/80623315
4. ios的页面跳转没有问题 直接按照上面的文档来就可以了
5. 经过测试 ios端image组件可以读取网络图片 但是本地图片无法读取

读取本地图片

todo...

• 参考资料
  https://blog.csdn.net/CodingFire/article/details/79528639

WEB端 （weex playground）

文件404

微信图片_20180911160331.png

解决方法：
调整路径

获取窗体高度并且设置

// 利用了飞猪UI
import { Utils } from 'weex-ui'
const tabPageHeight = Utils.env.getPageHeight()