Weex 入门

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yang450712123/article/details/84636543

以下是本人学习 weex 时的初探,
前提:了解 vue.js;对 webpack 有认知;
所以在 weex 开始之前,本地应该具备 node、webpack 环境;

Weex 入门

什么是 Weex ?

Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。

Weex 致力于使开发者能基于当代先进的 Web 开发技术,使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲,在集成了 WeexSDK 之后,你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。

Weex 的结构是解耦的,渲染引擎与语法层是分开的,也不依赖任何特定的前端框架,目前主要支持 Vue.js 和 Rax 这两个前端框架。

Weex 的另一个主要目标是跟进当代先进的 Web 开发和原生开发的技术,使生产力和性能共存。在开发 Weex 页面就像开发普通网页一样;在渲染 Weex 页面时和渲染原生页面一样。

Weex 环境配置

(1)全局安装 (weex-toolkit weex脚手架)

// mac 系统前面增加 sudo
npm install weex-toolkit -g

(2)window 如果找不到 weex,需要将 weex 安装路径至系统环境变量中

weex -v ,显示版本表示安装成功;

   v1.3.11
 - weexpack : v1.2.7
 - weex-debugger : v1.2.3
 - weex-builder : v0.4.1
 - weex-previewer : v1.5.1

创建项目

(1) 创建 weex 空项目:weex create first-project ( first-project 为项目名称)

(2) 进入到项目根目录: cd first-project

(3) 安装依赖的第三方 js 包:cnpm/yarn install

(4) 启动本地 web 服务,浏览器预览渲染效果:npm run start,效果如下图:

image

或者也可以直接打开本地服务器,比如:http://10.0.1.136:8081/#/ 页面如下:

上图是本地启动了个服务,可以实时更新页面,扫描右边二维码可以下载 Weex playground app,提供真机预览;以上两种方式都支持热更新。

(5) 添加 Android 或 iOS 平台:weex platform add android 或 weex platform add ios
为了能在本地机器上打开 Android 和 iOS 项目,你应该配置好客户端的开发环境。对于 iOS,你应该安装并且配置好 Xcode。对于 Android,你应该安装并且配置好 Android Studio。

image

(6)运行:weex run android

tips:如果报错:‘Environment variable $ANDROID_HOME not found !’ or ‘-bash: adb: command not found;’, 则是没找到安卓环境变量。

附上解决安卓环境链接:mac 解决安卓环境变量

// ANDROID_HOME 为安装的 sdk 目录,安装 Android studio 时会有提示。
export ANDROID_HOME=/Users/allin/Library/Android/sdk

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

解决完成后,输入 adb 或者 android,如果没有出现-bash: adb: command not found;而出现adb的命令参数解释。则表明环境变量配置成功。

tips:如果还报 ‘Error: Error: Command failed: ./gradlew assembleDebug
No Java runtime present, requesting install.’ 则是没有找到 JAVA 环境,请安装 Java JDK 环境。

附上解决JAVA环境链接:mac 解决JAVA环境变量

tips:也许环境还有其他问题,比如,下图:

image

tips:这个报错是说的是 java 版本不兼容,经折腾,发现环境必须是 java8,jdk1.8,(RN 也是如此)具体原因也许安卓开发的同学可以说明。这个就需要下载 java8

附上java8的连接:下载java8的链接

tips:切换java环境变量仿照上上个链接。

接下再次执行 npm run android,应该就没问题了;

(7)运行:weex run ios

tips:ios 环境也有可能有问题,如果报下图错误:

image

上面是报错,查了github,说是没有安装cocopods;

直接百度安装cocopods吧。发现cocopods是基于ruby安装的,mac自带ruby,就直接安装了

sudo gem install cocoapods

然后在运行weex run ios就OK了

weex run ios

附上 gitbug连接:github 问题连接

终于跑通了!!!!哈哈哈

Weex debug 调试

(1) 命令: weex debug ,浏览器自动打开待调试的页面。

image

(2) 使用 weex playground app 扫描二维码,扫描成功后,浏览器自动跳转到下面页面,点击下图框中的二维码,并使用 weex playground app 扫描,即可开始调试待 debug 的页面。

image

补充:

在weex create project 时,有个选项是是否添加 router,选择是的话,模板创建成功后,npm start,起不来服务,报错如图:

image

找到原因如下:
在 config 配置中,引入了 ws 模块,但是模板依赖里面竟然没有增加 ws 依赖,坑爹呀,用了你不加。。。所以 npm install ws 即可

image

猜你喜欢

转载自blog.csdn.net/yang450712123/article/details/84636543