• Weex系列-入门1


    1、概述

    Weex:一套简单易用的跨平台框架,实现Android、ios、web三端一致的应用。详情请见:http://weex.apache.org/cn/guide/
    VueJS:weex使用Vue做为表现层框架,简单的说就是用来实现页面UI。它是一个渐进式的JavaScript框架。开发者能够通过撰写.vue文件,基于template标签,style标签,script标签快速构建组件化的web应用。详情请见:https://cn.vuejs.org/v2/guide/

    2、工作原理

    整体流程图:http://weex.apache.org/cn/guide/intro/how-it-works.html

    3、搭建环境

    1、安装依赖
Weex官方提供了weex-toolkit的脚手架工具来辅助开发和调试。所以首先需要的是安装Node.jsweex-toolkit。详情请见:http://weex.apache.org/cn/guide/set-up-env.htmlhttp://t.cn/RYTTCe4。


    (1)、Node.js:在官网下载。安装完成后,使用命令:node -v检测是否安装成功;


    (2)、weex-toolkit:安装完了Node.js,npm(包管理工具)也随之安装了。所以,可以通过npm命令:npm install -g weex-toolkit来安装weex-toolkit。国内的开发可以考虑使用淘宝的npm镜像cnpm安装weex-toolkit:npm install -g cpm cnpm install -g weex-toolkit。安装结束后使用weex的命令:weex —help,它会显示出weex命令行的各参数,就表示安装成功了。

    2、创建工程
:首先在demo10目录下打开命令窗口,运行命令:weex init。执行完命令后,在 demo10 目录中就创建了一个使用 Weex 和 Vue 的模板项目。



    4、页面结构

  • 界面

  • Weex通过DOM模型方式管理页面。首先页面会被分解为一个DOM树,每个DOM节点代表一个相对独立的视图单元,然后不同的视图单元之间通过树形结构组合在一起了,构成一个完整的页面。
  • 组件
  • 支持文本、图片、视频、滚动条、列表等组件。
  • 布局系统

  • Weex的组件会按照一定的布局来排布。支持CSS中的盒模型、flexbox和绝对/相对/吸附布局这三大块布局模型。
  • 功能

  • Weex提供了丰富的系统API供调用,如弹对话框和toast等。
  • 生命周期
  • 每个Weex页面都有自己的生命周期,页面从开始被创建和最后被销毁,会经历整个过程。 详情请见:http://weex.apache.org/cn/guide/intro/page-architecture.html

    5、生命周期

  • 相关阅读:
    Node.js meitulu图片批量下载爬虫1.04版
    Node.js meitulu图片批量下载爬虫1.03版
    Node.js meitulu图片批量下载爬虫1.02版
    Node.js 解析gzip网页(https)
    Node.js 访问https网站
    Node.js meitulu图片批量下载爬虫1.01版
    我曾经七次鄙视自己的灵魂 卡里.纪伯伦
    ZT:有些人,活了一辈子,其实不过是认真过了一天,其余时间都在重复这一天而已
    节点对象图与DOM树形图
    DOM(文档对象模型)基础加强
  • 原文地址:https://www.cnblogs.com/hacjy/p/8136175.html
  • Copyright © 2020-2023  润新知