开放能力

open-data

解释:用于展示百度 App 开放的数据。

属性说明:

属性名类型默认值说明
typeString开放数据类型

type 有效值:

值说明
userNickName用户昵称
userAvatarUrl用户头像
userGender用户性别

示例： 

  1. <open-data type="userNickName"></open-data>
    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userGender"></open-data>

web-view

解释：
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个智能小程序页面。

属性说明:

属性名类型默认值说明最低版本
srcString-webview 指向网页的链接-
bindmessageEventHandler-网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }1.12.0

示例： 

  1. <!-- swan -->
    <!-- 首页的 web-view -->
    <web-view src="https://m.baidu.com"></web-view>

相关接口1

web-view 网页中可使用 JSSDK 提供的接口返回智能小程序页面。 支持的接口有：

接口名说明
swan.webView.navigateTo参数与智能小程序接口一致
swan.webView.navigateBack参数与智能小程序接口一致
swan.webView.switchTab参数与智能小程序接口一致
swan.webView.reLaunch参数与智能小程序接口一致
swan.webView.redirectTo参数与智能小程序接口一致
swan.webView.getEnv获取当前环境
swan.webView.postMessage向小程序发送消息
旧版本 swan.xxxx,已更新为 swan.webView.xxxx。

示例： 

  1. <!-- html -->

    <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.3.js"></script>

  1. // javascript
    swan.webView.navigateTo({url: '/pages/detail/index'});
    swan.webView.postMessage({ data: 'foo' })
    swan.webView.postMessage({ data: {foo: 'bar'} })
    swan.webView.getEnv(function(res) { console.log(res.smartprogram) // true })

相关接口2

web-view 网页中支持的接口有：

接口模块接口说明具体接口备注
设备拨打电话swan.makePhoneCall-
开放接口打开小程序swan.navigateToSmartProgram-
开放接口登录swan.login-
剪贴板设置剪贴板swan.setClipboardData-
设备获取网络类型swan.getNetworkType-
媒体预览图片swan.previewImage-
开放接口分享swan.openShare需传入当前要分享的小程序的appKey
地理位置使用内置地图打开地点swan.openLocation-
地理位置获取地理位置swan.getLocation-
图像接口拍照或上传swan.chooseImage-

说明:

  • 网页内 iframe 的域名也需要配置到域名白名单。
  • 每个页面只能有一个 <web-view/> ，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
  • 网页与智能小程序之间不支持除 JSSDK 提供的接口之外的通信。

画布广告