快应用的学习与使用
我这里只会写一下文档中没有展示或者不好理解的东西,其余内容需要阅读官方文档
快应用官方文档:doc.quickapp.cn/
快应用组件文档:vivoquickapp.github.io/apex-ui-doc…
OPPO快应用开放平台:open.oppomobile.com/new/searchW…
小米开放平台:dev.mi.com/distribute/…
华为开放平台:developer.huawei.com/consumer/cn…
一.基本组件
基本组件与html一致,但值得注意的是,在快应用中,想要显示文字需要加上标签,直接在div中书写无法显示文字,其余标签格式与vue2一致
<template>
<div>
</div>
</template>
<script></script>
<style></style>
并且在style中,不用加上vue中的scoped标识
快应用样式默认以display:flex布局形式展现
其余内容可以翻阅快应用官方文档:doc.quickapp.cn/
重要组件
在项目中,个人认为最重要的组件就是广告组件,因为在其他地方没有见过,并且在快应用官方文档也没有看到关于这个组件的说明,其表现形式为:
以下案例为原生渲染2.0方式:
<div class="nativeAdContainer" if="{{ showAd }}">
<ad
adid="需要用到的广告id,去手机运营平台申请,例如vivo广告联盟"
class="ad-native"
onerror="adError(err,evt)"
onadclick="adClick"
onadclose="adClose"
type="native"//native就是原生广告,其余还有banner广告等等
>
<ad-clickable-area class="ad-content">
<stack class="left">
<image src="{{ adData.icon }}"></image>
<div class="ad-mask"><text>广告</text></div>
</stack>
<div class="center">
<div class="ad-title">
<text>{{ adData.title }}</text>
</div>
<div class="ad-desc">
<text>{{ adData.desc }}</text>
</div>
</div>
<div class="right">
<block if="{{ !isUseNewVersion }}">
<div class="ad-clickbtn">
<text>{{ adData.clickBtnTxt }}</text>
</div>
</block>
<block else>
<ad-clickable-area class="ad-clickbtn" type="button">
</ad-clickable-area>
</block>
</div>
</ad-clickable-area>
<div class="ad-close" if="{{ !isUseNewVersion }}" onclick="onclose">
<text>关闭</text>
</div>
</ad>
</div>
其中是用来展示广告的组件,是用来盛放广告的内容,当点击广告时便会触发ad的onadclick事件,关闭时便会触发onadClose事件,当然这些事件内容需要手动定义
在不同厂商中,组件的命名和展示大多相同,如vivo和OPPO小米,等,但在华为中,华为的例子提到了stack组件,但是stack依然是内容组件,个人认为用不用全凭自身习惯
二.广告事件
既然提到了广告组件就不得不说关于广告的事件,在快应用中,用到的路由,请求接口等需要额外引入,并且要在manifest.json中声明,而广告事件引入方式为
import ad from '@service.ad'
这就是快应用自带的广告请求方式
首先第一步,请求广告
//请求广告
const ad=await ad.preloadAd({
adUnitId: adid,//adUnitid为在广告联盟中申请到的广告位id
type: 'native',//type为广告类型,这里为原生广告
})
//或者
ad.preloadAd({
adUnitId: adid,//adUnitid为在广告联盟中申请到的广告位id
type: 'native',//type为广告类型,这里为原生广告
success: (data) => {
//这里的adList是用来渲染原生广告的内容
this.adList = data.adList
}, fail: (data, code) => {
console.log(data, code)
}
})
这里需要注意的是,在不同厂商中,用到的广告请求参数并不相同,例如这里的例子是vivo,但是在OPPO中,需要额外参数adCount,来表示请求广告的数量,这里需要看不同的厂商开发文档来做具体的代码
第二步就是拿到请求的广告内容去做页面的渲染
例如this.adList=ad.data.adList[0]拿到内容做页面渲染,渲染方式与vue一致,但值得注意的是,在vue中的v-if和v-for在快应用中直接是if和for,其余并无差别,并且点击事件我们这里不需要做额外考虑,当用户点击时,ad组件会自动和广告做配合,跳转到某个广告视频或者页面中,我们需要考虑的是,在adclick中所做的回传转化
刚开始我并不明白回传转化是什么意思,这里用我的理解方式做一个说明,当广告投放或者买量时,会有用户点击或者曝光(曝光就是广告展示出来),当满足一定条件时,我们需要给投放平台,例如快手,抖音,发送请求来观察广告情况并且转现
每个平台需要的内容并不相同,这里需要阅读官方文档
三.落地页面url上后面的参数是怎么拿
这一点官方文档确实很烂,我认为这个东西很重要,但是文档一点都没有体现,我在这里做详细说明
在首页中,快应用生命周期有一个是onInit(),他的第一个参数就是页面?后面的内容,例如页面参数为?a=‘1’&b=2&c=3,那么在快应用中
onInit(e){
console.log(e)
}
//展现形式为
{
a:'1',
b:'2',
c:'3'
}
值得注意的是,无论在页面上是字符串还是数字,那么拿到时都是字符串
在此项目中,快应用打开方式为平台→广告→落地页→快应用,其中平台为投放平台,例如快手,抖音等平台,当用户点击时便会进入广告短视频等,这里与开发无关,短视频再点击时便会进入落地页,这里的落地页就是一个h5页面,只不过运营人员在运营时把h5页面的地址告诉了官方,并且携带了参数,例如www.xxx.com?a=1&b=2&c=3,当用户点击广告就会进入这个页面,而这个页面内所做的事情就是打开快应用,其中有一个deepLink链接,就是hap形式,这里文档都有写,他会把www的链接问号后面参数与hap链接拼接,打开快应用,表现形式为hap://app/包名/pages/Protal?a=1&b=2&c=3,这时候便会进入到快应用中,而快应用页面Protal便会在onInit中收到后面参数再做一系列处理
四.关于app.ux和manifest.json
在快应用中,app.ux并不是像vue中的app.vue一样,而是更像vuex或者pinia那样作为公共储存的地方
这里写的所有内容,方法,变量等可以直接从任意页面利用this.$app.内容拿到,也可以直接赋值(这里存疑,但是我成功了)
而在mainifest.json中更多的作用是声明使用的接口
"features": [
{
"name": "system.prompt"
},
{
"name": "system.router"
},
{
"name": "system.shortcut"
},
{
"name": "system.fetch"
},
{
"name": "service.ad"
},
{
"name": "system.storage"
},
{
"name": "system.app"
}
],
和添加页面配置路由
"router": {
"entry": "pages/Portal",
"pages": {
"pages/Demo": {
"component": "index"
},
"pages/Search": {
"component": "index"
},
"pages/Home": {
"component": "index"
},
"pages/Tabbar": {
"component": "index"
},
"pages/My": {
"component": "index"
},
"pages/Portal": {
"component": "index"
},
"pages/Details": {
"component": "index"
},
"pages/CleanUp": {
"component": "index"
},
"pages/Signal": {
"component": "index"
},
"pages/ShowAd": {
"component": "index"
},
"pages/Yszc": {
"component": "index"
},
"pages/Yhxy": {
"component": "index"
}
},
"display": {
"fullScreen": false,
"statusBarImmersive": false,
"titleBarBackgroundColor": "#f2f2f2",
"titleBarTextColor": "#414141",
"pages": {
"pages/Demo": {
"titleBarText": "",
"titleBar": false
},
"pages/Home": {
"titleBarText": "",
"titleBar": false
},
"pages/Tabbar": {
"titleBarText": "",
"titleBar": false
},
"pages/My": {
"titleBarText": "",
"titleBar": false
},
"pages/Portal": {
"titleBarText": "",
"titleBar": false,
"menuBarData": {
"menuBar": false
}
},
"pages/Search": {
"titleBarText": "",
"titleBar": false
},
"pages/Details": {
"titleBarText": "",
"titleBar": false
},
"pages/CleanUp": {
"titleBarText": "",
"titleBar": false,
"menuBarData": {
"menuBar": false
}
},
"pages/Signal": {
"titleBarText": "",
"titleBar": false,
"menuBarData": {
"menuBar": false
}
},
"pages/ShowAd": {
"titleBarText": "",
"titleBar": false,
"menuBarData": {
"menuBar": false
}
},
"pages/Yszc": {
"titleBarText": "",
"titleBar": false,
"menuBarData": {
"menuBar": false
}
},
"pages/Yhxy": {
"titleBarText": "",
"titleBar": false,
"menuBarData": {
"menuBar": false
}
}
}
}
值得注意的是,当改变了这个文件内容,无论是添加页面还是其他,需要在右下角的预览设置中,重新启动编译,否则无论写的什么内容都无法生效
最后,当打包评审时,需要在manifest中给minPlatformVersion和versionCode+1,是大版本加1,不用考虑小版本问题,否则评审可能会不通过
