Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257
vi ~/.bash_profile
weex工作流程
官网:
Playground:
weex-toolkit是官方提供的weex开发脚手架工具(新版已经整合weexpack),可以实现构建项目、调试、打包等全套操作
weex-toolkit脚手架会根据src下的index.vue文件产生一个对应的js文件放到demo目录下,但传统的vue开发一般有个入口文件(main.js或entry.js)用来导入其他模块,进行页面总体配置等操作,可以通过修改webpack.config.js文件实现,详细代码见我的github
const entry = {index:pathTo.resolve('src','entry.js?entry=true')};
const weexEntry = {index:pathTo.resolve('src','entry.js?entry=true')};
getEntryFileContent
函数、walk
函数、walk()
entry.js
,并删除temp目录import App from './App.vue'
new Vue(Vue.util.extend({
el:'#root'
},App))
WXDemoViewController
原生代码// _weexHeight = self.view.frame.size.height - 64;
_weexHeight = self.view.frame.size.height;
【默认配置的 npm script】 init: 初始化weex项目 build: 源码打包,生成 JS Bundle dev: webpack watch 模式,方便开发 serve: 开启静态服务器 debug: 调试模式
$ npm install -g weex-toolkit
$ weex init weexdemo
$ cd weexdemo
$ npm install
# 开启 watch 模式和静态服务器,进入 http://localhost:8080/index.html
$ npm run dev & npm run serve
# 调试
$ weex debug
# 安装ios平台和依赖
$ weex platform add ios
$ cd platforms/ios
$ pod install
# 运行并启动模拟器
$ cd ../..
$ weex run ios
$ weex platform add android
$ weex run android
$ npm run dev & npm run serve
进入Debugger,用于打印log
进入Inspector,用于审查元素
为了最终把打包jsbundle打包进原生App,需要集成SDK
$ pod install --no-repo-update
#define HOME_URL [NSString stringWithFormat:@"http://%@:12580/examples/build/index.js", DEMO_HOST]
为
#define HOME_URL @"file:///Users/sunshine/Downloads/bundlejs/index.js"
#define CURRENT_IP @"192.168.0.1"
在WXDemoViewController.m中添加
self.navigationController.navigationBar.hidden = YES;
vi ~/.bash_profile
export ANDROID_HOME=/Users/sunshine/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools
import project
根据错误提示修复(下载的时候注意关闭代理)run
app/src/main/assets/
修改LocalActivity.java
中的hello.js
AndroidManifest.xml
<activity android:name=".IndexActivity">
</activity>
<activity android:name=".LocalActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name=".NetworkActivity">
</activity>
AndroidManifest.xml
android:theme="@style/AppTheme.NoActionBar"
ImageAdapter
,使用alt+enter
修复找不到的包public class ImageAdapter implements IWXImgLoaderAdapter {
public ImageAdapter() {
}
@Override
public void setImage(final String url, final ImageView view,
WXImageQuality quality, WXImageStrategy strategy) {
WXSDKManager.getInstance().postOnUiThread(new Runnable() {
@Override
public void run() {
if(view==null||view.getLayoutParams()==null){
return;
}
if (TextUtils.isEmpty(url)) {
view.setImageBitmap(null);
return;
}
String temp = url;
if (url.startsWith("//")) {
temp = "http:" + url;
}
if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
return;
}
Picasso.with(WXEnvironment.getApplication())
.load(temp)
.into(view);
}
},0);
}
}
其中Picasso
需要在app的build.gradle
中添加依赖
compile 'com.squareup.picasso:picasso:2.5.2'
Build->Build APK
apk文件路径:app/build/outputs/apk/app-debug.apk
新版本的weex使用vue开发,最终得到vue文件,we文件是老版本的源码文件,推荐使用vue2.0开发
总结一下:
* Weex 环境中没有 DOM
WXEnvironment
获取设备环境信息简单概括:
* 支持基本的盒模型
* 支持 position
定位布局
* 支持使用 flexbox
布局
* 限制
打包的安卓apk还需要进行签名才能发布安装
keytool -genkey -alias android.keystore -keyalg RSA -validity 100 -keystore android.keystore
【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » weex 踩坑笔记 【原创】