開放能力組件

開放能力組件是 uni-app 提供的一系列組件，用於對接各平台的開放能力，如登入、支付、分享等功能。這些組件可以幫助開發者快速整合各平台特有的功能。

web-view 網頁容器

web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個頁面。

屬性說明

屬性名	類型	預設值	說明
src	String		webview 指向的連結
allow	String		用於指定 web-view 組件可以使用的能力
sandbox	String		該屬性可對 web-view 組件進行安全限制
webview-styles	Object		webview 的樣式
progress	Boolean	true	是否顯示進度條

事件說明

事件名	說明	回傳值
@message	網頁向應用 postMessage 時，會在特定時機觸發並收到訊息	event.detail =
@onPostMessage	網頁向應用即時 postMessage

範例程式碼

vue

<template>
  <view>
    <web-view :src="url" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://uniapp.dcloud.io/'
    }
  },
  methods: {
    handleMessage(event) {
      console.log('來自網頁的訊息：', event.detail.data);
      uni.showModal({
        content: '收到網頁訊息：' + JSON.stringify(event.detail.data)
      });
    }
  }
}
</script>

ad 廣告

ad 組件是由各小程式平台提供的廣告組件，用於展示廣告內容。

屬性說明

屬性名	類型	預設值	說明
unit-id	String		廣告單元 id，可在各平台廣告後台申請
ad-intervals	Number		廣告自動重新整理的間隔時間，單位為秒，最小值為 30（僅部分平台支援）
ad-type	String	feed	廣告類型，可選值為：banner、video、feed、interstitial
ad-theme	String	white	廣告主題樣式，可選值為：white、black

事件說明

事件名	說明	回傳值
@load	廣告載入成功的回呼	event
@error	廣告載入失敗的回呼	event.detail =
@close	廣告關閉的回呼	event

範例程式碼

vue

<template>
  <view class="content">
    <view class="ad-container">
      <ad 
        :unit-id="adUnitId"
        ad-type="feed"
        ad-theme="white"
        @load="adLoad"
        @error="adError"
        @close="adClose"
      ></ad>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      adUnitId: 'your-ad-unit-id' // 替換為您的廣告單元 ID
    }
  },
  methods: {
    adLoad(e) {
      console.log('廣告載入成功');
    },
    adError(e) {
      console.error('廣告載入失敗：', e.detail);
    },
    adClose(e) {
      console.log('廣告被關閉');
    }
  }
}
</script>

<style>
.content {
  padding: 15px;
}
.ad-container {
  margin-top: 20px;
}
</style>

official-account 公眾號關注組件

official-account 組件是微信小程式提供的用於展示公眾號關注組件的組件。

屬性說明

該組件無屬性設定。

事件說明

事件名	說明	回傳值
@load	公眾號關注組件載入成功時觸發	event
@error	公眾號關注組件載入失敗時觸發	event.detail =

範例程式碼

vue

<template>
  <view class="content">
    <official-account @load="accountLoad" @error="accountError"></official-account>
  </view>
</template>

<script>
export default {
  methods: {
    accountLoad(e) {
      console.log('公眾號關注組件載入成功');
    },
    accountError(e) {
      console.error('公眾號關注組件載入失敗：', e.detail);
    }
  }
}
</script>

open-data 開放資料

open-data 組件是用於展示平台開放的資料的組件。

屬性說明

屬性名	類型	預設值	說明
type	String		開放資料類型
lang	String	en	語言，可選值為：en、zh_CN、zh_TW
default-text	String		資料為空時的預設文案
default-avatar	String		使用者頭像為空時的預設圖片

type 有效值

值	說明	平台差異
userNickName	使用者暱稱	微信小程式、QQ小程式、百度小程式、支付寶小程式
userAvatarUrl	使用者頭像	微信小程式、QQ小程式、百度小程式
userGender	使用者性別	微信小程式、QQ小程式、百度小程式
userCity	使用者所在城市	微信小程式、QQ小程式、百度小程式
userProvince	使用者所在省份	微信小程式、QQ小程式、百度小程式
userCountry	使用者所在國家	微信小程式、QQ小程式、百度小程式
userLanguage	使用者的語言	微信小程式、QQ小程式、百度小程式

範例程式碼

vue

<template>
  <view class="content">
    <view class="user-info">
      <view class="avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <view class="info">
        <view class="nickname">
          <text>暱稱：</text>
          <open-data type="userNickName" default-text="未登入"></open-data>
        </view>
        <view class="gender">
          <text>性別：</text>
          <open-data type="userGender" lang="zh_TW"></open-data>
        </view>
        <view class="location">
          <text>地區：</text>
          <open-data type="userCountry" lang="zh_TW"></open-data>
          <open-data type="userProvince" lang="zh_TW"></open-data>
          <open-data type="userCity" lang="zh_TW"></open-data>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.content {
  padding: 15px;
}
.user-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}
.info {
  flex: 1;
}
.nickname, .gender, .location {
  margin-bottom: 10px;
}
</style>

login-button 是支付寶小程式中用於實現支付寶授權登入的組件。

屬性說明

屬性名	類型	預設值	說明
image	String		按鈕圖片地址
size	String	normal	按鈕大小，有效值：normal、mini
type	String	primary	按鈕類型，有效值：primary、default
disabled	Boolean	false	是否停用
loading	Boolean	false	是否顯示載入狀態

事件說明

事件名	說明	回傳值
@getAuthorize	使用者點擊授權按鈕時觸發	event.detail =
@error	授權失敗時觸發	event.detail =

範例程式碼

vue

<template>
  <view class="content">
    <login-button
      type="primary"
      @getAuthorize="onGetAuthorize"
      @error="onAuthError"
    >支付寶授權登入</login-button>
  </view>
</template>

<script>
export default {
  methods: {
    onGetAuthorize(e) {
      console.log('授權碼：', e.detail.authCode);
      // 取得授權碼後，可以發送給伺服器端換取使用者資訊
      uni.showLoading({ title: '登入中...' });
      // 模擬請求伺服器端
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '登入成功' });
      }, 2000);
    },
    onAuthError(e) {
      console.error('授權失敗：', e.detail.error);
      uni.showToast({
        title: '授權失敗',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.content {
  padding: 15px;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>

subscribe 組件用於訂閱訊息，僅微信小程式平台支援。

屬性說明

屬性名	類型	預設值	說明
template-id	String		模板 ID
subscribe-id	String		訂閱訊息 ID

事件說明

事件名	說明	回傳值
@success	訂閱成功回呼	event
@error	訂閱失敗回呼	event

範例程式碼

vue

<template>
  <view class="content">
    <button @click="showSubscribe">訂閱訊息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      templateId: 'your-template-id' // 替換為您的模板 ID
    }
  },
  methods: {
    showSubscribe() {
      // 呼叫微信小程式的訂閱訊息 API
      uni.requestSubscribeMessage({
        tmplIds: [this.templateId],
        success: (res) => {
          console.log('訂閱結果：', res);
          if (res[this.templateId] === 'accept') {
            uni.showToast({
              title: '訂閱成功',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: '訂閱失敗',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('訂閱失敗：', err);
          uni.showToast({
            title: '訂閱失敗',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.content {
  padding: 15px;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>

平台差異說明

各開放能力組件在不同平台上的支援情況有所差異：

web-view 組件在各主流平台上都支援，但在小程式中可能有網域名稱白名單限制。
ad 組件主要在小程式平台上支援，不同小程式平台的廣告類型和設定可能有所不同。
official-account 組件僅在微信小程式平台支援。
open-data 組件主要在小程式平台支援，不同小程式平台支援的資料類型有所不同。
login-button 組件僅在支付寶小程式平台支援。
subscribe 組件僅在微信小程式平台支援。

在使用這些組件時，請注意查閱各平台的最新文件，以確保正確使用。

注意事項

使用開放能力組件時，需要注意各平台的權限和設定要求，如網域名稱白名單、廣告單元 ID 等。
部分開放能力可能需要特定的小程式類目或認證要求，請在使用前確認您的應用是否滿足條件。
在使用 web-view 組件時，需要注意網頁與小程式之間的通訊方式和安全限制。
廣告組件的展示效果和收益與多種因素有關，如流量品質、廣告位置、使用者群體等，建議進行合理的測試和最佳化。
使用開放資料時，需要確保使用者已授權取得相關資訊，否則可能無法正常顯示。
訂閱訊息功能有使用頻率和次數限制，請合理設計訂閱流程，避免頻繁請求使用者訂閱。

開放能力組件 ​

web-view 網頁容器 ​

屬性說明 ​

事件說明 ​

範例程式碼 ​

ad 廣告 ​

屬性說明 ​

事件說明 ​

範例程式碼 ​

official-account 公眾號關注組件 ​

屬性說明 ​

事件說明 ​

範例程式碼 ​

open-data 開放資料 ​

屬性說明 ​

type 有效值 ​

範例程式碼 ​

login-button 登入按鈕 ​

屬性說明 ​

事件說明 ​

範例程式碼 ​

subscribe 訂閱訊息組件 ​

屬性說明 ​

事件說明 ​

範例程式碼 ​

平台差異說明 ​

注意事項 ​

相關連結 ​

開放能力組件

web-view 網頁容器

屬性說明

事件說明

範例程式碼

ad 廣告

屬性說明

事件說明

範例程式碼

official-account 公眾號關注組件

屬性說明

事件說明

範例程式碼

open-data 開放資料

屬性說明

type 有效值

範例程式碼

login-button 登入按鈕

屬性說明

事件說明

範例程式碼

subscribe 訂閱訊息組件

屬性說明

事件說明

範例程式碼

平台差異說明

注意事項

相關連結