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="//www.greatytc.com/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
    解决方法//www.greatytc.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点
    //www.greatytc.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()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,042评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,996评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,674评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,340评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,404评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,749评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,902评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,662评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,110评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,577评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,258评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,848评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,726评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,952评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,271评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,452评论 2 348

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,699评论 2 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,736评论 25 707
  • 本系列出于AWeiLoveAndroid的分享,在此感谢,再结合自身经验查漏补缺,完善答案。以成系统。 Andro...
    济公大将阅读 1,817评论 2 10
  • 喜欢上不该喜欢的人,总是要别人伤自己伤到不行给才能停止吧? 别总是一幅低能儿的样子,自己鄙视自己
    冉小悦阅读 256评论 0 0
  • 最近发觉有两个危险的信号,一个是关于家庭,一个是关于个人。 最近总是在说老婆的不是。其实老婆装房子已经很辛苦...
    认知牛阅读 146评论 0 0