weex环境配置快速上手

阿蛮家 阿蛮家     2023-02-25     228

关键词:

一、前言

        4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。


        Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。


        对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。


        与现有的开源跨平台移动开放项目如Facebook的React Native和微软的Cordova相比,Weex更加轻量,体积小巧。因为基于web conponent标准,使得开发更加简洁标准,方便上手。Native组件和API都可以横向扩展,方便根据业务灵活定制。Weex渲染层具备优异的性 能表现,能够跨平台实现一致的布局效果和实现。对于前端开发来说,Weex能够实现组件化开发、自动化数据绑定,并拥抱Web标准。

        2016阿里云大会刚过,本次阿里云大会上,手淘团队公开了手淘的技术框架,手淘由三大容器和五大解决方案作为技术支撑,其中三大容器分别是ATLAS、H5容器和WEEX。值得让开发者兴奋的消息是,本次大会阿里神秘的weex全部开源了。

好了,关于weex的各种新闻报道就介绍到此了(复制粘贴),开发者最关心的还是怎样把weex集成到自己的项目里面。从认识weex到搭建weex环境搭建,再到weex项目集成到自己的项目,也踩过一些坑,在这里把weex环境搭建和集成的教程分享给大家,希望大家能快速上手weex项目,少走些弯路,从此项目里H5界面就不用愁了。本篇文章主要讲解Mac系统配置weex环境,windows系统环境配置大同小异。

二、weex环境搭建

1、Node.js安装

weex环境基于Node.js,所以第一件要做的事情就是安装Node.js。N

Node.js官网 https://nodejs.org/en/ 根据自己的系统安装对应的Node.js版本。



接下来的事情就是“下一步”直至“关闭”就OK了。


上面有这样一句话“Make sure that /usr/local/bin is in your $PATH”,意思是叫你检查环境变量是否配置了Node.js的环境变量。你可以这样去检查:

# 使用vim打开.bash_profile文件,加入java环境变量,终端输入下面命令,回车,进入bash_profile编辑界面
$ vim .bash_profile
键盘“I”或者“Insert”进入编辑vim编辑模式,添加下面这句配置

export PATH=$PATH:/usr/local/bin

键盘“esc”,然后“:”,然后“wq”,退出并保存已编辑文件,环境变量就配置好了。
好了,Node.js环境至此就配置好了,可以在终端输入 node -v 命令查看node.js版本。接下来配置weex工具插件,也就是weex环境。
2、weex环境配置
继续在终端输入按次序输入如下命令
 
  1)sudo chown -R $USER /usr/local //加上管理员权限
 
 
  2)npm config set registry https://registry.npm.taobao.org //指定淘宝镜像
 
 
  3)npm install -g weex-toolkit //安装weex工具插件
 
注意,第3)点基于第1)点,weex-toolkit的安装是需要终端在管理员权限下安装,不然会报错,安装失败;第2)点时指定weex插件的镜像地址,配置下会安装速度会快点,不配置问题也不大的;第3)点需要等待一段时间,安装成功后,输入终端输入 weex 命令,如果有info信息大于,说明安装成功。
好了,weex工具插件至此也安装好了,接下来我们就开始编写.we文件,通过该工具测试并编译成对应的.js文件。
3、编写.we文件,测试效果
我们可以在桌面新建一个命名为weex的文件,然后终端cd到该目录,我们在该目录下新建一个hello.we文件

终端输入下面命令进入编辑模式:
vim hello.we
把这段即将打印“Hello World.”的代码写入编辑器:
<template>
  <div>
    <text style="font-size:100px;">Hello World.</text>
  </div>
</template>
退出并保存。这样,hello.we文件就新建成功了。
接下来,我们再在终端输入如下命令:
weex hello.we
即可运行“Hello World.”到浏览器页面了。

我们还可以在终端输入下面命令,会在终端生成一个二维码,用官方提供的weex demo的apk中的“扫一扫”,即可在手机上浏览页面效果,官方提供的demo apk下载地址:https://alibaba.github.io/weex/download.html
weex hello.we --qr

注意,红色框中的英文,意思是手机端的网络和电脑端的网络要在同一局域网(即连接同一个wifi),不然手机端不能预览效果。


好了,至此,在weex工具的帮助下,.we文件也能跑起来了,并能时刻测试预览界面效果。
怎样把weex项目集成到自己的项目中呢?下一篇博文将会给大家详细介绍喔!
4、花旦,编写更多的.we文件,预览效果
weex中文文档地址(快速上手里面有个教程教大家如何用weex写列表):
https://github.com/weexteam/article/wiki/Weex%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3
weex github地址:
https://github.com/alibaba/weex
 

weex快速上手

...快速构建组件化的web应用。本章会教你如何搭建本地开发环境进行Weex开发。开始之前,希望你能对Weex和 查看详情

weex中文文档

...显示控制逻辑渲染控制逻辑组件封装找节点组件通讯页面配置和数据[How-tos][PreviewInBrowser][PreviewinNative][Custo 查看详情

java开发快速上手

...言基础常识1.1什么是Java1.1.1跨平台性1.2如何搭建Java运行环境1.2.1了解JDK与JRE1.2.2jdk下载与安装1.2.3配置开发环境1.3如何写Java代码1.3.1我的第一个Java程序1.5注解的使用1.6思维导图第二章变量_常量_运算符2.1什么是变量2. 查看详情

weex快速创建工程helloworld

开发环境根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。开发IOS应用需要MacOS系统开发Android应用,Ma... 查看详情

reactnative快速上手(代码片段)

工欲善其事,必先利其器。搭建ReactNative开发环境,需要安装以下辅助工具。Node.js:ReactNative需要借助Node.js来创建和运行JavaScript代码。原生开发工具及环境:ReactNative的运行需要依赖原生Android和iOS环境,因此需要分别安装原生An... 查看详情

weex开发环境配置流程(代码片段)

1,安装node.jsnode官网下载,然后安装即可。安装完成以后可以查看node和npm版本$node-vv6.11.3$npm-v3.10.102,安装weex-toolkit$npminstall-gweex-toolkit$weex-v//查看当前weex版本3,安装package.json文件中备注的依赖库$npminstall4,踩坑:node-sass安装失败... 查看详情

dpdk快速上手指南(18.02)(代码片段)

...目的就是让用户快速用起来。本文档描述怎样在linux应用环境下编译和运行一个DPDK应用程序,而不过多深入细节。1.1文档路线图以下是针对所有D 查看详情

小白快速上手搭建属于自己的网站

...选择linux-centos系统然后自己也可以学学linux系统的部署和环境的使用。三、网站备案,对已解析成功的域名进行备案,备案需要身份证扫描件,备案专用表格照,以及个人幕布照。(整体时间预计10-15天)四、备案成功网站搭建... 查看详情

小白快速上手搭建属于自己的网站

...选择linux-centos系统然后自己也可以学学linux系统的部署和环境的使用。三、网站备案,对已解析成功的域名进行备案,备案需要身份证扫描件,备案专用表格照,以及个人幕布照。(整体时间预计10-15天)四、备案成功网站搭建... 查看详情

小白如何快速上手搭建属于自己的网站

...选择linux-centos系统然后自己也可以学学linux系统的部署和环境的使用。三、网站备案,对已解析成功的域名进行备案,备案需要生份证扫描件,备案专用表格照,以及个人幕布照。(整体时间预计10-15天)四、备案成功网站搭建... 查看详情

快速上手virtualenv

  五分钟轻松学会管理项目开发环境。  在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.x。所有第三方的包都会被pip安装到Python3的site-packages目录下。  pycharm安装可以在设置里进行管理。   如果我... 查看详情

weex开发前配置

weex环境配置:win10nodejavagitweex-toolkit:npminstallweex-toolkit-g在安装weex-toolkit的时候,尽量不要使用cnpm,因为我有过使用cnpm安装失败的经历,weex-vnpminstallwebpack-g安装android-studio:E:UserslhlAppDataLocalAndroidsdkwin+R放进去找 查看详情

axure快速上手

...创建原型,同时支持多人协作设计和版本控制管理。工作环境 1.主菜单和工具栏执行常用操作,如文件打开、保 查看详情

rk3588快速上手|01-rk3588开发板快速上手

...发板1.Core-3588J核心板2.ITX底板3.wiki三、LinuxSDK1.SDK目录2.SDk配置文件四、编译ubuntu固件1.编译需要的额外工具2.编译配置3.编译3.1.准备根文件系统3.2.全编译3.3.部分编译4.烧录 查看详情

rk3588快速上手|01-rk3588开发板快速上手

...发板1.Core-3588J核心板2.ITX底板3.wiki三、LinuxSDK1.SDK目录2.SDk配置文件四、编译ubuntu固件1.编译需要的额外工具2.编译配置3.编译3.1.准备根文件系统3.2.全编译3.3.部分编译4.烧录 查看详情

springboot日志快速上手简单配置

默认配置日志级别从低到高分为:TRACE<DEBUG<INFO<WARN<ERROR<FATAL。如果设置为INFO,则低于INFO的信息都不会输出其他的依次类推默认情况下,SpringBoot会用Logback来记录内部日志,并用INFO级别输出到控制台你不用做任何设置... 查看详情

(转)django学习之第二章:django快速上手

...Django非常容易。因为Django可以运行在任何可以运行Python的环境中,所以可以以多种方式进行配置。在本章我们将尝试覆盖几种常见的Django安装场景。Django是以100%纯Python代码写就,所以你需要安装Python,Django要求安装Python或更高... 查看详情

redis快速上手手册(代码片段)

文章目录环境配置中文乱码问题解决远程连接信任问题redis键的基本操作字符串命令哈希命令列表集合连接命令使用案例关于redisCommand以及redisReply这两天走到redis模块的应用了,转身突然发现,写了那么些篇redis的原理... 查看详情