Weex系列(1) ——Hello World项目

xiaowugui666 发布于2019-08-23 12:53 / 3500人阅读

摘要：由于最开始没有一点点原生开发的经验，所以我就直接用的脚手架初始化项目。那下面我们就从最最原始的项目开始吧，序篇太枯燥，自由发挥时间开始啦。执行如下代码，最后会得到如图的项目结构。入口文件等简析进行了初始化。

Weex系列(序) —— 总要知道原生的一点东东(iOS)

Weex系列(序) —— 总要知道原生的一点东东(Android)

Weex系列(1) —— Hello World项目

Weex系列(2) —— 页面跳转和通信

Weex系列(3) —— 单页面还是多页面

[Weex系列(4) —— 老生常谈的三端统一]

[Weex系列(5) —— 封装原生组件和模块]

[Weex系列(6) —— css相关小结]

[Weex系列(7) —— web组件和webview]

[Weex系列(8) —— 是时候简析一下流程原理了]

[Weex系列(9) —— 踩坑填坑的集锦]

[Weex系列(10) —— 先这么多吧想到再写。。。]

由于最开始没有一点点原生开发的经验，所以我就直接用的脚手架初始化项目。那下面我们就从最最原始的Hello World项目开始吧，序篇太枯燥，自由发挥时间开始啦。

weex-toolkit

执行如下代码，最后会得到如图的项目结构。

有的同学会继续用官网的weex run ios或者android开始运行项目，大多数人应该都运行不起来，我就是这大多数人，我是直接用原生工具运行对应App的，如iOS，直接用xcode打开WeexDemo.xcworkspace这个文件。(这里还有一个点，如下代码最后需要pod install下，安装weex sdk等包)

接下来就可以愉快的开发代码了，调试就该登场了，那就下一个点吧。

npm install -g weex-toolkit
weex create helloworld
cd helloworld
weex platform add ios
weex platform add android

cd platforms/ios
pod install

Weex Playground

接上面最后一个点，输入如下代码，就会看到浏览器自动打开一个网址，然后下载标题上的这个App扫描二维码就可以进行调试了

weex debug src/index.vue

bundlejs

第一个命令就是把src目录下我们写的代码打包到dist目录下，会对应生成xxx.js和xxx.web.js，xxx.js是原生所要用到的js，xxx.web.js是给web端用的，这就是三端统一的第一步。

后面两个命令其实就是打包同时把打包后的代码放到截图对应的原生目录下，这两个命令比较慢，我通常都是用终端的复制文件夹的功能直接复制代码到对应目录下。

weex build web
weex build ios
weex build android

bundlejs的路径问题

还是把这个多带带拿出来讲一下吧，网上有好多版本的一统三端的js路径等，其实总结起来就是：
iOS：能拿到weex.config.bundleUrl(我这边是file:///var/containers/Bundle/Application/4D5A8D6F-2824-4603-936B-B77418600858/WeexDemo.app/bundlejs/index.js)能取到上面截图bundlejs目录地址，再做相对处理即可。
Android：weex.config.bundleUrl拿到的地址形式不统一，最后就是写死的file://assets/dist
web：weex run web的时候浏览器会自动打开一个地址，可以研究这个地址再做一下调整。
后续章节可以把这个方法提供给大家参考。

iOS入口文件等简析

AppDelegate.m执行了初始化weex环境的方法，这个方法里面还可以注册我们封装的模块和组件，weex脚手架初始化的项目还提供了启动页的方法，我们可以稍作修改换成我们自己的动画。

WeexSDKManager就是官网上的初始化weex环境的步骤。

WXDemoViewController加载了我们上面提到的打包后的js。

[WXSDKEngine registerModule:@"xxx" withClass:[xxx class]];
[WXSDKEngine registerComponent:@"xxx" withClass:[xxx class]];

Android入口文件等简析

WXApplication进行了初始化。

AbsWeexActivity封装了渲染加载js的方法，在WXPageActivity可以看到有调用createWeexInstance和renderPageByURL得方法。

Hello World就先讲这么多吧，第一次写系列文章，终于把开头三章搞定了，如果大家对我的专栏有一点点兴趣，就请点个赞哦，欢迎收藏继续关注，谢谢。

GPU云服务器云服务器 ubuntu hello world hello-world 系列1 world!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99074.html

WEEX系列环境搭建

摘要：系列文章之环境搭建和一步一起从前端视角聊一聊如果你只想试试的语法写个啥的，在线编辑器上玩玩就够了。如果你想更深入的学习，显然是需要搭建本地开发环境的。脚手架让我们更专注于业务代码，节约开发环境构建成本，提供一定的灵活。 WEEX系列文章之环境搭建和一步一起从前端视角聊一聊WEEX 如果你只想试试 weex 的语法写个 hello world 啥的，在dotWe线编辑器上玩玩就够了。...

teren 2019-08-21 17:41 评论0 收藏0
Weex系列(4) —— 老生常谈的三端统一

摘要：刚看到这仨页面的时候，我就想着可以用路由，做成三端统一。样式这部分真的三端基本是高度统一的，部分微调一下就可以了，也正是这样，我们后续才能迅速解决和。终于不是谈谈三端统一了，也是真的体验了一次，虽然最后有点出入，但是下次基本是没问题了。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...

wzyplus 2019-08-23 14:09 评论0 收藏0
Weex系列(7) ——踩坑填坑的总总

摘要：的方法在安卓底下会崩溃，结果竟然是要在里面设置正确的，因为我是用官网的脚手架搭起来的项目，不知道大家会不会遇到，改一下就可以解决问题了。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3)...

toddmark 2019-08-23 15:35 评论0 收藏0
Weex系列(7) ——踩坑填坑的总总

摘要：的方法在安卓底下会崩溃，结果竟然是要在里面设置正确的，因为我是用官网的脚手架搭起来的项目，不知道大家会不会遇到，改一下就可以解决问题了。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3)...

phpmatt 2019-08-30 15:55 评论0 收藏0