代码拉取完成,页面将自动刷新
同步操作将从 kan尘埃/View-App 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
当前没有创建项目的脚手架,使用一下两个地址拉取空项目,用以创建项目
npm install
使用开发模式运行,可以在页面上看到打印,在F12看到源码
npm run server
或
npm run dev
使用生产模式运行,取消在页面上的打印,在F12看不到源码
npm run pro
可以在页面上看到打印,没有.map映射文件
npm run build-dev
取消在页面上的打印,没有.map映射文件
npm run build
或
npm run start
或
npm run build-pro
import './src/css' //页面对应样式,全局导入
import MyApplication from "./src/MyApplication";//Application的自定义子类
var start = new Date().getTime();//启动前的时间
window.onload = function () {//在onload中启动,是因为css文件加载是异步的
//需要在css加载完之后才能启动app
window.application = new MyApplication("app");//创建应用
window.application.launch();//启动应用
console.log(new Date().getTime() - start)//打印启动应用的时长
}
export default class MyApplication extends Application {
}
export default class MyApplication extends Application {
onLaunch(urlParam) {
console.log("onLaunch,地址栏参数:", urlParam);//外部在地址栏中传递的参数
var firstPage = null;
var param = null;//这个是传递给第一个Page的参数
switch (urlParam.pageKey) {//根据参数中的规定key对应的值选择哪个Page是第一个Page
case "home":
// firstPage = new HomePage();
firstPage = "HomePage";//对应view.config.js中的页面,两种形式都是可以的,但建议使用这种
break;
}
return {firstPage, param};//返回第一个Page,及对应的参数
}
}
export default class MyApplication extends Application {
//应用创建,启动第一个页面之前调用
onCreate(page, param){//page为第一个Page,param为对应的参数
}
//应用停止,一般在跳转到外部,和销毁应用时调用
onStop(){}
//应用销毁,跳转到外部不会调用该方法,只有销毁时会调用
//如果是android混合模式,可以在这里调用关闭WebView或关闭android app
onDestroy(){}
}
export default class MyApplication extends Application {
//如果是android混合模式,也可以在这里调用关闭WebView或关闭android app
exitUrl() {
var url = "";//退出应用跳转的地址,这地址可以自定义,一般由启动应用时,地址栏中的参数,比如:backUrl、returnUrl等
return url;
}
}
export default class MyApplication extends Application {
/**
*
* @param param
* @returns {boolean} true:以Enter模式进入;false:根据情况获取进入模式
*/
forceEnter(param) {
var flag = false;
if (param.enter) {//当参数中key为enter有值时
flag = true;
}
return flag;
}
}
export default class MyApplication extends Application {
getPlayerInstance() {
var player = {};
try{
player = new IptvPlayer();//iptv的播放器
}catch (e){
//其他播放器创建
player = new AliWebPlayer();//阿里web播放器
}
return player;
}
}
页面配置
在view.config.js文件中配置页面
/**
* 定义PageName对应的Page,舍去在Page子类中赋值pageName步骤
*/
export var PageConfig = {
"HomePage": HomePage,
"ListPage": ListPage,
"FramePage": FramePage,
"TestPage": TestPage,
"PlayerPage": PlayerPage
}
/**
* 默认的page
* 当未获取到第一个页面时,会使用该页面
* @type {string}
*/
export var LaunchPage = "HomePage";
说明:控制页面渲染、操作,及业务逻辑的所在
export default class HomePage extends Page {
}
export default class HomePage extends Page {
//Page创建回调
//页面的节点及滚动器创建
//内部没有内容,需要在这个方法中调用this.html = "";设置布局
onCreate(param){//param是传入的参数,param由application或上一个Page组装
this.html = "<div></div>";//这里的html一般由import引入
}
//Page执行到前台,页面已显示
//1.从创建之后到前台
//2.从其他Page返回当前Page
onResume(){}
//Page执行进入后台状态,页面已隐藏
//跳转到其他页面时,有两种状态
//1.当前页面暂停
//2.当前页面关闭,紧接着会调用停止方法
onPause(){
//一般播放暂停在这里调用
}
//Page执行到停止
onStop(){
}
//Page执行到销毁
//页面回收、数据销毁
onDestroy(){
}
}
1.跳转到新的Page
export default class HomePage extends Page {
//页面默认的点击监听
onClickListener(view) {
console.log(view.pageName, "-onClickListener", view);
var listPage = new ListPage();//ListPage是另一个Page
this.startPage(listPage, {data: "llllll"});//第二个参数是传递到ListPage的数据
}
}
export default class ListPage extends Page {
onCreate(param){//由HomePage中传递的数据 {data: "llllll"}
}
}
2.返回到上一个页面
export default class ListPage extends Page {
//重写返回键
key_back_event() {
this.setResult({data: "来自ListPage的数据"});
this.finish();//回到上一个Page(HomePage)
}
}
export default class HomePage extends Page {
onResult(backResultData){//由ListPage回传的数据,{data: "来自ListPage的数据"}
}
}
export default class HomePage extends Page {
onCreate(param) {
this.html = html;
this.player = new VideoPlayer(this);
}
onResume(){
var playInfo = new PlayInfo("", 0, 0, 1280, 720);//播放地址,及视频位置
this.player.play(0, playInfo);//从0开始播放
}
}
例如需要创建Button扩展控件
export default class Button extends ItemView{
//...
//其他功能性代码省略
//...
static parseByEle(ele, viewManager, listenerLocation) {
var button = new Button(viewManager, listenerLocation);
button.ele = ele;
return button;
}
}
export class ButtonBuilder extends ViewBuilder {
constructor() {
super();
this.viewType = "button";
}
buildView(ele, viewManager, listenerLocation) {
return Button.parseByEle(ele, viewManager, listenerLocation);
}
}
window.onload = function () {
ViewManager.addCustomViewBuilder([ButtonBuilder]);//ButtonBuilder为对应的扩展控件
//...
//其他代码省略
//...
}
未完待续,暂时可以参考Demo下的样例
方法寻找和监听器内部this指向的规则
this.html = "";//这个this,可以在监听器内部打印下this,来查看this具体是什么
<img src="../images/bg.jpg" alt="">
在js中,可以直接引用
require("../images/bg.jpg")
<br>
强制换行,当多行时可执行纵向跑马灯State.ScrollAnimation值: true:打开 false:关闭
var start = new Date().getTime();
window.onload = function () {
State.ScrollAnimation = true;//控制滚动动画开关
//需要在css加载完之后才能启动app
window.application = new MyApplication("app");
window.application.launch();
//调试结束后,可以改成这样的写法,全局无法获取到application对象,安全性更高
// var application = new MyApplication("app");
// application.launch();
console.log(new Date().getTime() - start)
}
class HomePage extends Page{
onCreate(){
this.html = require("../html/home.html");//实际的布局文件
//必须在this.html = "";之后使用
this.i("显示绿色的提示信息");
this.w("显示黄色的警告信息");
this.e("显示红色的错误信息");
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。