快应用quickapp快速入门教程 by五个半柠檬2

2019独角兽企业重金招聘Python工程师标准>>>

一、更改文档目录
因为第一次写还不熟悉，我先不动官方自动生成的目录，修改后如下图：
新建了一个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