【入门】WEEX快速创建工程 Hello World

最新推荐文章于 2021-08-13 17:00:15 发布
最新推荐文章于 2021-08-13 17:00:15 发布
阅读量75 收藏
点赞数
文章标签： 移动开发 xcode 运维
原文链接：https://my.oschina.net/martin123/blog/1583254
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

开发环境

根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发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，应该可以看到下面的提示效果：
1460000010984861
如果你安装的过程中遇到了问题，比如 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

1460000010984862
或者执行单页调试

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

1460000010984863

虚拟机&真机运行

官方给的启动指令为

$ weex run ios

或者

$ weexpack run ios

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

xcode运行

这块也是官方未提及的部分
添加Weex中ios工程
1460000010984864
选对工程文件，
注意：此处应选择文件WeexDemo.xcworkspace
1460000010984865
打开后简单的简单点配置下基本配置，如项目名、识别符、版本、开发者等
1460000010984866
你可以选择虚拟机活着真机执行
不过执行前你要保证代码是最新打包的
打包方式：

$ weex build ios

注意了！到这个地方就不要进行下去了，直接control+c退出，因为如果继续进行下去就会覆盖掉之前在XCode上的配置，后面就没法继续进行了
bVUrim?w=1412&h=692
这一步是关键骤主，要的作用是将weex工程打包成jsbundle文件，并且放入对应plantforms下的ios和android包下
具体地址为：

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

打包后即可安装到真机或者虚拟机了。
1460000010984867
然后点击执行即可
1460000010984868
如果你看到如下界面，说明你的环境和配置已经走通了，后面可以发挥你的真正实力了！
1460000010984869
如果你看到的是如下界面，说明还有地方需要打磨
1460000010984870

帮你填坑

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

'ATSDK/ATManager.h' file not found

1460000010984871
解决方法：
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

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

3、Environment variable $ANDROID_HOME not found

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

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

4、weex-vue-render/index.js（404 Not Found）

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

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

5、ERROR in xxx.js from UglifyJs

ERROR in index.js from UglifyJs

1460000011212549

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

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

转载于:https://my.oschina.net/martin123/blog/1583254

weixin_34234823
关注
WEEX环境搭建与入门
xiangzhihong8的专栏
04-18 4336
Weex简介 Weex 是阿里前端技术团队开源额一套跨平台开发方案，能以web的开发体验构建高性能、可扩展的 native 应用，Weex 的页面表示层使用 Vue ，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，Weex和React Native一样是当前流行的跨平台开发框架。Weex的官方地址为：https://weex.apache.org/。Weex最简单的方法...
Flutter：从入门到实践
GitChat
07-02 2844
weex项目搭建
09-18
weex win10 搭建项目 nodejs vuejs androidstudio 生成apk
创建weex工程
brlf_gz的博客
10-26 282
创建weex工程
Weex项目创建
Sun~Neo
04-24 390
1、环境安装 安装Node.js 安装npm 2、创建weex项目 2.1、全局安装weex-toolkit npm install weex-toolkit -g 2.2、初始化项目(项目名全部小写) weex create 项目名 weex create weex-app 2.3、进入目录，安装依赖 cd weex-app npm install 2.4、启动...
weex服务项目搭建
热门推荐
曹银飞的专栏
10-10 1万+
1. 前言前面介绍了app本地调用js的方式（js文件放在assert目录下面），其实大部分都是调用远程js，本篇介绍app如何调用远程js文件。2.服务项目搭建步骤前提需要安装好weex环境，具体参见前面文章：环境搭建地址 接下来讲解如何使用weex-toolkit构建项目：1）创建项目： 命令行到任意文件夹，输入如下指令weex init 执行指令后，会看到如图所示的信息： 此时你会在
WEEX环境搭建与入门详解
10-16
WEEX最简单的入门方法是使用Playground App和在dotWe网站上编写一个简单的HelloWorld示例。这样无需安装任何开发环境或编写原生代码即可开始。 开发环境搭建： 为了开发Android和iOS跨平台应用，需要一台Mac电脑，...
Weex环境配置与快速入门指南
开发者可以通过Playground App和dotWe平台快速尝试编写Hello World程序，无需预先设置复杂的开发环境或编写原生代码。 在开始Weex开发前，需要确保已准备了合适的开发环境。首先，由于Weex支持Android和iOS平台，...
uni-app入门学习
An_Cool_bree的博客
06-28 1097
什么是 uni-app 1.1uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 官方的体验例子： 1.2uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。 跨端数量更多 平台能力不受限 性能体验更优秀 周边生态丰富 学习成本低 开发成本低 1.3功能框架 使用 uni-...
Weex学习第二篇：Hello world
weixin_33752045的博客
01-05 99
2019独角兽企业重金招聘Python工程师标准>>> ...
Weex新建项目流程
weianl的博客
05-25 228
weex项目新建 创建项目官方网站 命令： 创建项目（awesome-app是项目名） weex create awesome-app 目录换到刚刚创建的项目 cd awesome-app 更新项目 npm install 启动项目 npm start weex蹲坑之手机时时同步更新页面 ...
weex 02创建项目并运行
lucky9322的专栏
08-23 773
安装 weex-toolkit 之后就可以来进行项目的创建了 创建项目 weex create helloweex //创建 项目名为 helloweex 的工程 配置平台 此时项目已经创建完成了，用 Visual Studio 打开如下图所示。 通过 npm run serve命令 就可以在浏览器上进行观看项目样子了 其中的一些命令 可以在pack...
Weex开发（创建项目/打包到android/运行）
zeternityyt的博客
03-30 9777
一、weex简介以及开发前提1、简介       官网的解释为Weex是一个使用Web开发体验来开发高性能原生应用的框架。按我的理解其实就是，只用写一份代码，可以同时在PC端和移动端（包括android 和IOS）运行。2、开发前提和基础       要利用weex开发，需要了解node.js和npm的基本知识。       如果没有了解node.js和npm，建议先了解相关知识。       n...
weex：构建weex项目及注意事项
黄孝果的博客
05-07 4325
安装node.js 详细请看：vue学习（五）—vue-cli构建vue项目目录结构 文章介绍了怎么安装node 并介绍如何使用淘宝npm镜像cnpm 然后全局安装 weex-toolkit（类似vue-cli） 检查weex是否安装完成 安装webpack（这点和vue不同，vue不需要单独安装） 创建weex项目 项目构建完成 构建...
创建weex项目总结
xiaoshihd的博客
08-23 595
1.创建项目 用 weex create 命令创建一个weex项目： weex create 应用名称 会提示是否安装依赖，选择“是”即可。 如果未选择，后续执行npm install安装也可以。 创建完成后结构如下： WeexProject ├── README.md //项目便签 ├── android.config.json //Android 工程配置 ├── configs //weex 配置 ├── ios.config.j
新建weex项目
孤独Android
10-18 211
新建项目 weex create 项目名 初始化项目 npm install 生成android项目 weex platform add android 运行到android虚拟机 weex run android
weex 项目上传服务器,Weex项目构建流程
weixin_33507838的博客
08-13 328
新建一个 package.json 文件，并且编写内容如下：{"name": "weex","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack","dev": "webpack --watch","serve": "serve -p 8080","test": "echo \"E...
【weex】30秒创建第一个weex项目
风吹起如花般细碎流年
06-14 2603
1.简介Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。关于搭建weex开发环境大家可以看官网教程，很详细，这里就不
Qt入门教程：快速创建HelloWorld程序
这篇教程不仅提供了Qt Creator的基本操作指南，还强调了实践的重要性，通过创建一个直观的"Hello World"程序，帮助读者快速上手Qt开发环境。无论是对QT新手还是希望回顾基础概念的开发者，这篇教程都是一份宝贵的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值