国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > 综合技术 > [置顶] Weex开发笔记

[置顶] Weex开发笔记

来源:程序员人生   发布时间:2016-07-04 08:25:26 阅读次数:2639次

关于weex的环境安装,前面已介绍了,并且顺利运行android版官方demo,亮点10足,继续关注。本文介绍weex for ios的相干内容,和遇到的坑。
weex仓库:https://github.com/alibaba/weex。
这里写图片描述

1,运行IOS playground

阿里巴巴官方说明:

Prerequisites
Install Node.js 4.0+
Under project root
npm install, install project
./start
Install iOS Environment
Install CocoaPods
Run playground
cd ios/playground
pod install
Open WeexDemo.xcworkspace in Xcode
Click (Run button) or use default hot key cmd + r in xcode
If you want to run demo on your device. In DemoDefine.h(you can search this file by Xcode default hot key cmd+space+o), modify CURRENT_IP to your local IP

但是依照这个步骤来,编译报错。多是路径不对,总是报各种路径找不到的毛病。然后我就这样改:
将weex项目中ios目录下的sdk放入playground根目录,然后Podfile改成以下:

source 'https://github.com/CocoaPods/Specs.git' target 'WeexDemo' do platform :ios, '7.0' pod 'SDWebImage', '3.7.5' pod 'SocketRocket', '0.4.2' pod 'ATSDK-Weex', '0.0.1' pod 'WeexSDK', :path=>'./sdk/' end

点开WeexDemo.xcworkspace,编译的时候又提示缺少两张图片,我加了同名的png图片,然后可以顺利编译通过。
看看多好看,还带了性能,调试工具
UI不错噢。使用起来各种流畅哇。

2,各种命令行操作,shell脚本

weex根目录下面有个打包的脚本文件:package.json,终端使用者和开发者,可以通过命令行使用脚本。
for end-user

1,清算examples/build and test/build 文件夹 *.js :

npm run clean

2,创建.we file文件

//run npm run create -- -h for help npm run create -- [name] -o [directory]

3,编译.we文件为js

transform *.we in examples and test folders

npm run transform

4,运行npm run clean && npm run transform

npm run dev

5,开启服务:run a file server at 12580 port

这个方便在PC阅读器里面打开页面看效果。也能够自定义端口。

npm run serve

6,监测.we文件改动,自动更新

run a watcher for *.we changed ,1旦文件变动,就回自动渲染。

npm run watch

For SDK Developer

1,we文件渲染转换 js-framework and h5-render

npm run build

2,使用 js-framework and h5-render 运行test目录

npm run ci

3,拷贝编译后的js文件到playgroud工程

(assets文件夹,方便调用)

npm run copy

3,weex相干技能

weex项目根目录下面的index.html,在pc阅读器渲染不出来。也改成weed-loader-demo的渲染方式就能够。

<!-- jsframework --> <script src="./src/js-framework/dist/index.js"></script> <!-- h5render <script src="http://www.wfuyu.com/upload/caiji/20160629/./src/h5-render/dist/index.js"></script> 此处注释掉,改成下面的代码,然后 npm run serve,就能够pc阅读器访问samples里面的页面了。--> <script src="./node_modules/weex-html5/dist/weex.js"></script>

阅读器访问的页面地址:http://192.168.100.47:12580/index.html?page=./examples/build/index.js,192.168.100.47替换成自己本机ip便可。weex for h5如图:
weex for h5

4,可安装淘宝的NPM镜像

如果安装node,weex工具包使用npm比较慢的话。可以用淘宝的镜像。这是1个完全 npmjs.org 镜像,你可以用此代替官方版本,同步频率目前为 10分钟 1次以保证尽可能与官方服务同步。
当前 registry.npm.taobao.org 是从 r.cnpmjs.org 进行全量同步的.
当前 npm.taobao.org 运行版本是: cnpmjs.org@
本系统运行在 Node.js@ 上.
开源镜像: http://npm.taobao.org/mirrors
Node.js 镜像: http://npm.taobao.org/mirrors/node
alinode 镜像: http://npm.taobao.org/mirrors/alinode
phantomjs 镜像: http://npm.taobao.org/mirrors/phantomjs
ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver
OperaDriver 镜像: http://npm.taobao.org/mirrors/operadriver
Selenium 镜像: http://npm.taobao.org/mirrors/selenium
Node.js 文档镜像: http://npm.taobao.org/mirrors/node/latest/docs/api/index.html
NPM 镜像: https://npm.taobao.org/mirrors/npm/
electron 镜像: https://npm.taobao.org/mirrors/electron/
node-inspector 镜像: https://npm.taobao.org/mirrors/node-inspector/

install e.g 举例参考:

cd /Users/duqian/AndroidStudioProjects/Weex/weex-loader-demo npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm init -y cnpm install --save-dev webpack weex-loader cnpm install --save-dev weex-scripter@^0.1.4 weex-styler@^0.0.17 weex-templater@^0.2.1 cnpm install --save-dev webpack weex-loader cnpm install --save-dev serve weex-html5

5,weex demo

weex-loader-demo,weex团队大神阿里-鬼道录制了视频,这个demo简单,拿来学习还是可以的,自行github。可以了解1些安装,打包的进程,和weex如何加载第3方库,比如弹toast。
weex-loader-demo视频
另外,还有weexOne,百度大神dodola两天写出来的作品,主要是TabBar和网络要求操作,亲测,有bug,不是很完善。
后期我也写1个weex demo,顺便参加workshop大赛。

come on ,developer,Learn/write once,run everywhere!

Android开发,Dusan_杜乾:291902259,公众号:OpenDeveloper

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生