博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
快应用quickapp快速入门教程 by五个半柠檬2
阅读量:6939 次
发布时间:2019-06-27

本文共 2446 字,大约阅读时间需要 8 分钟。

hot3.png

一、更改文档目录

因为第一次写还不熟悉,我先不动官方自动生成的目录,修改后如下图:
新建了一个views文件夹,以后项目的文件我就放里面了

新建目录后当然是更改路由配置了,不然怎么访问呢。

1>首先打开manifest.json文件,配置应用基本信息

每个应用都要有专属的名称,图标等,这些信息都需要在manifest.json文件中配置.

2>修改应用名称(name)

应用名称,6个汉字以内,与应用商店保存的名称一致;框架提供保存到桌面的功能,桌面上显示的应用名即为此属性

示例如下:

{

"name": "便签薄"
}
3>应用图标(icon)
规则为正方形(不能是圆角),且务必无白边

{

"icon": "/Common/logo.png"
}
注意:
请使用绝对路径,其中/对应于路径<ProjectName>/src/

4>应用版本名称、版本号(versionName、versionCode)

应用版本名称、版本号为开发者的应用包维护的版本信息

应用版本名称为主版本.次版本格式
应用版本号为整数,从1开始,每次更新上架请自增1
示例如下:

{

"versionName": "1.0",
"versionCode": 1
}
5>配置接口列表(features)

在使用接口时,需要先在manifest中声明接口。在每个接口文档的顶部,都附有声明接口的配置代码

以prompt网络请求为例,示例如下:

{

"features": [

{ "name": "system.prompt" }

]

}
6>配置页面路由(router)
路由,用于定义页面的实际地址、跳转地址。如果ux页面没有配置路由,则不参与项目编译。一个目录下最多只能存在一个主页面文件(不包括组件文件)

首页名称(router.entry)

首页,即应用平台启动时默认打开的页面。首页需配置为应用中某页面的名称,即在<ProjectName>/src目录下,页面目录的相对路径

示例如下:

假设工程根目录如下所示

└── src

└── Views     └── index                      └── index.ux          // 页面文件,文件名不必与父文件夹相同(推荐index.ux)

假设首页为Views/index目录下的index.ux文件,则首页对应的页面名称为Views/index

{

"router": {

"entry": "Views/index"

}

}
7>页面路由对象(router.pages)
页面路由对象,key为页面名称(<ProjectName>/src目录下,页面目录的相对路径),value为页面具体路由配置,key不要重复

页面具体路由配置(router.pages的value)包括以下属性:

component:页面对应的ux文件名

path:页面路径,不填则默认为页面名称(<ProjectName>/src目录下,页面目录的相对路径)
示例如下:

假设工程根目录如下所示

└── src

└── Views    └── index        └── index.ux

当页面名称(router.pages的key)为Views/index时,对应的页面配置(router.pages的value)包括:

component:页面对应的ux文件名index

path:页面路径,默认为页面名称Views/index

{

"router": {

"pages": {  "Views/index": {    "component": "index"  }}

}

}
配置页面UI显示(display)
UI显示,用于定义与UI显示相关的配置。支持定义:页面公用的默认UI显示、页面私有的UI显示

页面公用的默认UI显示

页面公用的默认UI显示,即被所有页面共享

以标题栏文字的配置为例:

{

"display": {

"titleBarText": "页面公用的默认标题"

}
}
未配置私有标题的页面,标题栏文字均将显示为页面公用的默认标题

8>页面私有的UI显示,在display.pages对象下配置:key为页面名称(与路由中的页面名称保持一致),value为页面私有的UI显示

以标题栏文字的配置为例:

{

"display": {

"pages": {  "Demo": {    "titleBarText": "Demo页面的标题"  }}

}

}
9>需要对页面设计基准宽度,我设置是750;

"config": {

"logLevel": "off","designWidth": "750"

}

我这边修改后的页面代码如下:

3.npm run build后生效。

二、制作首页
样式设计

因为header右边还需要一个编辑按钮,所以需要将首页默认的title隐藏。修改后如图

在首页自己写个title。

填坑1:移除flex
看开发文档通用样式会发现display只要两种值:

display:flex | none

平常上下布局的话可以display:block;可是在这里并不支持;后来通过查询文档找到了解决方法,在根节点加上:

flex-direction:row-reverse; //设置 <div> 元素内弹性盒元素的方向为相反的顺序

好吧,还有这种操作~

填坑2:

文字必须用<text></text>有文本属性的标签包裹,直接在div里面写(容器组件)是读不出来的!如图:

填坑3:不支持before after这类的伪类样式,其它自行研究~

填坑4:如果要使用less,sass/scss,请先按安装对应的类库:

npm install XXXXXX

其它将后续更新~

转载于:https://my.oschina.net/lemonfive/blog/1814158

你可能感兴趣的文章
网络语音技术
查看>>
【酷熊科技】工作积累 ----------- C#自动添加using引用命名空间
查看>>
通达信公式-涨幅限制
查看>>
VMware-Linux(RedHat 6.7)增加数据库使用空间(Linux&Linux LVM)
查看>>
左神算法进阶班3_1构造数组的MaxTree
查看>>
SQL Server中的锁类型及用法(转载)
查看>>
CodeVS 1008 选数(DFS)
查看>>
SQL Server日常积累
查看>>
C++强制类型转换
查看>>
搭建FTP服务器 window7
查看>>
并发编程下的性能定律(翻译)
查看>>
cssText文本格式化
查看>>
新建koa2项目
查看>>
Phoenix 索引生命周期
查看>>
I,P,B帧和PTS,DTS的关系
查看>>
JavaOO练习:违规管理系统
查看>>
继续开始列车式的生活
查看>>
String的属性和方法
查看>>
hdu-1800
查看>>
读写锁-锁粒度
查看>>