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、onDestroya-"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>
文章转载于:https://www.jianshu.com/p/6b9d5eea9fa1
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录!
立即登录