前端构建Weex 流程

最新推荐文章于 2024-09-13 10:46:15 发布

weixin_34247299

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量101

点赞数

文章标签：前端 javascript 移动开发 ViewUI

原文链接：https://segmentfault.com/a/1190000012485134

版权

weex初识

weex 具有很多优势。

一种代码多端运行
减少包的大小
无痕改bug
vue语法

weex弱势

官方文档坑
限制比较大

做为前端构建weex需要储备什么

安卓环境搭建
XCode安装了解CocoaPods。

weex环境搭建

web相关

node环境 npm包管理 weex-toolkit weex脚手架 安装成功后直接weex 会看到help

node
npm
cnpm install -g weex-toolkit
cnpm install webpack -g

成功后的图

安卓相关

只有一个注意点耐心。会下载超多依赖

weex项目搭建

node 相关搭建

weex create 搭建一个含有三端的应用。 weex init 搭建一个 vue项目。build生成js 直接导入安卓项目即可。

weex create HelloWeex
cd HelloWeex
cnpm install 
weex platform add android (还可以添加ios)
weex run android

weex platform add android 运行了这句话后项目会多一个android 这个文件就是之后安卓项目工程。

列表图

通过修改vue看不同内容。

这个文件

weex run android (可以用真机和模拟机真机记得开发模式)

AndroidStudio中打开

一直下载依赖，直到没有error.打开慢的话可以看第一次打开AndroidStudio巨慢解决方法，见附件

点build->打包构建包

weex init awesome-project
之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中，已经配置好了几个常用的 npm script，分别是：
build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启静态服务器
debug: 调试模式
我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。