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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
js仿微信抢红包功能
Sep 25 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP chr()函数讲解
2019/02/11 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
师范教师毕业鉴定
2014/01/13 职场文书
暑期培训班招生方案
2014/08/26 职场文书
小学数学国培研修日志
2015/11/13 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
全新239军机修复记
2022/04/05 无线电
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS