精华内容
参与话题
问答
  • Weex

    千次阅读 2019-06-02 18:17:36
    Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。 快速开始 高性能 Weex 使用原生组件和原生模块,来最大化利用原生渲染的性能优势以及平台能力,所有的组件和模块都是可插拔、可扩展的。 ...

    Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

    快速开始 

    高性能

    Weex 使用原生组件和原生模块,来最大化利用原生渲染的性能优势以及平台能力,所有的组件和模块都是可插拔、可扩展的。

    跨平台

    你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现,但是它们都提供了相同的接口。

    贴近前端生态

    Weex 拥抱已有的 Web 生态,你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架,如 Vue 和 Rax,在未来或许还可以支持更多。

    被大规模的使用

    Weex 已经在许多超级 App 中大规模使用,一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台,以供 工业生产使用。

    开始构建你的 weex 应用

    快速开始

    展开全文
  • weex

    2019-10-01 12:04:01
    不支持百分比,长度... 必须使用类名或者ID书写选择器,不能嵌套,文本尽量使用text标签,text是weex内置组件  input可以在上面添加 autofocus 使之在网页中可以预览  不能使用router-link 安装nodejs ...

        不支持百分比,长度单位只支持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

    展开全文
  • WEEX

    千次阅读 2018-05-28 14:30:40
    一、WEEX
    一、WEEX
    展开全文
  • Weex A framework for building Mobile cross-platform UI. Join Us Join us through mailing list. Convenience Distribution Since 0.28.0, Weex would publish two convince binary in each release for ...
  • [Android] Weex runtime error

    2020-11-27 00:06:18
    I built the project using <code>npm run build:weex && npm run copy:android, and opened the project with Android studio. Runtime details: <p>Android studio 2.2.2 Android emulator Nexus_5X_API_...
  • <div><p>npm install weex-tool 直接安装的是weex-debuggerv1.0.6啊,之前用的老版的debugger,在安卓项目中直接开启 WXEnvironment.sDebugServerConnectable = true; WXEnvironment....
  • Android代码-weex

    2019-08-06 07:44:18
    Weex-Fork 该fork基于最新Weex-dev,调整了Weex默认的list加载更多方式,简单暴力修改了源码,使其拥有自然滑动加载更多的能力。【仅修改了Android】 考虑到目前WEEX处于发展阶段,因此该修改仅仅用作前期需求的...
  • weex debug执行问题

    2020-12-01 20:38:33
    <div><p>debug的时候,两步扫码都没有问题,playground用的是市场最新版本,但是进入debugger,就会出现: Warning:The session with ...weexteam/devtool-for-Apache-Weex</p></div>
  • <div><p>首先输入相关命令 <img width="733" alt="2017-06-27 12 11 55" src="https://img-blog.csdnimg.cn/img_convert/c81fb3b871aa6bef6d1f43f0eaf61d00.png" /></p> ...weexteam/devtool-for-Apache-Weex</p></div>
  • <div><p>In Weex you can write code with Vue, a progressive framework for building user interfaces. Also you can find some tools and resources by it. <p>So this introduction assumes you have knowledge ...
  • <p><code>E/weex: reportJSException >>>> instanceId:1, exception function:createInstance, exception:ReferenceError: weex is not defined</code></p> <p>it's thrown because of the line ...
  • 主要介绍了Weex开发之WEEX-EROS开发踩坑(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 随着Weex跨平台技术的持续火热,一时间涌现出了一大批基于Weex的开源解决方案,Weex Eros就是这么一个面向前端Vue的开源APP解决方案。 目前,如果直接使用Weex框架开发应用会存在很多痛点,诸如初始化启动的环境问题...

    随着Weex跨平台技术的持续火热,一时间涌现出了一大批基于Weex的开源解决方案,Weex Eros就是这么一个面向前端Vue的开源APP解决方案。 目前,如果直接使用Weex框架开发应用会存在很多痛点,诸如初始化启动的环境问题、项目工程化问题、版本升级与版本兼容问题和不支持增量更新等,而Weex Eros等开源解决方案能对上述问题进行有效的解决。 Weex Eros的定位不是组件库,而是基于Weex封装的面向前端Vue的一整套APP开源解决方案,它关心的是整个APP项目。在Weex的强大支持下,用一份Vue代码即可编译出iOS、Android两端原生的app,并且通过Weex Eros内置的热更新逻辑和开源的服务器逻辑,开发的APP还具有热更新能力。

    weex-eros是weex的一套解决方法,使用vue语法糖,对于前端开发者来说可以轻松上手,文档如下:
    weex:https://weex.apache.org/zh/
    weex-eros:https://bmfe.github.io/eros-docs/#/
    分享一篇入门文章:https://zhuanlan.zhihu.com/p/51302413

    由于weex-eros安卓端久久不更新,导致开发过程中安卓端总会有那么些问题,需要大家动动手改改SDK源码,可能需要对原生知识进行补充或者定制开发。

    本文针对EROS 2018.10.11 更新的版本进行的介绍,原文链接:WEEX-EROS开发小笔记

    1,屏幕旋转问题

    在android/WeexFrameworkWrapper/app/src/main/AndroidManifest.xml这个文件中,
    控制屏幕旋转,需要添加:

    android:screenOrientation="user"
    android:configChanges="orientation|keyboardHidden|screenSize"
    
    • screenOrientation表示用户当前首选方向,如果值是’sensor’,关闭屏幕旋转也是会旋转,会根据重力传感器切换。
    • configChanges用于配置横竖片切换,配置configChanges为以上配置时,切屏不会重新调用各个生命周期,只会执行onConfigurationChanged方法,Activity中的数据不会被销毁。

    2,键盘挡住输入框问题

    防止键盘挡住输入框,自动将页面上顶,需要添加如下配置:

    android:windowSoftInputMode="adjustPan"
    

    具体可以参考下图:
    在这里插入图片描述
    参考资料:https://blog.csdn.net/u010005281/article/details/79531474

    3,点击对话框背景或按返回按钮对话框消失

    使用Android studio打开WEEX-EROS的Android源码,然后再源码中查找ModalManager.java这个SDK源码文件,将下图圈起来的位置设置为false即可,对应的是setCancelabel(calcel)这个属性。
    在这里插入图片描述
    参考资料:https://www.cnblogs.com/howlaa/p/4126536.html

    WEEX的Picker模块如果选项多的话会出现默认选项有多个的情况,需要将Picker模块的SDK源码替换成官方github上的最新源码,官方github源码地址

    4,iOS屏幕旋转

    EROS本身是不支持横屏开发的,如果要进行横屏开发,可以勾选Landscape Left和Landscape Right两个选项,如下图。
    在这里插入图片描述
    参考资料:https://www.jianshu.com/p/e0e6b5493c34

    5, 修改包名

    修改原生Android工程包名

    原生Android工程在打包的时候需要修改Android原生工程的包名,对于WEEX-EROS项目来说,只需要修改Android的gradle.properties的APPLICATION_ID即可。
    在这里插入图片描述

    修改原生iOS工程包名

    iOS原生的包名比较好修改,如下图:
    在这里插入图片描述
    另外,Android修改完SDK源码后需要对文件夹做修改才可以提交到git上,不然修改完没提交到git,下次拉下来,重新安装Android依赖就白改了,打开文件夹下的.gitignore文件,删除wxframework和sdk,然后添加如下配置:

    # eros 
    platforms/android/WeexFrameworkWrapper/app/src/main/assets/bundle.zip 
    platforms/android/WeexFrameworkWrapper/app/src/main/assets/bundle.config
    platforms/ios/WeexEros/WeexEros/bundle.zip 
    platforms/ios/WeexEros/WeexEros/bundle.config
    !.gitkeep
    ip.txt
    

    然后分别进入platforms/WeexFrameworkWrapper/nexus、platforms/WeexFrameworkWrapper/wxframework文件夹下执行rm -rf .git清除原本的git信息,之后就可以将Android的源码提交到git仓库里了,之后拉下来不用再安装Android依赖了。

    6, CocoaPods多个版本切换问题

    EROS推荐1.4.0,因为当前使用的WXDevtool插件(1.5.3)基于1.4.0,个人仅发现此插件有问题,可以使用如下的版本来查看本地的CocoaPods版本。

    gem list --local | grep cocoapods
    

    在这里插入图片描述
    然后,可以使用下面的命令来查看当前系统默认使用CocoaPods版本。

    pod --version
    

    如果涉及多个CocoaPods版本,那么怎么管理CocoaPods呢?此时,我们需要安装一个Bundler管理工具。

    gem install bundler
    

    使用方法

    1.到Podfile文件所在目录输入以下命令,创建Bundler的配置文件Gemfile。

    bundle init
    

    2.将Gemfile文件修改成以下内容,版本号可根据自己的需求修改。
    在这里插入图片描述
    3.最终,如果要使用指定的CocoaPods去安装插件只需要在pod命令上加上bundle exec前缀。

    bundle exec pod update
    
    展开全文
  • <div><p>main.vue文件内容: <pre><code> <template> <div id="app"...执行weex debug src/main.vue,...如果是执行weex src/main.vue的话&...weexteam/devtool-for-Apache-Weex</p></div>
  • Weex记录

    2020-11-19 11:59:53
    Weex 对于长度值目前只支持px和wx(不受屏幕宽度和viewPortWidth影响),不支持相对单位(em、rem)。 2.盒模型 Weex 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含...

空空如也

1 2 3 4 5 ... 20
收藏数 4,394
精华内容 1,757
关键字:

weex