快应用开发

文档地址：概述

具体的开发工具下载不用多说，各类语法支持文档也都有介绍。其中不注意会有小坑，例如for循环指令的使用列表渲染。

这次开发重点还是快应用的广告开发。以下是各个手机厂商的开放平台文档：

vivo快应用开发文档：https://dev.vivo.com.cn/documentCenter/doc/630
oppo快应用开发文档：https://open.oppomobile.com/new/developmentDoc/info?id=10628
小米：https://dev.mi.com/console/app/newapp.html
华为：https://developer.huawei.com/consumer/cn/quickApp
荣耀：https://developer.honor.com/cn/doc/guides/101319

banner广告和插屏广告，按照文档提供的示例代码即可快速实现。

最需要注意的是信息流广告的使用，需要严格按照实力文档书写：

<div class="nativeAdContainer" if="{{ showAd }}">
             <ad
              id="ad-native"
              adunitid="{{ adunitid }}"
              class="ad-native"
              onload="adLoad(evt)"
              onerror="adError(err,evt)"
              onadclick="adClick"
              onadshow="adShow"
              type="native"
            >
              <ad-clickable-area class="ad-content">
                <div class="left">
                  <image for="adData.imgUrlList" style="width:100%;height:100%;object-fit:fill" src="{{ $item }}"></image>
                  <div class="ad-mask"><text>广告</text></div>
                </div>
                <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">
                  <text>{{ adData.clickBtnTxt }}</text>
                </div>
              </ad-clickable-area>
              <div class="ad-close" onclick="onclose"><text>关闭</text></div>
            </ad>
          </div>

这是信息流广告组件在页面展示需要的模块，ad和ad-clickable-area是快应用内置的广告组件，广告返回数据格式也是固定的，需要按照文档提供的格式书写。

adData: { // 此处广告的初始值需严格按照文档来
        imgUrlList: [],
        title: '',
        desc: '',
        clickBtnTxt: ''
      },

在就是信息流广告的获取和展示曝光等流程，一共会有adPreloaded(),adLoad(),adError(),adShow(),adClick(),reload(),onclose()七个方法事件，见名知意。主要就是获取和监听广告的一些事件的逻辑。

adPreloaded() {
    ad.preloadAd({
      adUnitId: this.adunitid,
      type: 'native',
      success: (data) => {
        // console.log(data, '预加载成功')
        // prompt.showToast({
        //   message: `预加载成功${JSON.stringify(data)}`
        // })
      },
      fail: function (err, code) {
        // console.log(err, code, '预加载失败')
        // prompt.showToast({
        //   message: `预加载失败${JSON.stringify(err)}`
        // })
      }
    })
  },

adPreloaded方法就是获取广告数据的方法，其中参数是固定，adUnitId就是从厂商获取的广告位id。其中data就是广告数据，但是在此可以打印广告数据查看，但是需要对其做操作去赋值给页面展示。

如果在此时将data的值赋值给我页面中展示的广告组件，虽然在设备上能看到广告展示出来了，但是会报错1105（这是oppo的广告错误嘛，各厂商的错误码在文档也都有解释），意思就是广告未加载成功，会造成能看到广告，但是广告无法点击，并且因为报错，会导致广告无收益。

而真正的赋值展示操作需要放到adLoad方法当中去，

adLoad(evt) {
    if (evt && evt.adData) {
      const adData = JSON.parse(evt.adData)
      this.adData = adData
      // prompt.showToast({
      //   message: '信息流广告展示成功'
      // })
      // console.log('adLoad', adData, '信息流广告加载成功');
    }
  },

最后就是展示广告的方法reload()必须在adPreloaded()方法之后执行。

配置文件manifest.json 文件

 "package": "com.xxxx.xxx",//应用包名
  "name": "xxxx", //应用名称
  "versionName": "V1.4", //版本名称
  "versionCode": 5, //版本号，在正式发布之后，每次打包需要手动加一，系统检测更新会查验此处
  "minPlatformVersion": 1060,
  "icon": "/assets/logo.png", //应用图标，快捷方式时应用展示的图标（厂商要求必须直角图片大小为512*512）
  "features": [ //接口列表（请求，本地存储，广告等都需要先在此注册）
    {
      "name": "system.prompt"
    },
    {
      "name": "system.router"
    }
    ]

还有一点需要注意，快应用预览器的版本很低，无法展示厂商广告，在测试时需要切换到自己手机的模式。