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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
一个javascript参数的小问题
2008/03/02 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
django 修改server端口号的方法
2018/05/14 Python
python实现键盘控制鼠标移动
2020/11/27 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
《锄禾》教学反思
2014/04/08 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
服务行业演讲稿
2014/09/02 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
三下乡个人总结
2015/03/04 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
学生会自荐信
2019/05/16 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技