欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

weex 混合式开发( weex安装和如何使用)

程序员文章站 2024-01-06 20:49:46
欢迎大家访问我的博客www.kevink.club### 安装weex 工具OSX环境```$ sudo chmod -R 777 /usr/local/lib/node_modules/$ npm i -g weex-toolkit // 安装不要使用sudo执行$ weex -v // 查看当前weex工具版本```### 初始化环境然后初始化 Weex 项目:```$ weex create awesome-project```执行完命令后,在 awesome.....

欢迎大家访问我的博客 www.kevink.club



### 安装weex 工具
OSX环境
```
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装不要使用sudo执行
$ weex -v // 查看当前weex工具版本
```


### 初始化环境
然后初始化 Weex 项目:
```
$ weex create awesome-project
```

执行完命令后,在 awesome-project 目录中已经为我们生成了标准项目结构。

### 开发

下一步就是进入刚刚创建的文件夹,并且安装依赖,然后执行 npm start:
```
cd awesome-app
npm install
npm start
```

然后工具会启动一个本地的 ```web``` 服务,监听 ```8081``` 端口。你可以打开 ```http://localhost:8081``` 查看页面在 Web 下的渲染效果。 源代码在 ```src/``` 目录中,你可以像一个普通的 ```Vue.js``` 项目一样来开发.

除此之外,你还可以打开 ```http://localhost:8081/preview.html``` 开启一个预览页面,它会把 ```web``` 端的页面放在一个 ```iframe``` 中渲染,而且在右侧生成一个二维码。用 ```Weex playground app``` 扫描这个二维码可以看到页面在手机上渲染的真实效果。


### 编译和运行
默认情况下 ```weex create``` 命令并不初始化 ```iOS``` 和 ```Android``` 项目,你可以通过执行 ```weex platform add``` 来添加特定平台的项目。

```
weex platform add ios
weex platform add android
```

由于网络环境的不同,安装过程可能需要一些时间,请耐心等待。如果安装失败,请确保自己的网络环境畅通。

为了能在本地机器上打开 ```Android``` 和 ```iOS``` 项目,你应该配置好客户端的开发环境。对于 iOS,你应该安装并且配置好 ```Xcode```。对于 ```Android```,你应该安装并且配置好 ```Android Studio```。当开发环境准备就绪后,运行下面的命令,可以在模拟器或真实设备上启动应用:
```
weex run ios
weex run android
weex run web
```

### 调试
```weex-toolkit``` 还提供了强大的调试功能,只需要执行:
```
weex debug
```
这条命令会启动一个调试服务,并且在 ```Chrome``` (目前只支持基于 V8 引擎的桌面浏览器) 中打开调试页面。```详细用法请参考 weex-toolkit 的文档```。

本文地址:https://blog.csdn.net/qq_21761149/article/details/107892990

相关标签: 前端 weex