精华内容
下载资源
问答
  • 阿里Weex框架快速体验与环境搭建

    万次阅读 2016-09-30 16:36:00
    目录阿里Weex框架快速体验与环境搭建weex sdk集成到Android工程weex服务项目搭建Weex优雅的“降级”到 HTML51. 前言Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持...

    本期六篇文章目录(可点击跳转)

    一. 阿里Weex框架快速体验与环境搭建

    二. weex sdk集成到Android工程

    三. weex服务项目搭建

    四. Weex优雅的“降级”到 HTML5

    **五. weex项目实战篇(一) **

    **六. weex项目实战篇(二) **


    1. 前言

    Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。
    对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。开发者可通过Weex官网申请内测。
    开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

    2.环境搭建

    1)因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js。
    第一步:下载安装文件
    下载地址:官网http://www.nodejs.org/download/
    这里用的版本是(node-v6.2.0-x64.msi)
    第二步:下载完成之后,双击 node-v6.2.0-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面,一路next完成安装。
    第三步:安装npm相关环境。
    在命令行中切换到nodejs目录
    这里写图片描述
    键入命令:npm install express 回车等待安装express…
    键入命令:npm install jade 回车等待安装jade…
    键入命令:npm install mysql回车等待安装mysql…
    这里写图片描述

    2)在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序

    npm install -g weex-toolkit
    

    如图所示:
    这里写图片描述
    在安装结束后,你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后,你应该看到如下内容显示:
    这里写图片描述
    (请使用 weex --version 命令检查你的weex-toolkit版本是否大于 0.1.0)
    至此,环境已经全部安装完毕。

    3.weex快速体验

    1)我们先编写一个列表项,命名tech_list.we文件( .we 是Weex推荐的后缀名 )

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    2)在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

    weex tech_list.we
    

    如图所示:
    这里写图片描述
    成功后,你系统默认浏览器的窗口将自动打开以显示如下内容。
    这里写图片描述

    3)现在,让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端,切换到保存tech_list.we文件的目录,执行:

    weex tech_list.we --qr -h {ip or hostname}
    

    如图所示:
    这里写图片描述
    此二维码用来后面扫描。

    4)安装官方demo:playground.apk
    下载apk文件,Weex Playground
    下载安装后点击App中的扫码图标,然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。
    这里写图片描述

    这里我需要强调,这个列表是完全由native view(不是Webkit)来进行渲染的,相比Webkit渲染的界面,你的App能获得更快的页面加载速度和更少的内存开销。

    现在你能尝试变更一些 tech_list.we中的内容,在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化,这个特性常被称为 Hot-Reload ,希望能帮助你更方便的进行Weex开发。

    5)变化布局
    我们更改tech_list.we的内容

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">helloWorld</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

    weex tech_list.we
    

    奇迹出现了,不需要重新部署,只要本地调整,app页面就改变了,更后台部署一样。
    这里写图片描述

    4.其他

    之前做了一年基于luajava实现的跨平台,性能跟安全问题都解决了,后面看了一样聚划算的luaview,跟他们应该差不多,我的感受是开发效率是个问题,没有可视化布局,不能debug,开发效率低。
    其实跟weex一样,如果有特殊性能要求的地方,就使用原生代码写,然后前端脚本语言调用,思想都是差不多的。

    5.一些书籍

    项目demo参考:github下载地址:https://github.com/cyforever123/weex-hongkong

    Weex快速上手教程
    Weex中文文档


    如有错误欢迎指出来,一起学习。
    在这里插入图片描述

    展开全文
  • weex-ui weex - ui 阿里飞猪出品 https://github.com/alibaba/weex-ui 使用 进入 weex 项目根目录 npm i weex-ui -S 配置 (1) 以下面方式使用 import { WxcComponent1, WxcComponent2 } from “weex-ui” 缺点是导入...

    weex-ui

    weex - ui 阿里飞猪出品

    https://github.com/alibaba/weex-ui

    使用

    进入 weex 项目根目录

    npm i weex-ui -S

    关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。

    配置

    (1) 以下面方式使用
    import { WxcComponent1, WxcComponent2 } from “weex-ui”

    缺点是导入了全部的 weex-ui 组件,也会打包;

    安装插件

    npm i babel-preset-stage-0 babel-plugin-component -D

    配置插件

    在 .babelrc 文件中添加插件配置

    {
    “presets”: [
    “es2015”,
    “stage-0”
    ],
    “plugins”: [
    [
    “component”,
    {
    “libraryName”: “weex-ui”,
    “libDir”: “packages”
    }
    ]
    ]
    }

    使用

    以标题为例子

    <div>
    
        <wxc-minibar title="睿畜保"
                      background-color="#009ff0"
                      text-color="#FFFFFF"
                      right-text="更多"></wxc-minibar>
        <text>Index 页面</text>
    
    
    </div>
    

    (2) 以另一种方式

    只导入自己想用的组件即可

    import WxcComponent1 from “weex-ui/packages/wxc-component1”
    import WxcComponent2 from “weex-ui/packages/wxc-component2”

    展开全文
  • weex框架入门

    2019-12-13 13:54:37
    1.特点:跨平台的移动开发工具,支持es6,性能优异。...2. weex Playground:是weex的调试工具。 3. 搭建weex的环境: 3.1 安装node:程序cmd->node-v查看node版本(npm -v查看npm版本)。 3.2 安装全局we...

    参考:https://www.bilibili.com/video/av14478917/

    1.特点:跨平台的移动开发工具,支持es6,性能优异。

    2. weex Playground:是weex的调试工具。

    3. 搭建weex的环境:

           3.1 安装node:程序cmd->node-v查看node版本(npm -v查看npm版本)。

           3.2 安装全局weex:npm install weex-toolkit -g ,按照成功后输入 weex  可以查看指令,weex -v查看weex版本号。

           3.3 找到要新建的weex项目的地方创建一个weex项目:weex create item(项目文件名)。

           3.4 安装依赖npm install:进入cd item项目命令行,执行npm install。

           3.5 npm run serve & npm run dev:运行项目,npm run serve=npm start,npm run dev表示实现同步视图更新数据。

    #可以在package.json中配置 npm run devp ,即允许npm run devp相当于同时运行npm run dev 和 npm run serve
    "scripts":{
        "devp":"npm run dev & npm run serve"
    }
          3.6 playground扫码查看vue项目, 一定要让手机和电脑连接同一网络(或者360无线wife手机连接)。

          3.7 weex debug:调试模式。

    注意:报错Maximum call stack size exceeded,是需要给npm降级或者升级

                        降级 : npm install -g npm@5.4.0

                        升级 : npm install -g npm  升级到最新版

              报错Unexpected end of JSON input while parsing near,npm cache clean --force

              提示this command need to install weexpack,  npm install -g weexpack

              报错:Cannot assign to read only property'exports',参考:https://mp.csdn.net/postedit/85645330。注意:手机playground扫码查看vue项目, 一定要让手机和电脑连接同一网络(或者360无线wife手机连接)。

    编译和运行
    默认情况下 weex create 命令并不初始化 iOS 和 Android 项目,你可以通过执行 weex platform add 来添加特定平台的项目。
     
    weex platform add ios
    weex platform add android
    由于网络环境的不同,安装过程可能需要一些时间,请耐心等待。如果安装失败,请确保自己的网络环境畅通。
     
    为了能在本地机器上打开 Android 和 iOS 项目,你应该配置好客户端的开发环境。对于 iOS,你应该安装
    并且配置好 Xcode。对于 Android,你应该安装并且配置好 Android Studio。当开发环境准备就绪后,
    运行下面的命令,可以在模拟器或真实设备上启动应用:
     
    weex run ios
    weex run android
    weex run web
    4. weex通用样式:

           4.1 适配和缩略:

               4.1.1 weex目前只支持像素值px:不支持相对单位(em,rem),适配以750px为标准。

               4.1.2 设定边框:weex的border不支持border:1px  solid red这样的组合写法。

               4.1.3 设定背景色:weex不支持background:red,只能background-color:red。

           4.2 定位:

               4.2.1 weex支持position定位:默认值是relative。

               4.2.2 weex目前不支持z-index:但越靠后的元素,层级越高,所有对需要层级高的元素可排列在后面。

               4.2.3 定位元素超出容器边界:android下超出部分因此,因为android端元素overflow默认超出hidden。

           4.3 其他:

               4.3.1 weex支持线型渐变background-image:linner-gradient,不支持劲向渐变background-image:radial-gradient。

               4.3.2 weex中box-shadow仅仅支持ios系统。

               4.3.3 weex的<image/>组件无法定义一个或几个角border-radius,只对ios有效,对android无效。

               4.3.4 weex中,flexbox是默认且唯一的布局,每个元素都默认有display:flex属性。

    5. weex内建组件:

          5.1 <a>组件:

               5.1.1 weex的a组件定义了weex页面打包后的一个js地址。如<a herf="../dist/weex.app.js"></a>,但是不能链接网页如<a href="www.baidu.com"></a>。

               5.1.2 组件中无法直接添加文本 ,需要<text>在这里添加文本</text>。

               5.1.3 支持除了自己以外的所有weex组件作为子组件。

               5.1.4 支持所有通用样式。

               5.1.5 不要为<a>组件添加click事件。

          5.2 <web>组件:

              5.2.1 用于嵌入一张网页,src为网页资源路径,如<web src="www.baidu.com" ref="myweb"></web>。

              5.2.2 不支持任何子组件。

              5.2.3 pagestart,<web @pagestart="">组件开始加载时执行。

              5.2.4 pagefinsh,<web @pagefinsh="">组件完成加载时执行。

              5.2.5 error,<web @error="">组件加载错误时执行。

    6. weex内建模块:

           6.1 <webview>模块:

              6.1.1 定义:一系列的<web>组件的操作接口,可以通过this.$refs.el来获取元素的应用。

    在script中引入webview模块:const webview=weex.requireModule("webview");webview.goBack(this.$refs.myweb);

              6.1.2 API:     

                    a.goBack(webElement),加载历史记录的前一个资源地址。

                    b.goForward(webElement),加载历史记录的下一个资源地址。

                    c.reload(webElement),刷新当前页面。

    #在.vue文件中,web嵌入其他页面
    <template>
        <web :src="src" ref="myweb" @pagestart="start" @pagefinish="finish" @error="error"></web>
    </template>
    <script>
        const webview=weex.requireModule("webview");webview.goBack(this.$refs.myweb);
        export default{
            data(){
                return {
                    src:"www.baidu.com"
                }
            },
            methods:{
                start(){},  //开始加载
                finish(){},  //加载结束
                error(){},   //加载错误
            }
        }
    </script>

    展开全文
  • weex框架应用

    2021-01-22 14:46:33
    1.安装nodejs(目前我用的版本是...使用npm i -g weex-toolkit命令来安装Weex命令行程序,安装完成之后如下图所示 5.在环境变量中添加安装node文件的根目录 6.执行weex命令创建项目然后运行就可以直接在web端显示了

    1.安装nodejs(目前我用的版本是(node-v14.15.4-x64.msi)),可去官网下载安装链接:链接: link
    2.安装完成之后切换到安装目录(我的安装目录是D:\programFiles\node)
    3.使用npm命令分别安装express/jade/mysql
    键入命令:npm install express
    键入命令:npm install jade
    键入命令:npm install MySQL
    安装完成之后可在node_modules文件夹中查看是否安装完成
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    4.使用npm i -g weex-toolkit命令来安装Weex命令行程序,安装完成之后如下图所示
    在这里插入图片描述
    5.在环境变量中添加安装node文件的根目录
    在这里插入图片描述
    6.执行weex命令创建项目然后运行就可以直接在web端显示了

    展开全文
  • weex框架

    2018-08-02 09:50:00
    weex优势: (1)支持ES6规范 (2)性能优异,开发简介标准,提及小巧。 (3)跨平台 weex调试工具:weexplayground weex环境搭建: (1)安装 node.js、npm (2)npm install -g veex-toolkit (3)安装...
  • Weex框架源码分析(Android)(一)

    千次阅读 2019-04-10 18:56:23
    一、weexSDK初始化流程 WXSDKEngine.initialize(Application application,InitConfig config); //WXSDKEngine的init方法已经被弃用,weex的初始化需要使用下面这个initialize方法 public static void initialize...
  • weex框架 weex基于vue2.0开发框架,包括三端集成,组件库提供,weex api封装〜 目前Weex官网域名统计如下: https://weex.apache.org : Apache 官网地址,部署于 apache 仓库,国内访问速度较慢。 ...
  • title: 阿里的weex框架到底是什么 date: 2016-09-27 10:22:34 tags: vue, weex category: 技术总结 --- weex 工作原理 首先看下官方的说法:transformer 会把 template, style, script 都转换成一段段 json 或者 js...
  • 1 安装依赖node.js 1.1 node 版本 C:\Users\**&gt;node -v v10.15.1 1.2 npm包管理工具版本(当前,node会同时安装npm) C:\Users\**&...npm install -g weex-toolkit WINDOWS下安装wee...
  • weex前端框架搭建

    2020-06-28 12:56:28
    g weex-toolkit weex -v // 查看当前weex工具版本 使用工具WebStorm 1.2 weex 跨终端前端框架 Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成...
  • <p>sortable,vue-slicksort,vuedraggable都用过了,在web端可以正常运行 但是在移动端就没有效果了,求大神解答一下</p>
  • 阿里weex框架环境搭建

    2017-04-18 14:25:00
    Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了...
  • weex框架使用

    2021-12-08 15:32:21
    布局11.dom模块12.navigator模块13.weex页面跳转传值的优雅方式14.weex左滑置顶删除事件15.page事件1.viewappear事件2.viewdisappear事件16.navigator跳转17.stream请求模块(接口请求)18.loading加载(建议使用weex-...
  • Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。 对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了...
  • 转载地址:http://smilevenus.com/2016/07/03/阿里Weex框架Android平台初体验/ 分享到:  豆 Weex 是什么HelloWorldHelloWorld实践 参考: 声明:转载请注明出处,尊重作者劳动成果,谢谢合作。 Weex ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,203
精华内容 4,081
关键字:

weex框架