本文假定你已安装好weex所需环境:
1、首先安装 weex-toolkit ,它是官方提供的命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能。
2、其次需要了解 weex-devtool,分为android和ios平台,我这边主要讲解 weex-devtool-iOS
一、添加IOS平台代码
项目根目录下运行:
weex platform add ios
运行完毕,会发现platform文件下新增一个ios项目
二、安装IOS平台调试框架
下面是项目的podfile配置
platform :ios, '8.0'
#inhibit_all_warnings!
def common
pod 'WeexSDK'
pod 'WeexPluginLoader'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'
pod 'WXDevtool', '~> 0.15.3',:configurations => ['Debug']
end
target 'WeexDemo' do
common
end
target 'WeexUITestDemo' do
common
end
去到IOS项目根目录下运行pod install 会安装好所有依赖
三、初始化调试框架
AppDelegate.m代码如下
1、导入头文件
#import <TBWXDevTool/WXDevTool.h>
2、运行调试工具
{
// [WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.131.8:8088/debugProxy/native"];
.....
}
注意url为你本地Websocket Address For Native,如下
image.png
3、开始浏览器调试
调试某个文件:
weex debug src/pages/Home.vue
4、查看刚才自动开启浏览器,点击Debugger进入开发模式
如下图:
image.png
5、设置断点,并打开App,浏览器会进入断点,后面跟普通js调试无差别
下面是调试界面:
image.png
如有任何问题和建议,欢迎留言。