Hello WEEX

本不想写此引导性博文的,但个人在创建第一个Demo时确实出现了太多坑,且官方并未给出很好但入门引导。顾撰写此文,希望对初学者有所帮助,不至于出现“从入门到弃门而去”的现象。文中若有不当之处,还请不吝指正。

开发环境

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

  • 开发IOS应用需要MacOS系统
  • 开发Android应用,MacOS、Linux、Window均可
    下面以IOS开发环境为例进行介绍

必须安装的软件

Homebrew

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

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

译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local
目录不可写的权限问题。可以使用下面的命令修复:

$ sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js,或直接安装
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 IDE

如果要支持 iOS 平台则需要配置 iOS 开发环境
安装 Xcode IDE ,启动一次 Xcode ,使 Xcode 自动安装开发者工具和确认使用协议。
安装 cocoaPods。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

Android Studio

如果要支持 Android 平台则需要配置 Android 开发环境:安装 Android Studio(推荐)或者 Android SDK。打开 AVD Manager ,新建 Android 模拟器并启动 。(如果有安装 Docker ,请关闭 Docker Server 。)
保证Android build-tool的版本为23.0.2。

weex-toolkit

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

$ npm install -g weex-toolkit

安装成功后,你输入 weex,应该可以看到下面的提示效果:

如果你安装的过程中遇到了问题,比如 permission error 你可以去 weex-toolkit issues 找到解决方法。

weexpack

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

$ npm install -g weexpack

准备工程

创建工程

$ weexpack create appName

生成工程的目录如下:

WeexProject 
├── README.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

通过 create 命令创建的工程默认不包含 ios 和 android 工程模版,创建完成之后就可以切换到appName目录下并安装依赖。

$ cd appName && npm install

安装 weex 应用模版

添加应用模版,官方提供的模版默认支持 weex bundle 调试和插件机制,注意模版名称均为小写,模版被安装到platforms目录下。
IOS

  $ weexpack platform add ios

Android

  $ weexpack platform add android

安装模版之后,会在工程目录下增加如下模版目录

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

Hello Weex

直接上代码吧,一下是初始化的自带Weex代码,位于/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开发使用了VUE的框架,基本语法详见官方手册

运行看效果

web

执行如下命令

$ npm run build //web工程打包
$ npm run dev & npm run serve 

执行效果
或者执行单页调试

$ weex src/index.vue
  • 如果有EACCES报错,可以使用sudo命令执行。

执行效果

虚拟机&真机运行

官方给的启动指令为

$ weex run ios 

或者

$ weexpack run ios 

但是如此运行坑较多不说,问题排查起来也是很麻烦,推荐使用xcode运行

xcode运行

这块也是官方未提及的部分
添加Weex中ios工程
添加Weex中ios工程
选对工程文件,
注意:此处应选择文件WeexDemo.xcworkspace

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

你可以选择虚拟机活着真机执行
不过执行前你要保证代码是最新打包的
打包方式:

$ weex build ios 

注意了!到这个地方就不要进行下去了,直接control+c退出,因为如果继续进行下去就会覆盖掉之前在XCode上的配置,后面就没法继续进行了

这一步是关键骤主,要的作用是将weex工程打包成jsbundle文件,并且放入对应plantforms下的ios和android包下
具体地址为:

# ios位置
/platforms/ios/bundlejs/index.js
# android位置
/platforms/android/app/src/main/assets/dist/index.js

打包后即可安装到真机或者虚拟机了。

然后点击执行即可

如果你看到如下界面,说明你的环境和配置已经走通了,后面可以发挥你的真正实力了!

如果你看到的是如下界面,说明还有地方需要打磨

帮你填坑

如果你构建的时候报如下错误,请对号入座解决问题。
1、'ATSDK/ATManager.h' file not found

'ATSDK/ATManager.h' file not found


解决方法:
http://www.jianshu.com/p/88a3...

2、could not find gradle wrapper within android sdk

error: could not find gradle wrapper within android sdk. might need to update your android sdk


解决方法:
http://www.jianshu.com/p/5d92...

3、Environment variable $ANDROID_HOME not found

MacOS开发Android app经常会遇到环境的坑,$ANDROID_HOME就是其中之一


解决方法:
http://www.jianshu.com/p/a773...

4、weex-vue-render/index.js(404 Not Found)

资源报错【weex-vue-render/index.js】(404 Not Found)


解决方法:
http://www.jianshu.com/p/7586...

5、ERROR in xxx.js from UglifyJs

ERROR in index.js from UglifyJs

这是因为webpack在打包vue文件时没有成功转换ES6的语法
解决方法:
https://segmentfault.com/a/11...

其他问题后续持续更新,欢迎留言或关注专题【willspace

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的文章

36 条评论
klaus_xu · 2017年09月21日

请问怎么安装cocoapods?是按照官网上的sudo gem install cocoapods? 我现在遇到一个问题是:'WeexSDK/WeexSDK.h' file not found。不知道是不是因为cocoapods没有安装的原因。请问怎么解决呢

+1 回复

0
zwwill_木羽 作者 · 2017年09月21日
渣渣渣渣 · 2017年09月26日

非常感谢,貌似使用的是默认es5的语法。

+1 回复

eatcss · 2017年09月03日

感谢分享

回复

yumao · 2017年09月18日

厉害了!感谢

回复

0

希望对你有所帮助

zwwill_木羽 作者 · 2017年09月18日
0

@zwwill 我还想请教一个问问题weexpack 和 用weex create的方式创建有什么不同啊?不太理解这个

yumao · 2017年09月18日
0

@yumao weexpack算是weex-toolkit的增强版的套件,可以通过命令行创建 Weex 工程,添加相应平台的 Weex app 模版、插件等,适用于穿件完整工程,具体你可以看下官方文档https://github.com/weexteam/w...

zwwill_木羽 作者 · 2017年09月18日
许伦 · 2017年09月30日

npm run serve 后在chrome里,点击貌似不会触发事件(hello后面不会变成weex),请问是怎么回事?

回复

0

weex 注册的是 touch 事件,不是 click 事件,在 chrome 浏览器下只能触发 click 事件

zwwill_木羽 作者 · 2017年10月01日
渣渣渣渣 · 2017年10月27日

打包成ios的app 不是得使用苹果电脑?

回复

0

@渣渣渣渣 是

zwwill_木羽 作者 · 2017年10月27日
tan_c · 2017年11月02日

WeexDemo.xcworkspace 这个文件并不存在

回复

0

需要执行命令 weex run ios 才会构建

zwwill_木羽 作者 · 2017年11月02日
0

@zwwill 谢谢 前端想真机运行起一个demo还真是难啊... 光想看看ios上的效果都要怀疑人生 codesign那些什么的真是蛋疼

tan_c · 2017年11月02日
0

@zwwill 还是要问一下...因为以前做几个简单的iosapp都只是照教程来的 所以weex run ios 那里要填的参数我不怎么懂 而且本职不开发ios现在基本上也忘光了 appid就用以前别的可运行项目的appid改一下最后一段就行了对吧? 比如有个可以运行的项目是com.example.demo1 我这里填com.example.demo2 可以吗?codeSign是填那个开发证书那个名字吗 就是类似“iphone developer:xxxx@icloud.com (xxxxx)”这一串字符串是吗 然后那个profile填什么...我查了一下就是说有个profile文件 我要用他那个脚本去获取它的uuid对吧? 那个脚本要填个路径 我怎么找到那个profile的路径呢 然后最终那个profile那里填的是什么呢? 问了这么多实在不好意思 先谢谢了~

tan_c · 2017年11月02日
凉城殇 · 2017年11月14日

请问一下,我clone下来的,ios运行的时候报了这么一个错误,errorCode:-2013 functionName: exception:[8:6031] ReferenceError: Can't find variable: Vue,请问一下怎么解决

回复

0

需要安装执行环境和依赖包的。

zwwill_木羽 作者 · 2017年11月14日
0

你是说npm install吗,还是pod install

凉城殇 · 2017年11月14日
0

!!!! WARNING: You are on OS X 10.11 El Capitan, you may need to add the
!!!! WARNING: --unsafe-perm=true flag when running npm install
!!!! WARNING: or else it will fail.
!!!! WARNING: link:
!!!! WARNING: https://github.com/phonegap/i...

凉城殇 · 2017年11月14日
symboint · 2017年11月16日

请问一下安卓模版为何跑不起来..,报缺少iml文件和output.outputFile未定义..感觉纯前端要上手weex有难度啊?

回复

zwwill_木羽 作者 · 2017年11月16日

是的,还是需要点基础的,不然里面的坑踩不出来

回复

noear · 2017年11月29日

看了两遍,今天要照楼主的教程亲手做一个hello world试试💪💪💪

回复

seigo · 3月28日

请问下这是什么问题,我运行weex run ios 终端显示只装了一下4个依赖,

pod 'WeexSDK'   
pod 'WXDevtool'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'

跟楼主比少了2个,最后运行还报错os/lock.h file not found,不知道是在哪个文件夹下少了这个文件

回复

载入中...
zwwill_木羽 zwwill_木羽

4.8k 声望

发布于专栏

willspace

stay hungry stay foolish

47 人关注