This topic describes how to load an online preview and editing service through a WebView, using a WeChat mini program as an example.
Step 1: Import the JS-SDK
The SDK can be imported only using a non-module reference. When you import the SDK, specify the version number based on your requirements.
<script src="https://g.alicdn.com/IMM/office-js/${x.y.z}/aliyun-web-office-sdk.min.js"></script>For more information, see JS-SDK versions.
Step 2: Make a call to the SDK in an HTML5 page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebOffice</title>
<style>
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.custom-mount { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="custom-mount"></div>
<script src="https://g.alicdn.com/IMM/office-js/${x.y.z}/aliyun-web-office-sdk.min.js"></script>
<script>
window.onload = async function() {
// Instantiate the JS SDK
const instance = aliyun.config({
url: 'your file URL',
});
async function example() {
await instance.ready();
const app = instance.Application;
}
example();
};
</script>
</body>
</html>Step 3: Use WebView in the WeChat mini program
Go to https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html and click Preview with Developer Tool in the topic to preview the effects.
If a message indicates that your domain name is not on the WebView whitelist for the mini program, contact IMM technical support through the DingTalk user group. For the group number, see Contact us. Technical support will add your domain name to the whitelist after you provide the WeChat trusted domain validation file.
Example of JSSDK embedding:
<view class="page-body">
<view class="page-section page-section-gap">
<web-view src="http://localhost:8080"></web-view>
</view>
</view>