新增激励视频广告和权限申请监听示例

pages.json

@@ -1153,7 +1153,23 @@
         "navigationBarTitleText": "webview 截图测试",
         "navigationStyle": "custom"
       }
-    }
+    },
+    // #ifdef APP
+    {
+      "path": "pages/API/rewarded-video-ad/rewarded-video-ad",
+      "style": {
+        "navigationBarTitleText": "激励视频广告",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/API/create-request-permission-listener/create-request-permission-listener",
+      "style": {
+        "navigationBarTitleText": "权限申请监听",
+        "enablePullDownRefresh": false
+      }
+    }
+    // #endif
   ],
   "globalStyle": {
     "pageOrientation": "portrait",

pages/API/create-request-permission-listener/create-request-permission-listener.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+    <page-head title="权限申请监听"></page-head>
+    <view class="permission-alert" id="permission-alert" :style="{'transform':isPermissionAlertShow ? 'translateY(0)':'translateY(-110px)'}">
+      <text style="font-size: 20px;margin-bottom: 10px;margin-top: 5px;">手机状态权限申请说明：</text>
+      <text style="color: darkgray;">uni-app x正在申请手机状态权限，允许或拒绝均不会获取任何隐私信息。</text>
+    </view>
+    <button type="primary" style="margin: 10px;" @click="requestPermission">点击申请权限</button>
+
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isPermissionAlertShow: false,
+        permissionAlert: null as UniElement | null,
+        timeoutId: -1,
+        permissionListener: null as RequestPermissionListener | null
+      }
+    },
+
+    onReady() {
+      this.watchPermissionRRequest()
+    },
+    onUnload() {
+      this.permissionListener?.stop()
+      this.permissionListener = null
+      clearTimeout(this.timeoutId)
+    },
+    methods: {
+      watchPermissionRRequest() {
+        this.permissionListener = uni.createRequestPermissionListener()
+        this.permissionListener!.onConfirm((_) => {
+          this.timeoutId = setTimeout(() => {
+            this.isPermissionAlertShow = true
+          }, 100)
+        })
+        this.permissionListener!.onComplete((_) => {
+          clearTimeout(this.timeoutId)
+          this.isPermissionAlertShow = false
+        })
+      },
+      requestPermission() {
+        // #ifdef APP-ANDROID
+        if (UTSAndroid.checkSystemPermissionGranted(UTSAndroid.getUniActivity()!, ["android.permission.READ_PHONE_STATE"])) {
+          uni.showToast({
+            title: "权限已经同意了，不需要再申请",
+            position: "bottom"
+          })
+          return
+        }
+        UTSAndroid.requestSystemPermission(UTSAndroid.getUniActivity()!, ["android.permission.READ_PHONE_STATE"], (_ : boolean, p : string[]) => {
+          console.log(p)
+        }, (_ : boolean, p : string[]) => {
+          uni.showToast({
+            title: "权限被拒绝了",
+            position: "bottom"
+          })
+          console.log(p)
+        })
+        // #endif
+      }
+    }
+  }
+</script>
+
+<style>
+  .permission-alert {
+    width: 90%;
+    height: 100px;
+    margin: 10px 5%;
+    position: absolute;
+    top: 0px;
+    z-index: 3;
+    border-radius: 5px;
+    transition-property: transform;
+    transition-duration: 200ms;
+    background-color: white;
+    padding: 10px;
+  }
+</style>

pages/API/rewarded-video-ad/rewarded-video-ad.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+    <page-head title="激励视频广告"></page-head>
+    <button :type="btnType" style="margin: 10px;" :disabled="btnDisable" @click="showAd()">{{btnText}}</button>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        btnText: "",
+        btnType: "primary",
+        btnDisable: false,
+        rewardAd: null as RewardedVideoAd | null,
+        isAdLoadSuccess:false
+      }
+    },
+    onReady() {
+      this.loadAd()
+    },
+    methods: {
+      loadAd() {
+        if (this.btnDisable)
+          return
+        this.btnDisable = true
+        this.btnText = "正在加载广告"
+        this.btnType = "primary"
+        if (this.rewardAd == null) {
+          this.rewardAd = uni.createRewardedVideoAd({
+            adpid: "1507000689"
+          })
+          this.rewardAd!.onError((_) => {
+            this.btnType = "warn"
+            this.btnText = "广告加载失败，点击重试"
+            this.btnDisable = false
+          })
+          this.rewardAd!.onLoad((_) => {
+            this.btnType = "primary"
+            this.btnText = "广告加载成功，点击观看"
+            this.btnDisable = false
+            this.isAdLoadSuccess = true
+          })
+          this.rewardAd!.onClose((e) => {
+            this.isAdLoadSuccess = false
+            uni.showToast({
+              title: "激励视频" + (e.isEnded ? "" : "未") + "播放完毕",
+              position: "bottom"
+            })
+            this.loadAd()
+          })
+        }
+        this.rewardAd!.load()
+      },
+      showAd(){
+        if(this.isAdLoadSuccess) {
+          this.rewardAd!.show()
+        } else {
+          this.loadAd()
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>

pages/tabBar/API.uvue

@@ -8,17 +8,14 @@
       </view>
       <view class="uni-text-box">
         <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
-        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'"
-          :inWhiteList="true"></u-link>
+        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'" :inWhiteList="true"></u-link>
       </view>
 
       <uni-collapse>
         <template v-for="item in list" :key="item.id">
           <uni-collapse-item :title="item.name" class="item">
-            <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'"
-              v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
-              <text class="uni-navigate-text"
-                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+            <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+              <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
               <image :src="arrowRightIcon" class="uni-icon-size"></image>
             </view>
           </uni-collapse-item>
@@ -455,6 +452,28 @@
             ] as Page[],
           },
           // #endif
+          // #ifdef APP-ANDROID
+          {
+            id: 'ad',
+            name: '广告',
+            pages: [
+              {
+                name: '激励视频广告',
+                url: 'rewarded-video-ad',
+              }
+            ] as Page[],
+          },
+          {
+            id: 'permission-listener',
+            name: '权限申请监听',
+            pages: [
+              {
+                name: '权限申请监听',
+                url: 'create-request-permission-listener',
+              }
+            ] as Page[]
+          },
+          // #endif
           /* {
             id: "rewarded-video-ad",
             url: "rewarded-video-ad",
@@ -548,14 +567,14 @@
   }
 
   .popup {
-    width: 100%;
+    width: 100%;
     /* #ifdef APP */
     position: absolute;
-    height: 100%;
-    /* #else */
-    position: fixed;
-    top: var(--window-top);
-    bottom: var(--window-bottom);
+    height: 100%;
+    /* #else */
+    position: fixed;
+    top: var(--window-top);
+    bottom: var(--window-bottom);
     /* #endif */
     align-items: center;
     justify-content: center;