# 快应用的学习与使用我这里只会写一下文档中没有展示或者不好理解的东西,其余内容需要阅读官方文档快应用官方文档: 快应用组件文档: OPPO快应用开放平台: 小米开放平台: 华为开放平台: ## 一.基本组件基本组件与html一致,但值得注意的是,在快应用中,想要显示文字需要加上标签,直接在div中书写无法显示文字,其余标签格式与vue2一致 ``` ``` 并且在style中,不用加上vue中的scoped标识快应用样式默认以display:flex布局形式展现其余内容可以翻阅快应用官方文档: **重要组件** 在项目中,个人认为最重要的组件就是广告组件,因为在其他地方没有见过,并且在快应用官方文档也没有看到关于这个组件的说明,其表现形式为: 以下案例为原生渲染2.0方式: ```

关闭

``` 其中是用来展示广告的组件,是用来盛放广告的内容,当点击广告时便会触发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](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,不用考虑小版本问题,否则评审可能会不通过