自在学习Ionic (四) 修改应用图标及添加启动画面(更新官方命令行工具自动生成)

  1. ionic resources  

第五步:添加数码内容,起初打印测试

     点下图所示“插入文本项”菜单,添加打印内容,内容项可以拖拉或精美调整,基本对准之后,点击“预览”按钮(注意旁边的“打印”按钮是收费效果,纸上会有水印,而“预览时的打印”按钮是完全免费的,我们用后世)。

    把内容打印到薄一点的白纸上,然后在太阳下与诚实票据透亮比较,以最左最上的某个内容为尺度,别的内容远近调整,如此反复测试直到所有情节交互地点都针对。

    这一步先完结内容之间的相互地方对准,等下一步处理一体化地方。

图片 1

只顾:执行以上命令时需在线!

第七步:生成打印模板的程序代码

    套打测试成功后,点击第五步图中所示的“生成程序代码”菜单,现身下图结果,这么些代码就是大家需求的模板程序代码,把她们复制出来,准备融合到你的页面程序中选用。

图片 2

3.在cmd中跻身项目所在文书夹执行:

第九步:模板程序代码的使用

把上述CreatePrintPage函数进行简易改造,原函数如下:

function CreatePrintPage() {
    LODOP.PRINT_INITA(14,11,800,600,”套打EMS的模板”);
    LODOP.ADD_PRINT_TEXT(95,95,75,20,”寄件人姓名”);
    LODOP.ADD_PRINT_TEXT(123,148,194,20,”寄件人单位名称”);
    LODOP.ADD_PRINT_TEXT(158,101,238,35,”寄件人的详实地址”);
    LODOP.ADD_PRINT_TEXT(92,446,75,20,”收件人姓名”);
    LODOP.ADD_PRINT_TEXT(122,496,208,20,”收件人单位名称”);
    LODOP.ADD_PRINT_TEXT(160,460,244,35,”收件人详细地址”);
    LODOP.ADD_PRINT_TEXT(289,47,178,22,”内件品名”);
    LODOP.ADD_PRINT_TEXT(290,258,100,20,”内件数量”);
    LODOP.ADD_PRINT_TEXT(92,245,100,20,”寄件人电话”);
    LODOP.ADD_PRINT_TEXT(90,608,75,20,”收件人电话”);
};

把里面的打印内容提议来做为变量参数,函数改成如下样式:

function
CreatePrintPage(strPName,strJJRXM,strJJRDW,strJJRDZ,strSJRXM,strSJRDW,strSJRDZ,strNJPM,strNJSL,strJJRDH,strSJRDH)
{
    LODOP.PRINT_INITA(14,11,800,600,strPName);        //打印义务名
    LODOP.ADD_PRINT_TEXT(95,95,75,20,strJJRXM);       //寄件人姓名
    LODOP.ADD_PRINT_TEXT(123,148,194,20,strJJRDW);    //寄件人单位名称
    LODOP.ADD_PRINT_TEXT(158,101,238,35,strJJRDZ);    //寄件人的详尽地址
    LODOP.ADD_PRINT_TEXT(92,446,75,20,strSJRXM);      //收件人姓名
    LODOP.ADD_PRINT_TEXT(122,496,208,20,strSJRDW);    //收件人单位名称
    LODOP.ADD_PRINT_TEXT(160,460,244,35,strSJRDZ);    //收件人详细地址
    LODOP.ADD_PRINT_TEXT(289,47,178,22,strNJPM);      //内件品名
    LODOP.ADD_PRINT_TEXT(290,258,100,20,strNJSL);     //内件数量
    LODOP.ADD_PRINT_TEXT(92,245,100,20,strJJRDH);     //寄件人电话
    LODOP.ADD_PRINT_TEXT(90,608,75,20,strSJRDH);      //收件人电话
};

本条改造后的JS函数依然很好精通的,无论写入js文件或者一向嵌在页面内都简短易用。

一旦你改变了内容的字体、大小、粗斜体等格式,代码还会多一些,但总体来说比较短小。

图片 3

率先步:建立一个空荡荡的模板设计文本

把以下超文本代码复制到一个地面htm文件中:

 

<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script language="javascript" type="text/javascript">
  function CreatePrintPage() {
    LODOP.PRINT_INIT("套打EMS的模板");
  };    
</script> 
进入<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();">模板设计</a><br><br>
进入<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PREVIEW();">模板的打印预览</a>
</body>
</html>

 

  

 

正文模拟EMS特快专递单的主次开发,文件起名为printEMS.htm,权且称它为模板设计文本

[html] view
plain

copy

WEB套打可选方案不多,理想的更少,利用免费控件Lodop+JavaScript完成规范套打,算是相比经典的精选。那种方案其实相比不难,利用一个htm文件就可以兑现模板设计进度,差不离是“空手套”式的费用,但敞亮那多少个步骤依然需求点时间,上面一步步详实演示验证:

 

其三步:准备安插

    成功安装Lodop之后再一次打开模板设计文本printEMS.htm,点击其中“模板设计”链接,就弹出如下空白的打印设计窗口:图片 4

   为了赶紧定位模板中的数据地方,你必要做一张单子扫描图作为背景,当然没有扫描图也能一气浑成,只是必要多摸索五回,费点时间而已。

   上面是自身做的EMS扫描图,你把该图另存成一个jpg文件,以便大家一齐完结前面的以身作则步骤。

图片 5

图片 6

第六步:全体对准

    由于打印机左侧距或上面距不必然是零或票据边缘有误差,所以即使第五步打印出来的始末交互地方是可信的,但打印到实在票据上仍会完全偏离一些,要求开展一体化地方调整。

   点击下图红圈所示的“纸钉”按钮,“纸钉”弹起后,整个陈设版面就可以前后左右调整了,然后按上一步的主意打印测试,直到完全对准成功。为了幸免浪费票据,打印时仍可用薄白纸测试,注意此时透光对照时,纸张的左手沿和上边沿要与票据对齐,通过阅览内容的职位来判断是还是不是完整对准。图片 7

以上办法已经可以应用Ionic命令行工具来自动生成了,步骤如下:

其次步:用浏览器打开该文件

    在该地文件夹中双击该公文就足以打开,但在进入设计以前,你的机械须求设置Lodop,假设还没设置过,

请在如下地址下载安装文件(解压rar后运行那几个exe文件,Lodop是一个1M左右的小文件):

http://mt.runon.cn/samples/install\_lodop.rar

或 http://mtsoftware.v053.gokao.net/samples/install\_lodop.rar

选拔图标:

第八步:完毕打印模板设计文本

想不想清楚WEB套打有什么觉得?好,我们先做一个静态WEB页面爽一下:把第七步生成的程序代码,

安排替换第一步的空白设计文本CreatePrintPage函数内,变成如下内容:

 

<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script language="javascript" type="text/javascript">
  function CreatePrintPage() {
    LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
    LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
    LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人单位名称");
    LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的详细地址");
    LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
    LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人单位名称");
    LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人详细地址");
    LODOP.ADD_PRINT_TEXT(289,47,178,22,"内件品名");
    LODOP.ADD_PRINT_TEXT(290,258,100,20,"内件数量");
    LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人电话");
    LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人电话");
  };    
</script> 
进入<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();">模板设计</a><br><br>
进入<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PREVIEW();">模板的打印预览</a>
</body>
</html>

 

  

 

   把以上内容复制到其它一个htm文件printEMS_OK.htm中,双击打开它,点其中的打印预览,就可以兑现简单的WEB套打了。

   以上八步基本达成了模版设计,并贯彻静态页面套打,但要把模版代码融合到骨子里的WEB程序中,还亟需做些工作。

[html] view
plain

copy

 

3.在config.xml中添加

第四步:装载背景图并调整图片大小

打印设计窗口,点下图所示的“装载背景图…”菜单,调入以上保存的EMS图片文件。

图片 8

   装载背景图后,点上图所示的“调整背景图…”菜单,弹出下图“背景图调整”窗口,设定其中的图纸宽度为209mm,中度113mm会自动生成。

   那几个涨幅值是自己测量实际票据得来的。若是扫描图是按1:1比重获取的,那么调整背景图这一步就免了。

图片 9

我这里没有那么多分辨率下的图片,就随便找了一个稍大分辨率的,density也没写。它会自动将该图片拷贝到drawable文件夹。

这时候再重新运行程序,即可看到启动画面。

用以上的方法,启动画面的显示时长是固定的,很明显不太友好。

未完持续...

第十步:设置纸张中度,落成连接套打

半数以上套打业务的契约是连连纸,要求规范地分页,从而有限支撑再而三多页打印不偏移,

为此以上代码还要在PRINT_INITA之后加一行SET_PRINT_PAGESIZE语句:

function CreatePrintPage() {
    LODOP.PRINT_INITA(14,11,800,600,”套打EMS的模板”);
    LODOP.SET_PRINT_PAGESIZE(1,”209mm”,”113mm”,””);//设置纸张中度
    LODOP.ADD_PRINT_TEXT(95,95,75,20,”寄件人姓名”);
    LODOP.ADD_PRINT_TEXT(123,148,194,20,”寄件人单位名称”);
    LODOP.ADD_PRINT_TEXT(158,101,238,35,”寄件人的详细地址”);
    LODOP.ADD_PRINT_TEXT(92,446,75,20,”收件人姓名”);
    LODOP.ADD_PRINT_TEXT(122,496,208,20,”收件人单位名称”);
    LODOP.ADD_PRINT_TEXT(160,460,244,35,”收件人详细地址”);
    LODOP.ADD_PRINT_TEXT(289,47,178,22,”内件品名”);
    LODOP.ADD_PRINT_TEXT(290,258,100,20,”内件数量”);
    LODOP.ADD_PRINT_TEXT(92,245,100,20,”寄件人电话”);
    LODOP.ADD_PRINT_TEXT(90,608,75,20,”收件人电话”);
};

   其中209mm这些纸宽参数意义不大,重若是113mm这几个中度参数,它决定了每页的走纸距离,对屡次三番打印影响很大。那么些值是自个儿测量实际票据高度得来的,包括纸张之间的撕孔间隙。理想的测量方法,是多少页连起来共同测量取其平均高。

   参与纸高支配后的打印预览如下,你可以屡次三番打印两页内容到平等张长一些的白纸上,测试对照一下探访。把以上投入SET_PRINT_PAGESIZE语句的代码复制进第多个htm文件printEMS_OKM.htm尝试。即使从第二页发轫,内容向下偏移,表达纸张中度设置比其实票据大,就减小113mm这几个参数值,否则增大它,那一个参数可以确切到0.1mm。

图片 10

print?图片 11图片 12

第十一步:让操作者自己调整地点

    以上十步完毕的套打可以很准确,但都是以当下打印机为前提。假诺你的打印程序要直面重重种档次的打印机,甚至部分不明不白的打印机类型,那么“打印维护”功用会很有用处。你可以根据气象在先后中把该意义授权给最后操小编或现场技术保证人士,让使用者自己来调整打印地方,以适应各体系型的打印机。

   打印维护的一声令下语句是PRINT_SETUP,进入包罗该意义的在线文件PrintEMS_OKMSetup.htm,先在打印维护中调整一下打印内容或全体地方,点“应用”按钮。关闭浏览器后再次打开,进入“打印预览”,看看是不是有关系变化。下图是打印维护界面,其中能看出“应用”按钮和“复原完整缺省”按钮的职位。

图片 13
                               
硕士恋爱网转自http://blog.sina.com.cn/s/blog_721e77e50100ng1o.html

是因为Ionic更新了命令行工具,将来修改应用图标和增加启动画面就概括了,最新方法见最下方:

  针对ios的,待补充。

print?图片 14图片 15

 

图片 16

 <platform name="android">
              <icon src="res/android/ldpi.png" density="ldpi" />
              <icon src="res/android/mdpi.png" density="mdpi" />
              <icon src="res/android/hdpi.png" density="hdpi" />
              <icon src="res/android/xhdpi.png" density="xhdpi" />
 </platform>

 

 

也可分别执行:

 

 

 执行该命令后,会活动在resources文件夹下成立已添加的阳台名称的文书夹,如:android,其中会自动将图片进行缩放、裁剪,生成分化分辨率的图纸,并在config.xml中添加相应内容。

2.在文书夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)

1.在全方位项目所在文书夹下创立res文件夹,里边再分别创造三个公文夹android和ios。

图片 17图片 18

图片 19图片 20

1.在项目标根目录下创办resources文件夹。

 

2.对准Android平台:将我们的要替换的起步图标放如android文件夹下。可以分级起名为:mdpi.png(48*48),hdpi(72*72)、xhdpi(96*96)、xxhdpi(144*144)
和 xxxhdpiI(192*192)。

其中src中的图片路径就为整个项目的相对路径。

我这里偷了个懒,只搞了一个最高像素密度的应用图标(192px*192px)进去,安卓会自动进行压缩。 

这里顺便说一下如果要修改应用的名称,只要修改name标签里的内容即可。
  1. ionic resources –icon       
  2. ionic resources –splash  
这样在命令行中重新运行ionic run android,就能看到应用图标和名字已经被替换了。

启动画面:

    将启动画面的图片拷贝到之前的android文件夹下,splash-land-hdpi.png(640*480)splash-land-ldpi.png(426 × 320)splash-land-mdpi.png(470 × 320)splash-land-xhdpi.png(960 × 720)splash-port-hdpi.png(480*640)splash-port-ldpi.png(320*426)splash-port-mdpi.png(320*470)splash-port-xhdpi.png(720*960)

(名称可随意,只要和config.xml对应上即可)。

    在config.xml中添加

    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>

    <preference name="SplashScreen" value="screen"/>

    <preference name="SplashScreenDelay" value="10000" />

其中10000单位为毫秒,即10秒后隐藏启动画面。如果不写第三句,默认3秒隐藏。

如下图所示:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图