快应用开发：开发基础

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)">
                <image
                  src="{{$item}}"
                  class="image"
                  style="object-fit: cover"
                ></image>
              </div>
            </block>

快应用打电话：https://blog.csdn.net/CodingFire/article/details/80090305

快应用生命周期

// 原生组件功能并不强大，建议用下面的组件库进行开发
快应用组件库 ：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 'http://xiangzizhuye.top' + 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.$app.$data.isChecked

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