weex

　　　　不支持百分比，长度单位只支持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%\bin      新建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:\Users\29535\AppData\Local\Android\Sdk\tools 　　 

　　　　C:\Users\29535\AppData\Local\Android\Sdk\platform-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’ 　　以容器最小尺寸适配

　　　　width: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模块

 

转载于:https://www.cnblogs.com/xiumumi/p/9940659.html