开放能力组件

开放能力组件是 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_CN"></open-data>
        </view>
        <view class="location">
          <text>地区：</text>
          <open-data type="userCountry" lang="zh_CN"></open-data>
          <open-data type="userProvince" lang="zh_CN"></open-data>
          <open-data type="userCity" lang="zh_CN"></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 订阅消息组件

属性说明

事件说明

示例代码

平台差异说明

注意事项