不支持百分比,长度单位只支持px(dpi - dp),不支持如 border:1px solid #000;这种连写
必须使用类名或者ID书写选择器,不能嵌套,文本尽量使用text标签,text是weex内置组件
input可以在上面添加 autofocus 使之在网页中可以预览
不能使用router-link
安装nodejs
安装git
安装java
https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html 下载java 的jdk 新建系统变量“JAVA_HOME”,变量值“Java的安装路径”
在path变量后添加%JAVA_HOME%in 新建CLASSPATH变量 值为.;%JAVA_HOME%lib
安装 weex-toolkit
使用npm全局安装 npm install weex-toolkit -g
weex -v 检测是否安装成功
下载安装 android studio
AndroidStudio配置:
在AndroidStudio的欢迎界面,你需要点击右下方的Configure进行老版本的SDK tool配置,
步骤:Configure->SDKManager->SDK Tools->勾选show Package Details ->勾选23.0.2 然后进入安装。 weex需要这个
配置环境变量 ANDROID_HOME 值为android studio 安装路径 系统变量path中添加 C:Users29535AppDataLocalAndroidSdktools
C:Users29535AppDataLocalAndroidSdkplatform-tools 这两个环境变量
生成项目目录
weex create weektest
生成偏前台的项目目录
weex init weexwork
安装 webpack
添加Android支持
weex platform add android
使用android studio
打开platform 下面的andriod文件夹
左下角IDE报错
百度gradle 4.4-all,一般云盘都会存储这个的,下载相应的压缩包(89M)到本地,无需解压。然后依次按照【C盘】->【用户】->【你的用户名】->【.gradle】-
>【wrapper】->【dists】->【gradle-4.4-all】->【9br9xq1tocpiv8o6njlyu5op1】打开,把刚才的下载gradle包扔到这里面来即可,无需解压,无需解压,无需解压,
接着回到android studio,它就会开始同步。还有错误直接双击链接下载安装即可
outputFile报错
android/app/build.gradle 中的applicationVariants.all中的内容改为 :
variant.outputs.all {
def fileName
def date = new Date()
def formattedDate = date.format('yyyyMMdd')
if (variant.buildType.name.equals('release')) {
fileName = "${variant.mergedFlavor.versionName}_release_${formattedDate}.apk"
} else if (variant.buildType.name.equals('debug')) {
fileName = "${variant.mergedFlavor.versionName}_debug_${formattedDate}.apk"
}
outputFileName = fileName;
}
must be explicitly declared报错
android/app/build.gradle 中的defaultConfig下面添加一段:
javaCompileOptions {
annotationProcessorOptions {
includeCompileClasspath true
}
}
模块引入
weex.requireModule('modal');
modal.toast({ //页面提示
message:'页面初始化成功',
duration:2
})
image图片
图片只能使用image标签引用,需要设置宽高才生效
resize=‘stretch’ 默认值 按照容器拉伸
resize=‘cover’ 完全覆盖 可能导致图片被剪切
resize=‘contain’ 以容器最小尺寸适配
750px,heihgt1250px 相当于宽高100%
列表
list相当于ul,cell相当于li list和cell上不能写样式
上拉加载
list上可以添加上拉组件 loadmore 和loadmoreoffset搭配使用
list里添加loading标签
<loading class='loading' @loading='loading' :display='loadshow'>
<text class='loadtxt'>loading..</text>
</loading>
下拉刷新
list里添加loading标签
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing">
<text class="indicator">Refreshing ...</text>
</refresh>
pullingdown pullingdown:精准下拉,可以获得下拉高度,前后两次滑动距离等详细参数
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing">
<text class="indicator">Refreshing ...</text>
</refresh>
远程加载数据
const stream = weex.requireModule('stream'); //加载stream模块
getNews(url, callback) {
return stream.fetch({
method: 'GET',
type: 'json',
url: url
}, callback); //成功调用时callback函数接收的参数就是成功返回的数据
}
轮播slider组件
interval 滑动一次的时间
auto-play 是否自动播放
infinite 是否循环播放 默认值为true
indicator轮播图下的点 slider的子组件
item-color 颜色
item-selected-color 选中的颜色
item-size 大小
a标签
跳转到weex.js的网页
web标签
将某个网页嵌入进来
pagestart web组件加载的时候调用的方法 绑定在web标签上
pagefinish 组件加载完成时调用此方法
error 组件出现错误时调用的方法
事件
longpress 长按事件
appear 如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发
disappear 如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。
动画模块animation
const animation =weex.requireModule('animation'); //引入模块
{
var testEl = this.$refs.test; // ref指定dom元素 再通过this.$refs.test获取 减少操作dom节点的消耗
animation.transition(testEl, {
styles: { //最终样式
color: '#FF0000', //color是不起作用的
transform: 'translate(250px, 100px)',
transformOrigin: 'center center'
},
duration: 800, //ms //动画时间
timingFunction: 'ease', //动画函数
delay: 0 //ms //延迟时间
}, function() { //动画结束的回调
modal.toast({
message: 'animation finished.'
})
})
}
Navigator模块
push 把一个weex页面URL压入导航堆栈中,可指定在页面跳转时是否需要动画,以及操作完成后需要执行的回调函数
pop 把一个 Weex 页面 URL 弹出导航堆栈中,可指定在页面弹出时是否需要动画,以及操作完成后需要执行的回调函数。
const navigator=weex.requireModule('navigator'); //引入模块
methods: {
jump (event) {
console.log('will jump')
navigator.push({ //前进
url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
animated: "true" //是否要动画
}, event => { //event:是否成功
modal.toast({ message: 'callback: ' + event })
})
}
}
webview模块