0、项目结构
├── sign rpk包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── Common 公用的资源和组件文件
│ │ └── logo.png 应用图标
│ ├── Demo 页面目录
│ | └── index.ux 页面文件，可自定义页面名称
│ ├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
│ └── manifest.json 项目配置文件，配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
//src：项目源文件夹
//sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名
0.1、manifest.json文件详解
a--应用包名（package）
{
"package": "com.example.demo"
}
b--应用名称（name）
{
"name": "太平洋网络"
}
c--应用图标（icon）
{
"icon": "/Common/logo.png"
}
d--应用版本名称、版本号（versionName、versionCode）
{
"versionName": "1.0",
"versionCode": 1
}
e--配置接口列表（features）->内部api需先引入
{
"features": [{ "name": "system.fetch" }]
}
f--页面router
f.1---首页 (router.entry)固定
"假设工程根目录如下所示"
└── src
└── Demo 页面目录，存放各自页面私有的资源文件和组件文件
└── index.ux 页面文件，文件名不必与父文件夹相同
{
"router": {
"entry": "Demo"
}
}
f.2---其他页面->页面路由对象（router.pages）
component：页面对应的 ux 文件名
path：页面路径，不填则默认为页面名称（<ProjectName>/src目录下，
页面目录的相对路径）假设工程根目录如下所示
└── src
|── Demo 页面目录，存放各自页面私有的资源文件和组件文件
| └── index.ux 页面文件，文件名不必与父文件夹相同
└── Doc
└── Layout 页面目录，存放各自页面私有的资源文件和组件文件
└── index.ux 页面文件，文件名不必与父文件夹相同
{
"router": {
"pages": {
"Demo": {
"component": "index"
},
"Doc/Layout": {
"component": "index"
}
}
}
}
g--display，页面公用的默认 UI 显示
{
"display": {
"pages": {
"Demo": {
"titleBarText": "Demo页面的标题"
}
}
}
}
1、生命周期
页面生命周期：onInit、onReady、onShow、onHide、onDestroy、onBackPress
、onMenuPress
页面的状态：显示、隐藏、销毁
APP 的生命周期：onCreate、onDestroy
a-"onInit()"
表示ViewModel的数据已经准备好，可以开始使用页面中的数据
b-"onReady()"
表示ViewModel的模板已经编译完成，可以开始获取
DOM 节点（如：this.$element(idxxx)）
c-"onDestroy()"
页面被销毁时调用，被销毁的可能原因有：用户从当前页面返回到上一页，
或者用户打开了太多的页面，框架自动销毁掉部分页面，避免占用资源
所以，页面销毁时应该做一些释放资源的操作，
如：取消接口订阅监听geolocation.unsubscribe()
判断页面是否处于被销毁状态，可以调用ViewModel的$valid属性：
true表示存在，false表示销毁
d-"onBackPress()"
当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件
e-"onMenuPress()"
当使用原生的顶部标题栏时，可以通过manifest.json中
的menu属性配置是否显示右上角的菜单
2、数据渲染
总结：与微信小程序基本相同，使用{{}}方式渲染，在for循环中，
默认"item=$item"、默认"index=$idx"
一些条件判断例如微信->wx:if在快应用中都是直接将wx:去掉成了if="{{}}"、
3、页面切换
通过组件 a 切换页面和传递参数
<a href="/PageParams/receiveparams">跳转到接收参数页面</a>
<!-- 以非'/'开头的应用内页面的名称 -->
<a href="PageParams/receiveparams">跳转到接收参数页面</a>
<a href="tel:10086">调起电话</a>
<a href="sms:10086">调起短信</a>
<a href="mailto:example@xx.com">调起邮件</a>
<!-- 打开webview加载网页 -->
<a href="https://www.baidu.com/">打开网页</a>
4、传递参数
?id=99&name=xxx
5、通过接口 router 切换页面和传递参数
// 导入模块
import router from '@system.router'
//使用方法
router.push({
uri: '/PageParams/receiveparams'
})
6、接收参数
"protected 内定义的属性"
//使用方法
<script>
export default {
protected: {
key: ''
},
onInit () {
this.$page.setTitleBar({ text: '接收参数' })
// js中输出页面传递的参数
console.info('key: ' + this.key)
}
}
</script>
7、事件绑定
onclick
简写：@click
8、事件监听
//注册事件
"$on('eventName')"
可监听$emit()、 $dispatch()、 $broadcast()
//触发事件
"$emit(eventName)"
"阻止事件冒泡:evt.stopPropagation()"
onChildClickHandler (evt) {
// 阻止事件冒泡
"evt.stopPropagation()"
}
9、父子组件通信
同vue
10、监听页面数据变化watch
data() {
return {
number:0
}
},
onInit() {
// 监听数据变化
this.$watch('number', 'changeNumber')
},
changeNumber(newV, oldV){
console.info(`监听数据变化：`, newV, oldV)
}
11、组件
"组件引入"
<import name="XXX" src="XXX"></import>
网友评论