Open Ability Components

Open ability components provide access to platform-specific features and capabilities, such as user authorization, sharing, payment, and other system-level functionalities.

web-view

The web-view component is a container that can host web pages and automatically fills the entire page.

Properties

Property	Type	Default	Description
src	String		URL of the web page
allow	String		Specifies the capabilities that web-view can use
sandbox	String		Security restrictions for the web-view component
webview-styles	Object		Styles for the webview
progress	Boolean	true	Whether to show progress bar

Events

Event	Description	Return Value
@message	Triggered when web page posts message to app	event.detail =
@onPostMessage	Real-time message from web page

Example

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('Message from web page:', event.detail.data);
      uni.showModal({
        content: 'Received message: ' + JSON.stringify(event.detail.data)
      });
    }
  }
}
</script>

The ad component is provided by mini-program platforms for displaying advertisements.

Properties

Property	Type	Default	Description
unit-id	String		Ad unit ID, can be obtained from platform ad console
ad-intervals	Number		Auto-refresh interval in seconds, minimum 30
ad-type	String	feed	Ad type: banner, video, feed, interstitial
ad-theme	String	white	Ad theme: white, black

Events

Event	Description	Return Value
@load	Ad loaded successfully	event
@error	Ad loading failed	event.detail =
@close	Ad closed	event

Example

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' // Replace with your ad unit ID
    }
  },
  methods: {
    adLoad(e) {
      console.log('Ad loaded successfully');
    },
    adError(e) {
      console.error('Ad loading failed:', e.detail);
    },
    adClose(e) {
      console.log('Ad closed');
    }
  }
}
</script>

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

official-account

The official-account component is provided by WeChat Mini Program for displaying official account follow component.

Properties

This component has no properties.

Events

Event	Description	Return Value
@load	Component loaded successfully	event
@error	Component loading failed	event.detail =

Example

vue

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

<script>
export default {
  methods: {
    accountLoad(e) {
      console.log('Official account component loaded successfully');
    },
    accountError(e) {
      console.error('Official account component loading failed:', e.detail);
    }
  }
}
</script>

open-data

The open-data component is used to display platform open data.

Properties

Property	Type	Default	Description
type	String		Open data type
lang	String	en	Language: en, zh_CN, zh_TW
default-text	String		Default text when data is empty
default-avatar	String		Default avatar when user avatar is empty

type Values

Value	Description	Platform Support
userNickName	User nickname	WeChat, QQ, Baidu, Alipay Mini Programs
userAvatarUrl	User avatar	WeChat, QQ, Baidu Mini Programs
userGender	User gender	WeChat, QQ, Baidu Mini Programs
userCity	User city	WeChat, QQ, Baidu Mini Programs
userProvince	User province	WeChat, QQ, Baidu Mini Programs
userCountry	User country	WeChat, QQ, Baidu Mini Programs
userLanguage	User language	WeChat, QQ, Baidu Mini Programs

Example

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>Nickname: </text>
          <open-data type="userNickName" default-text="Not logged in"></open-data>
        </view>
        <view class="gender">
          <text>Gender: </text>
          <open-data type="userGender" lang="en"></open-data>
        </view>
        <view class="location">
          <text>Location: </text>
          <open-data type="userCountry" lang="en"></open-data>
          <open-data type="userProvince" lang="en"></open-data>
          <open-data type="userCity" lang="en"></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>

The login-button component is used for Alipay authorization login in Alipay Mini Program.

Properties

Property	Type	Default	Description
image	String		Button image URL
size	String	normal	Button size: normal, mini
type	String	primary	Button type: primary, default
disabled	Boolean	false	Whether disabled
loading	Boolean	false	Whether showing loading state

Events

Event	Description	Return Value
@getAuthorize	Triggered when user clicks authorize button	event.detail =
@error	Triggered when authorization fails	event.detail =

Example

vue

<template>
  <view class="content">
    <login-button
      type="primary"
      @getAuthorize="onGetAuthorize"
      @error="onAuthError"
    >Alipay Authorization Login</login-button>
  </view>
</template>

<script>
export default {
  methods: {
    onGetAuthorize(e) {
      console.log('Authorization code:', e.detail.authCode);
      // Send auth code to server to exchange for user info
      uni.showLoading({ title: 'Logging in...' });
      // Simulate server request
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: 'Login successful' });
      }, 2000);
    },
    onAuthError(e) {
      console.error('Authorization failed:', e.detail.error);
      uni.showToast({
        title: 'Authorization failed',
        icon: 'none'
      });
    }
  }
}
</script>

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

The subscribe component is used for subscription messages, only supported in WeChat Mini Program.

Properties

Property	Type	Default	Description
template-id	String		Template ID
subscribe-id	String		Subscription message ID

Events

Event	Description	Return Value
@success	Subscription successful callback	event
@error	Subscription failed callback	event

Example

vue

<template>
  <view class="content">
    <button @click="showSubscribe">Subscribe Message</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      templateId: 'your-template-id' // Replace with your template ID
    }
  },
  methods: {
    showSubscribe() {
      // Call WeChat Mini Program subscription message API
      uni.requestSubscribeMessage({
        tmplIds: [this.templateId],
        success: (res) => {
          console.log('Subscription result:', res);
          if (res[this.templateId] === 'accept') {
            uni.showToast({
              title: 'Subscription successful',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: 'Subscription failed',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('Subscription failed:', err);
          uni.showToast({
            title: 'Subscription failed',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

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

button (Open Ability)

The button component with open-type attribute provides access to various platform capabilities.

Basic Usage

vue

<template>
  <view class="container">
    <!-- Get user info -->
    <button open-type="getUserInfo" @getuserinfo="onGetUserInfo">
      Get User Info
    </button>
    
    <!-- Get phone number -->
    <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
      Get Phone Number
    </button>
    
    <!-- Share -->
    <button open-type="share" @click="onShare">
      Share
    </button>
    
    <!-- Contact customer service -->
    <button open-type="contact" session-from="custom-session">
      Contact Service
    </button>
    
    <!-- Open settings -->
    <button open-type="openSetting" @opensetting="onOpenSetting">
      Open Settings
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    onGetUserInfo(e) {
      console.log('User info:', e.detail);
      if (e.detail.userInfo) {
        // User authorized
        this.userInfo = e.detail.userInfo;
      } else {
        // User denied authorization
        uni.showToast({
          title: 'Authorization denied',
          icon: 'none'
        });
      }
    },
    
    onGetPhoneNumber(e) {
      console.log('Phone number:', e.detail);
      if (e.detail.encryptedData) {
        // Send encrypted data to server for decryption
        this.decryptPhoneNumber(e.detail);
      }
    },
    
    onShare() {
      // Share logic will be handled by the platform
      console.log('Share button clicked');
    },
    
    onOpenSetting(e) {
      console.log('Settings result:', e.detail);
      // Check authorization status
      if (e.detail.authSetting['scope.userInfo']) {
        console.log('User info authorization granted');
      }
    },
    
    decryptPhoneNumber(detail) {
      // Send to server for decryption
      uni.request({
        url: 'https://api.example.com/decrypt-phone',
        method: 'POST',
        data: {
          encryptedData: detail.encryptedData,
          iv: detail.iv,
          sessionKey: this.sessionKey // Get from login
        },
        success: (res) => {
          console.log('Decrypted phone:', res.data.phoneNumber);
        }
      });
    }
  }
}
</script>

open-type Values

Value	Description	Platform Support	Event
getUserInfo	Get user info	Mini-program	@getuserinfo
getPhoneNumber	Get phone number	Mini-program	@getphonenumber
getUserProfile	Get user profile	WeChat Mini-program	@getuserprofile
share	Share	Mini-program	-
contact	Contact customer service	WeChat Mini-program	@contact
openSetting	Open authorization settings	Mini-program	@opensetting
launchApp	Launch App	WeChat Mini-program	@launcherror
feedback	Feedback	WeChat Mini-program	-
chooseAvatar	Choose avatar	WeChat Mini-program	@chooseavatar
agreePrivacyAuthorization	Agree privacy authorization	WeChat Mini-program	@agreeprivacyauthorization

Platform Differences

Different open ability components have varying support across platforms:

web-view component is supported on most mainstream platforms, but may have domain whitelist restrictions in mini-programs.
ad component is mainly supported on mini-program platforms, with different ad types and configurations across platforms.
official-account component is only supported on WeChat Mini Program platform.
open-data component is mainly supported on mini-program platforms, with different supported data types across platforms.
login-button component is only supported on Alipay Mini Program platform.
subscribe component is only supported on WeChat Mini Program platform.

When using these components, please refer to the latest documentation of each platform to ensure correct usage.

Important Notes

When using open ability components, pay attention to platform-specific permission and configuration requirements, such as domain whitelists, ad unit IDs, etc.
Some open abilities may require specific mini-program categories or certification requirements. Please confirm that your application meets the conditions before use.
When using the web-view component, pay attention to communication methods and security restrictions between web pages and mini-programs.
The display effect and revenue of ad components are related to various factors such as traffic quality, ad placement, user demographics, etc. It is recommended to conduct reasonable testing and optimization.
When using open data, ensure that users have authorized access to relevant information, otherwise it may not display properly.
Subscription message functionality has usage frequency and count limitations. Please design the subscription process reasonably and avoid frequent subscription requests from users.

Best Practices

Handle Authorization Gracefully: Always provide fallback options when users deny authorization.
Respect User Privacy: Only request necessary permissions and clearly explain why they are needed.
Test Across Platforms: Different platforms may have different behaviors for the same component.
Error Handling: Implement proper error handling for all open ability components.
User Experience: Provide clear feedback to users about what will happen when they interact with open ability components.

For more information about open ability components, refer to the uni-app official documentation.

Open Ability Components ​

web-view ​

Properties ​

Events ​

Example ​

ad ​

Properties ​

Events ​

Example ​

official-account ​

Properties ​

Events ​

Example ​

open-data ​

Properties ​

type Values ​

Example ​

login-button ​

Properties ​

Events ​

Example ​

subscribe ​

Properties ​

Events ​

Example ​

button (Open Ability) ​

Basic Usage ​

open-type Values ​

Platform Differences ​

Important Notes ​

Best Practices ​

Open Ability Components

web-view

Properties

Events

Example

ad

Properties

Events

Example

official-account

Properties

Events

Example

open-data

Properties

type Values

Example

login-button

Properties

Events

Example

subscribe

Properties

Events

Example

button (Open Ability)

Basic Usage

open-type Values

Platform Differences

Important Notes

Best Practices