Skip to content

使用文档

刘全有 edited this page Apr 17, 2020 · 2 revisions

简单体验 I

首先要下载我们的demo工程,然后你只要修改src目录下的.js文件,然后运行 npm run build.这条命令会将我们刚刚修改的工作区代码(src)经过转义压缩输出到outputs目录下, outputs目录下的文件供app读取使用.

⚠️⚠️app不能直接读取src工作区的文件哦!!!!

简单体验 II

如果你已经熟练使用了步骤 I是不是觉得每次要经过下面三步,很麻烦. 那么你可以往下看

  • save
  • run build
  • run xocde

目前demo已经支持模拟器/真机 在线实时预览修改内容了~~~~~

下面为实时预览的准备工作

  1. JS目录下的node依赖下载成功.执行npm install即可.
  2. 执行npm run server 开启本地服务
  3. 将真机/模拟器调至同一WIFI
  4. 运行demo

如步骤1.失败请检查本地npm,node版本,下面给出我电脑版本供参考npm -v 6.9.0 / node -v v10.16.0

此时你的准备工作已经全部完成, 接下来用你最喜欢的IDE打开src目录下的任意js文件进行编辑, 在点击保存之后你会发现手机数据也跟着刷新了~~~~

实际使用 III

实际使用的话,就需要一些JS相关的支持,要确保本机已安装npm.如果不知道的同学可以百度安装。 如果已经安装好npm可以往下操作

  1. cd /demo/JS 执行 npm install
  2. npm run server

⚠️⚠️执行后,我们本地已经有可以执行js的环境了. 然后我们就可以在/src文件夹内修改.js源文件,修改后本地服务会自动执行打包更新并预览.

⚠️⚠️实际使用不要直接修改outputs目录, 因为每次buildoutputs目录会被全量替换

关于build说明

执行npm run build 将文件转成各自对应的js.

执行npm run packagesrc目录下文件打包成一个文件.(demo中使用此种方式进行演示).

使用模板 IV

初次使用可参照模板格式进行开发

/**
 * 引入UI组件,不引入无法直接使用
 */ 
_import('UIView,UILabel,UIColor,UIFont,UIScreen,UIImageView,UIImage,UITapGestureRecognizer,UIButton,TTPlaygroundModel')

/**
 *  @params:1.要替换的Class名,`:`标识继承关系
 *  @params:2.声明实例方法
 *  @params:3.声明静态方法
 *  声明Class,如无需在Oc中动态创建,可不设置父类,直接在js中创建类
 *  声明Class,如Native不存在,则动态创建Class
 */
defineClass('TTPlaygroundController:UIViewController', {
    /**
	 * 添加属性,自动生成`setter`/`getter`方法,取值和赋值必须使用`setter`/`getter`方法.
	 */ 
	name: property(),
	/**
	 * 声明实例方法,如已存在则替换原有方法,如Native不存在,直接在js中添加方法实现
	 */ 
	viewDidLoad:function () {
	        /**
		 * Super 使用
		 */
		Super().viewDidLoad();
		/**
		 * self 使用
		 */ 
		self.loadJSCode();
	}
	/**
	 * 方法与方法之间 使用 , 分割
	 */
	,
	loadJSCode: function () {
  
	},
	/**
	 * TTPatch动态添加的方法分两类
	 * 1. 仅供JS端调用,此种方法因供JS端调用,所以采用普通方式声明即可.
	 * 2. 供JS&Oc调用,此种访问因`Native`调用所以需要提供动态方法签名,写法如下
	 *    方法名	关键字		返回值,参数		方法实现
	 * 	  funcName:`dynamic("void, int", function(){})`
	 * 	  如方法只有一个参数/返回值(id类型)可简化:dynamic(function(){}),也可以不写`dynamic`.
	 * 	  Native动态方法签名默认: `@@:@' 
	 */
	funcWithParams_:dynamic(function(param1){
		Utils.log_info('[1]动态方法入参:'+param1);
	}),
	funcWithParams_param2_:dynamic('void,NSString *,NSString *',function(param1,param2){
		Utils.log_info('[2]动态方法入参:'+param1+','+param2);
	}),
	funcWithParams_param2_param3_:dynamic('void,NSString *,NSString *,NSString *',function(param1,param2,param3){
		Utils.log_info('[3]动态方法入参:'+param1+','+param2+','+param3);
	}),
	/**
	 * 调用Obj-C传入的block
	 */
	callBlock_:function(callback){
		if(callback){
		   callback(10);
		}
	},
	/**
	 * Obj-C调用js传入block,并接受回调
	 */
	runBlock:function(){
		self.testCall2_(block("NSString*,NSString*"),function(arg){
			Utils.log_info('--------JS传入OC方法,接受到回调--------- 有参数,有返回值:string  '+arg);
			return '这是有返回值的哦';
		});
	}
}, {
	//静态方法
	testAction_:function (str) {
	}
})
Clone this wiki locally