weex版本1.5.3
npm版本 6.4.1
请求
调用本地包,文件请求使用nat.js http://natjs.com/
没有太大的问题,记得文档看仔细,有些请求模拟器无法实现
基础
- 文本只能放文本只能放在 <text> 标签里,否则将被忽略
- 在 <style> 标签内,你可以写 CSS 来描述一个组件的样式,需要注意的是,这些样式在 Weex 里只能作用于当前组件。(强制 scoped)
- 不支持背景图
- 不支持百分比 如果写百分比会被转换成像素
- 原生页面跳转 使用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
- 配置ANDROID_HOME 环境
https://blog.csdn.net/k491022087/article/details/72934862
- 安装android studio 以及 android sdk
- 配置android studio
https://blog.csdn.net/k491022087/article/details/72934862
- 打包
- 项目中添加android环境
weex platform add android
- 打开android studio 文件->打开项目 打开项目中的platforms (项目不能有中文路径)
- adb会自动安装驱动
- 安装成功后运行命令打包或调试
使用夜神模拟器进行调试
- 安装夜神模拟器
http://www.yeshen.com/
- 打开模拟器 开启开发者模式
- 运行
adb connect 127.0.0.1:62001
注意这一步不要在夜神的目录下执行 可能会有ADB版本不一的问题 - 运行
adb devices
查看连接设备
相关资料
- 如何解决夜神模拟器连不上adb的问题
https://blog.csdn.net/leon1741/article/details/54896861
- 夜神安卓模拟器adb命令详解
https://www.yeshen.com/faqs/H15tDZ6YW
相关BUG
- 模拟器启动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问题。 - 解决方法
- Weex原理之带你去蹲坑 12点
//www.greatytc.com/p/ae1d7a2b0a8a
- 安卓7.0相机拍照闪退 android.os.FileUriExposedException问题
https://blog.csdn.net/weixin_42405406/article/details/81352773
android使用navigator
跳转页面显示白屏
https://blog.csdn.net/yangzongbin/article/details/79003738
-
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报错
问题原因
eslint语法错误/文件找不到
解决方法
运行
npm start
排查语法错误
Nat.js 上传图片报错
报错代码
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
相关资料
- weex安卓打包后控制图标和安装名称
https://segmentfault.com/q/1010000010932590?sort=created
- 使用weex平台添加android添加android模板报错?
https://blog.csdn.net/mythinternet/article/details/79374386
- 一个难得的完整的WEEX项目!!!
https://github.com/CarGuo/GSYGithubAppWeex
IOS
- 添加ios平台
weex platfrom add ios
- 安装并且配置相关内容
- ios端无法直接获取weex编译好的JS文件,需要在终端运行npm run ios 然后可以在项目根目录的dist文件夹中找到编译好的文件,把这些文件粘贴到ios目录中的bundlejs 文件夹内
参考文档:https://blog.csdn.net/deft_mkjing/article/details/80623315
- ios的页面跳转没有问题 直接按照上面的文档来就可以了
- 经过测试 ios端image组件可以读取网络图片 但是本地图片无法读取
读取本地图片
todo...
- 参考资料
https://blog.csdn.net/CodingFire/article/details/79528639
WEB端 (weex playground)
文件404
解决方法:
调整路径
获取窗体高度并且设置
// 利用了飞猪UI
import { Utils } from 'weex-ui'
const tabPageHeight = Utils.env.getPageHeight()