web-view
Webview.
This component does not support personal Mini Program temporarily.
<web-view/>
The component is a component that is used to carry H5 webpage and automatically bespreads the whole Mini Program page.
Attribute Name | Type | Default | Description |
src | String | No | H5 webpage URL to be rendered in web-view H5 webpage URL needs login Mini Program management background- In Mini Program details - Setting, configure H5 domain whitelist |
onMessage | EventHandle | No | postMessage message from webpage to Mini Program e.detail = { data } |
Each page can have only one . Do not render multiple . It bestspreads whole page and overlaps other components.
Sample Code
copy
<!-- axml -->
<!-- web-view pointing to google -->
<web-view src="https://google.com/" onMessage="test"></web-view>
APIs Available
API Type | Name | Description |
Navigation | my.navigateTo | Navigate to another page of the app while keeping current one. |
Navigation | my.navigateBack | Close current page and return to one of the pages before. |
Navigation | my.switchTab | Navigate to a page on tabBar and close any other pages that are not on the tabBar. |
Navigation | my.reLaunch | Close all pages and navigate to a page from the app. |
Navigation | my.redirectTo | Close current page and navigate to a page from the app. |
Image | my.chooseImage | Take a photo or choose one from the album. (The file path of the obtained photo  can be sent to current MiniProgram via my.postMessage() , and then be uploaded if needed.) |
Image | my.previewImage | Preview the image. |
Location | my.getLocation | Get location information of current user. |
Popups | my.alert | Show alert window. |
Popups | my.showLoading | Show loading indicator. |
Popups | my.hideLoading | Hide loading indicator. |
Storage | my.setStorage | Store some data in local storage with a key. Will overwrite if the key already exists. |
Storage | my.getStorage | Retrieve stored data. |
Storage | my.removeStorage | Delete stored data. |
Storage | my.clearStorage | Clear local storage. |
Storage | my.getStorageInfo | Get information about local storage asynchronously. |
Network | my.getNetworkType | Get information about current network status. |
Payment | my.tradePay | Invoke payment procedures. (Don't process payment in H5 environment, and always call this API for payments.) |
Message | my.postMessage | Send message to current MiniProgram, in JSON format. |
Message | my.onMessage | Listen to messages from current MiniProgram. |
Environment | my.getEnv | Get information about current environment. |
Demo Code
Code for web-view
page for H5.
copy
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script>
my.navigateTo({url: '../get-user-info/get-user-info'});
// Send message to Mini Program.
my.postMessage({name:"test web-view"});
// Did receive message from Mini Program.
my.onMessage = function(e) {
console.log(e); // {'sendToWebView': '1'}
}
// Check if is run in Mini Program environment
my.getEnv(function(res) {
console.log(res.miniprogram) // true
});
</script>
After my.postMessage
is called, onMessage
will be executed in this MiniProgram page.
copy
<!-- .axml -->
<view>
<web-view id="web-view-1" src="..." onMessage="test"></web-view>
</view>
copy
// A 'test' method is declared in this page.
// As web-view in page.axml has set 'test' for the call of 'onMessage',
// after my.postMessage is executed in the web-view, test will be called.
Page({
onLoad(e){
this.webViewContext = my.createWebViewContext('web-view-1');
},
test(e){
my.alert({
content:JSON.stringify(e.detail),
});
this.webViewContext.postMessage({'sendToWebView': '1'});
},
});