快应用开发：开发基础

admin管理员组

文章数量:1516870

快应用开发：开发基础

1. 快应用使用 MVVM 的设计模式进行开发，开发者无需直接操作 DOM 节点的增删，利用数据驱动的方式完成节点更新；

相比微信小程序：快应用是native 渲染，性能体验会比较好，而小程序目前是webview渲染。
快应用基于native，可以调起丰富的系统api，小程序在此方面会有些无力

条件渲染
<div class="preview" @click="show" if="{{showFlag}}">
</div>

事件绑定和传参

            <block for="{{focusList}}" key="{{$idx}}"><div class="item color-1" onclick="previewImage($item, $idx)"><imagesrc="{{$item}}"class="image"style="object-fit: cover"></image></div></block>

快应用打电话：

快应用生命周期

// 原生组件功能并不强大，建议用下面的组件库进行开发
快应用组件库 ：apexui qapp-ui
组件库引入使用示例： 连接

使用less或sass ，
// 快应用使用的是vue-cli，默认是不支持less和sass

使用 less 请先安装相应的类库：less、less-loader，然后在<style>标签上添加属性lang="less"使用 sass 请先安装相应的类库：node-sass、sass-loader，然后在<style>标签上添加属性lang="sass"

快应用打包上传 ： 教程

打包-进入跨应用包管理平台（链接）手动创建项目并上传

手机查看请求数据

  <div><text id="popup6">popup6</text></div><popup target="popup6" placement="bottom" style="mask-color:#ff0000"><text class="item-container-poptext">{{ testText }}</text></popup>

private: {testText: '123'
}onInit() {servers.getNewproducts({}).then(res => {console.log('res', res)this.listData = res.map(ele => {return '' + ele.imsrc.substring(7)})this.testText = JSON.stringify(this.listData)})}

开发打印 console.warn(‘debug:我是debug’)
运行rpk快应用，（手机安装快应用调试器，连接use复制rpk文件到手机目录，打开调试器本地安装选择文件即可）

动画

/* @keyframes rotate {from {transform: rotate(40deg);}to {transform: rotate(10deg);}from {transform: rotate(10deg);}to {transform: rotate(40deg);}
} */.hammer {position: absolute;/* top: 30px;right: 30px; *//* top: 0px;right: 0px; */z-index: 9999999;transform-origin: 100px 100px;animation-name: rotate;animation-duration: 600ms;animation-iteration-count: infinite;}

全局数据：
–初始化
manifest.json
“config”: {
“logLevel”: “debug”,
“data”: {
“isChecked”: false,
“countryCode”: “+86”
}
},
–读取和设置
this. a p p . app. app.data.isChecked

data和private的区别
// import方式引入的组件无法访问private,但是可以访问data。就是data是自定义组件用，而private是页面用

本文标签： 快应用开发开发基础