使用Ext JS社区版的快速模版:创建移动版应用程序

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tianxiaode/article/details/86766685

目录

  1. 使用Ext JS社区版的快速模版:概述
  2. 使用Ext JS社区版的快速模版:包(packages)与工作区(workspace)
  3. 使用Ext JS社区版的快速模版:创建移动版应用程序
     
    源代码:https://github.com/tianxiaode/qTemplate-ExtJS-CE

注册社区版

社区版的注册地址如下:
https://www.sencha.com/products/extjs/communityedition/?utm_source=snceb&utm_medium=email&utm_campaign=sncextjs-communtiy&utm_content=181106-pt-sncextjs-community

注册社区版要注意的事情是尽量不要使用国内的如qq、阿里云这样的邮箱,很多时候会收不到注册邮件,建议使用微软、谷歌等公司的邮箱。

注册后,会收到几封电子邮件,有一封是用来重置登录密码的,这个步骤一定要做,不然,在NMP中你就无法登录网站下载ext-gen等工具和包。还有一封标题为《Thank you for Requesting Ext JS Community Edition》的邮件也要看看,该邮件是为使用社区版提供支持的,单击《tutorial》会切换到使用教程。

安装ext-gen

在VS Code的终端窗口中,输入以下命令登录Sencha的NPM仓储:

 npm login --registry=https://sencha.myget.org/F/community/npm/ --scope=@sencha

命令执行后会提示输入用户帐号,这里要注意的是需要将邮件地址中的“@”替换换“…”才是真正的登录帐号。
输入完密码和公开的邮件地址后,就可执行以下命令安装ext-gen了:

  npm install -g @sencha/ext-gen

ext-gen安装完成后,输入以下命令可以查看帮助:

ext-gen --help

Sencha ExtGen v1.0.2 Community Edition - The Ext JS code generator

Quick Start: ext-gen -a

ext-gen app (-h) (-d) (-i) (-t 'template') (-m 'moderntheme') (-n 'name')

-h --help          show help (no parameters also shows help)
-d --defaults      show defaults for package.json
-i --interactive   run in interactive mode (question prompts will display)
-t --template      name for Ext JS template used for generate
-m --moderntheme   theme name for Ext JS modern toolkit
-n --name          name for Ext JS generated app
-v --verbose       verbose npm messages (for problems only)

Examples:
ext-gen app --template universalmodern --moderntheme theme-material --name CoolUniversalApp
ext-gen app --interactive
ext-gen app -a -t moderndesktop -n ModernApp


You can select from the following Ext JS templates provided by Sencha ExtGen

Modern Templates:

moderndesktop
This template contains 1 profile, configured to use the modern toolkit of Ext JS for a desktop application

universalmodern
This template contains 2 profiles, 1 for desktop and 1 for mobile. Both profiles use the modern toolkit.

modern themes:  theme-material, theme-ios, theme-neptune, theme-triton

由于目前并没有单独基于移动端开发的目标,因而在这里需要创建一个通用应用程序,让它包含phone配置,具体执行的命令如下:

ext-gen app -t universalmodern -m theme-material -n CE66

引用包

CE66中引用包,需要修改应用程序的workspace.json文件的packages.dir的设置,以指定引用包的路径,但直接使用${workspace.dir}/../packages/local来指定路径,会出现调试时找不到文件的情况。造成这个问题的主要原因是要调试CE66应用程序,只能将根目录设置为client\ce-66,不然不能访问node_modules等目录。为了解决这个问题,可以使用window的mklink命令,将client\ce-66\packages\local文件夹指向client\packages\local,具体操作步骤如下:

  1. 已管理员身份打开一个命令提示符窗口
  2. 切换到项目的client文件夹
  3. 执行以下命令:
mklink /j ce-66\packages\local packages\local
为 ce-66\packages\local <<===>> packages\local 创建的联接

命令执行完成后,就会发现访问ce-66\packages\local文件夹与访问packages\local文件夹没有任何区别了。余下要做的是修改workspace.json文件,具体修改代码如下:

  "packages": {
    "dir": "${workspace.dir}/packages ,${workspace.dir}/packages/local",
    ...
  }

然后是在app.json文件中添加以下引用:

    "Locale",
    "Common.Core",
    "Common.Modern",
    "Common.Data"

生成一次应用程序

先在package.json文件的scripts中添加以下命令用于生成开发环境的应用程序:

"build-development": "npx sencha app build development",

在VS Code中切换到ce-66文件夹,然后执行npm run build-development就可生成应用程序了。如果觉得还是使用cmd方法,也可执行命令sencha app build -dev来执行生成操作。

实现本地化

执行生成操作后,会发现本地化包的文件已被复制到client\ce-66\build\development\CE66\desktop\resources\Localeclient\ce-66\build\development\CE66\phone\resources\Locale文件夹,首页可通过这两个目录中的一个来加载本地化文件。

与桌面应用程序一样,需要修改index.html文件和app.js文件来加载本地化文件以及执行本地化重写操作。

完成以上操作后,执行一次生成操作。然后修改iisexpress.json文件,将路径修改为client\ce-66\。启动IIS Express后,在Chrome浏览器中,按F12打开Web开发工具,并切换到移动设备调试模式,然后打开应用程序,以验证本地化文件是否已成功加载且应用程序是否能正常运行。如果一切顺利,说明项目开发环境已经配置好了。

展开阅读全文

没有更多推荐了,返回首页