H5应用与App的交互

扫一扫

可直接在H5中调用App原生的扫一扫功能。

示例代码如下：

<!-- javascript -->
<button onclick="scanOnClick();">扫一扫</button>
<script>
function scanOnClick(){
    app.postMessage('scan');
}
function scan(message){
    // message 为扫一扫返回的结果
    alert(message);
}
</script>

<!-- vue3 -->
<button @click="scanOnClick">扫一扫</button>
<script>
setup() {
    var message = ref('Hello vue!')
    var scanOnClick = () => {
        app.postMessage('scan');
    }
    window.scan = (result) => {
        message.value = result; // 扫码后返回的结果
    }
    return {
        message,
        scanOnClick,
    }
}
</script>

<!-- vue2 -->
<button @click="scanOnClick">扫一扫</button>
<script>
data(){
    return {
        message: 'Hello vue!'
    }
},
mounted() {
    window.scan = (result) => {
        this.message = result; // 扫码后返回的结果
    }
},
methods: {
    scanOnClick(){
        app.postMessage('scan');
    }
}
</script>

跳转

当 href 失效时可用。

示例代码如下：

// 需 https:// 开头
app.postMessage('https://网址');

下载

打开默认浏览器下载。

示例代码如下：

// 需 file:// 开头
app.postMessage('file://https://xapply.cn/upload/logo.png');
app.postMessage('file://https://xapply.cn/upload/api.pdf');
app.postMessage('file://https://xapply.cn/upload/doc.zip');

加载提示

会在原生层面显示默认的加载提示框。

示例代码如下：

// 默认显示“加载中”
app.postMessage('showLoading');
// 自定义提示文本
app.postMessage('showLoading::提交中');
// 隐藏加载
app.postMessage('hideLoading');

确定提示框

会在原生层面显示默认的确定提示框。

示例代码如下：

// 显示提示框
app.postMessage('confirm::确认要删除吗？');
// 点击确定按钮的默认回调函数
function getConfirm(){
    alert('已确认');
}
// 指定回调函数
app.postMessage('confirm::myConfirmCallbak::确认要删除吗？');
function myConfirmCallbak(){
    alert('触发指定回调动作');
}

设置标题

设置H5的原生标题。

示例代码如下：

app.postMessage('setTitle::企业简介');

后续会不断的加入新的方法来增强H5的交互能力。