tencent cloud

Feedback

Open Capabilities

Last updated: 2024-03-04 23:04:07

    web-view

    Feature Description: The web-view component serves as a container designed to accommodate web pages. It automatically fills the entire mini program page. Currently, this feature is not available for individual type mini programs. Corporate developers are required to select the service category on the developer platform first.
    Parameter and Description:
    Attribute
    Type
    Default value
    Description
    src
    string
    -
    The webview points to a webpage link. The webpage requires configuration of the business domain after logging into the TMF Mini Program Management Backend.
    bindload
    eventhandler
    -
    When a webpage posts a message to the mini program, it triggers and receives messages at specific times (when the mini program backs out, the component is destroyed, or shared). e.detail = { data }, where data is an array composed of parameters from multiple postMessage instances.
    binderror
    eventhandler
    -
    This event is triggered when the webpage loads successfully. e.detail = { src }
    binderror
    eventhandler
    -
    This event is triggered when the webpage fails to load. e.detail = { src }
    Sample Code
    <!-- wxml -->
    <web-view src="https://www.qq.com/"></web-view>
    Relevant interface 1
    Within the web-view, the interface provided by JSSDK can be used to return to the mini program page. The supported interfaces include:
    Interface Name
    Description
    wx.miniProgram.navigateTo
    The parameters are consistent with the mini program interface.
    wx.miniProgram.navigateBack
    The parameters are consistent with the mini program interface.
    wx.miniProgram.switchTab
    The parameters are consistent with the mini program interface.
    wx.miniProgram.reLaunch
    The parameters are consistent with the mini program interface.
    wx.miniProgram.redirectTo
    The parameters are consistent with the mini program interface.
    wx.miniProgram.postMessage
    Sending a message to the mini program will trigger the component's message event at the following specific times: when the mini program is backed out, when the component is terminated, when sharing, and when copying the link.
    wx.miniProgram.getEnv
    Obtaining the current environment
    Sample Code
    <!-- html -->
    <script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"></script>
    wx.miniProgram.navigateTo({url: '/path/to/page'})
    wx.miniProgram.postMessage({ data: 'foo' })
    wx.miniProgram.postMessage({ data: {foo: 'bar'} })
    wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
    Relevant interface 2
    <web-view> page currently does not support other media-related interfaces.
    Relevant interface 3
    During user sharing, the current <web-view> URL can be obtained, that is, the webViewUrl parameter is returned in the onShareAppMessage callback.
    Sample Code
    Page({
    onShareAppMessage(options) {
    console.log(options.webViewUrl)
    },
    })
    Relevant interface 4
    Within the webpage, the window.__wxjs_environment variable can be used to determine whether it is in a mini program environment. It is recommended to use it in the WeixinJSBridgeReady callback, or the getEnv interface provided by JSSDK can also be used.
    Sample Code
    // Within the web-view page
    function ready() {
    console.log(window.__wxjs_environment === 'miniprogram') // true
    }
    if (!window.QQJSBridge || !QQJSBridge.invoke) {
    document.addEventListener('WeixinJSBridgeReady', ready, false)
    } else {
    ready()
    }
    
    // Or
    wx.miniProgram.getEnv(function(res) {
    console.log(res.miniprogram) // true
    })
    Relevant interface 5
    The mini program web-view environment can be determined by checking if the term 'miniProgram' is included in the userAgent.
    Note:
    The domain of the iframe within the webpage also needs to be configured into the domain allowlist.
    On the developer tool, debugging can be initiated on the <web-view> component by right-clicking and selecting 'Debug'.
    Each page can only contain one <web-view>. The <web-view> will automatically fill the entire page and overlay other components.
    Communication between the <web-view> webpage and the mini program is not supported, except for the interfaces provided by JSSDK.
    To prevent blank screen issues when opening on iOS, it is recommended to avoid including Chinese characters in the link and to use encodeURIComponent.
    When the prompt 'insertHTMLWebView:fail no permission' appears, it indicates that there is no permission to use <web-view>. Currently, individual developers and corporate developers who have not selected a service category cannot be called.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support