制作一个骨关节炎SI-613APP从代码算法上怎么实现

1，通过手机网页实现运行APP功能，有就运行APP这个功能，没有就去下载APP

下面是安卓代码配置。其实scheme和host要和js这边统一

<span style="font-size:18px;"><intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="qiyimobile" android:host="self/qiyi.madeindexpage" android:pathPrefix="/**"> </data> </intent-filter></span>

js这边稍微麻烦一些。如果只拉起app比较简单，直接通过a连接或者window.location.href=“**”即可。不过这里有个问题，就是有些手机在未安装app的时候会识别我们之前定的那个协议尝试打开这个网页，当然会报找不到网页。这里用iframe的方式兼容性稍好。

var ifr = document.createElement('iframe');
ifr.src = 'qiyimobile://self/qiyi.madeindexpage';
document.body.appendChild(ifr);

当手机未安装app时应该跳转到下载页，很多人说延时一下直接跳转就行，如下

window.location.href=“打开地址”
setTimeout(function() {
window.location.href=“下载地址”
}, 500);

设置一个初始时间，打开拉起app地址后有个结束时间，计算两者之差，当差大于一定时间是说明安装了app，当差很小时说明没有打开app，需要跳转到下载页。

最终代码如下

downloadapp.addEventListener('click', function() {
var start = new Date();//记录初始时间
var t = 500;
var ifr = document.createElement('iframe');
ifr.src = 'qiyimobile://self/qiyi.madeindexpage';//打开app
document.body.appendChild(ifr);
ifr.onload = function() {
};
ifr.style.display='none';
setTimeout(function() {
document.body.removeChild(ifr);
var end = new Date();//记录结束时间
console.log(end - start)
if (end - start <= (t + 30)) {//两者之差小于30ms时跳转到下载页
window.location.href = "https://www.baidu.com"
}
}, t);
})

2，在H5页面里触发链接跳转，App Webview检测到链接跳转再进行拦截，因此可以通过URL上携带参数来告知App下一步应该做些什么。

import React, { Component } from "react";

export default class App extends Component {
componentDidMount() {
location.href = "lsbox://toast?msg=页面加载完毕"; // 通知App
}
render() {
return (

<button type="button" onclick="{this.openMask.bind(this)}">点它</button>

);
}
openMask() {
location.href = "lsbox://mask?toggle=1"; // 通知App
}
}

3，注入一些全局方法，App Webview直接操作全局方法来控制H5页面，使用window.handleFunc = function() {}这样的形式来定义注入的方法。

import React, { Component } from "react";
 
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [0, 1, 2, 3, 4]
        };
    }
    componentDidMount() {
        window.addNum = this.addNum.bind(this); // 暴露方法给App
    }
    render() {
        return (
             
                <ul>{this.state.list.map(v => <li key="{v}">{v}</li>)}</ul>
            ;
        );
    }
    addNum(num) {
        this.setState(prevState => ({
            list: prevState.list.concat(num);
        }));
    }
}

• 点赞
• 收藏
• 分享
• 文章举报