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 05 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
js微信分享API
Oct 11 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 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
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
js实现自动播放匀速轮播图
2020/02/06 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python高阶爬虫实战分析
2018/07/29 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
大四自我鉴定
2014/02/08 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年共青团工作总结
2014/12/10 职场文书
政审证明范文
2015/06/19 职场文书
学生会任命书范本
2015/09/21 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
Python实现位图分割的效果
2021/11/20 Python