WEEX环境搭建与入门详解


Posted in Javascript onOctober 16, 2019

Weex简介

Weex 是阿里前端技术团队开源额一套跨平台开发方案,能以web的开发体验构建高性能、可扩展的 native 应用,Weex 的页面表示层使用 Vue ,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,Weex和React Native一样是当前流行的跨平台开发框架。Weex的官方地址为:https://weex.apache.org/。Weex最简单的方法是使用 Playground App 和在 dotWe 编写一个 Hello World 的例子,你甚至不需要安装任何的开发环境或编写native代码即可开始一个Weex程序。

环境搭建

开发Weex程序之前,需要先搭建好相关的开发环境,为了同时开发Android和iOS跨平台应用,你需要一台Mac电脑,然后安装一些必要的软件。

Homebrew

Homebrew是Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。安装命令如下:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

需要注意的是,在Max OS X 10.11以上版本中,homebrew在安装软件时可能会碰到/usr/loca目录不可写的权限问题,需要以管理员权限运行。

Node

Weex目前需要NodeJS 6.0或更高版本,Homebrew默认安装的是最新版本,一般都满足要求。

brew install node

安装完node后建议设置npm镜像以加速后面的项目构建过程。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!相关的命令如下:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Xcode

要支持 iOS 平台则需要配置 iOS 开发环境,而iOS开发工具使用的是Xcode,除此之外,还需要安装cocoaPods工具。

Android Studio

Android Studio是Android应用程序的开发工具,需要注意的是运行Weex的Android build-tool的版本需要高于23.0.2。

weex-toolkit

weex-toolkit 是官方提供的一个脚手架命令行工具,可以使用它进行 Weex 项目的创建,调试以及打包等功能。安装weex-toolkit的命令如下:

npm install -g weex-toolkit

weexpack

weexpack 是新一代的weex应用工程和插件工程开发套件,是基于weex快速搭建应用原型的利器。可以创建weex应用工程和插件工程,快速打包 weex 应用并安装到手机运行,还可以创建weex插件模版并发布插件到weex应用市场, 使用weexpack 能够方便的在在weex工程和native工程中安装插件。安装weexpack的命令如下:

npm install -g weexpack

工程创建

使用如下的命令创建项目:

weexpack create appName

创建后,Weex的工程的目录结构如下:

.md 
├── android.config.json 
├── config.xml 
├── hooks 
│  └── README.md 
├── ios.config.json 
├── package.json 
├── platforms // 平台模版目录 
├── plugins // 插件下载目录 
│  └── README.md 
├── src // 业务代码(we文件)目录
│  └── index.we 
├── start 
├── start.bat 
├── tools 
│  └── webpack.config.plugin.js 
├── web 
│  ├── index.html 
│  ├── index.js 
│  └── js 
│  └── init.js 
└── webpack.config.js

需要注意的是,使用上面命令创建的项目是不包含 ios 和 android 工程模版,所以,需要使用如下的命令创建安装依赖,然后再安装Android和iOS的工程模板。

npm install

安装 weex 应用模版

安装 weex 应用模版的模板命令如下,模版会被安装到platforms目录下。iOS平台的安装命令如下:

weexpack platform add ios

Android平台的安装命令如下:

weexpack platform add android

安装完成之后,会在platforms目录下看到如下的目录结构:

├── platforms 
│  ├── ios
│  └── android

编写Hello Word程序

打开/src/index.vue的文件,并将默认内容替换为如下的代码:

<template>
 <div class="wrapper" @click="update">
  <image :src="logoUrl" class="logo"></image>
  <text class="title">Hello {{target}}</text>
  <text class="desc">Now, let's use vue to build your weex app.</text>
 </div>
</template>

<style>
 .wrapper { align-items: center; margin-top: 120px; }
 .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
 .logo { width: 360px; height: 156px; }
 .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>
 export default {
  data: {
   logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
   target: 'World'
  },
  methods: {
   update: function (e) {
    this.target = 'Weex'
    console.log('target:', this.target)
   }
  }
 }
</script>

关于Weex更多的语法规则,可以参考开发手册。

运行

对于Web平台,执行如下的命令:

npm run build 
npm run dev & npm run serve

WEEX环境搭建与入门详解 

或者使用如下命令执行单页调试:

weex src/index.vue

真机和虚拟机运行

使用Xcode打开WEEX项目的ios目录,如下图所示:

WEEX环境搭建与入门详解 

WEEX环境搭建与入门详解 

打开后简单的简单点配置下基本配置,如项目名、识别符、版本、开发者等信息。

WEEX环境搭建与入门详解

你可以选择虚拟机或者真机执行iOS项目,不过执行前你要保证代码是最新打包的,打包的命令如下:

weex build ios

然后选择真机或者模拟器运行即可。

WEEX环境搭建与入门详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 #Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 #Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 #Javascript
关于JS模块化的知识点分享
Oct 16 #Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 #Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 #Javascript
微信小程序如何实现在线客服功能
Oct 16 #Javascript
You might like
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python fileinput模块使用实例
2015/06/03 Python
Python 统计字数的思路详解
2018/05/08 Python
python实现超市扫码仪计费
2018/05/30 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
python 线程的五个状态
2020/09/22 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
应届本科生推荐信范文
2013/12/25 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
社团活动总结范文
2014/04/26 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript