微信如何通过Html网页调用本地安卓app 或者ios app？-白红宇的个人博客

微信如何通过Html网页调用本地安卓app 或者ios app？

发布日期：2021-05-07 19:16:09 浏览次数：24 分类：原创文章

本文共 4981 字，大约阅读时间需要 16 分钟。

ps:此处只有android教程，，ios的自己看文档吧。。

需求

微信如何通过Html网页调用本地安卓app 或者ios app

效果

android端

调用起来apk 没有问题，但是第一次应用没有安装的话需要点击两次才可以下载，如果已经下载可以正常调用的经过测试学堂在线android端和iso端也是用的这个具体测试方法

ios端

微信在6.6.1版本后，单方面禁止了iOS的Universal Links的使用，所以提示右上角打开Safari来拉起app，其它app和浏览器不受影响

以下纯android 方法...ios的请自己看上面文档哦我不懂ios...才疏学浅，，告辞

演示

复制如下链接到微信聊天窗口

http://www.xuetangx.com/courses/course-v1:TsinghuaX+60700052X+2019_T1/about

打开后

点击打开客户端

但是第一次应用没有安装的话需要点击两次才可以下载，如果已经下载可以正常调用

ios端。。效果微信在6.6.1版本后，单方面禁止了iOS的Universal Links的使用，所以提示右上角打开Safari来拉起app，其它app和浏览器不受影响我用的是最新版的微信 so 效果是点击后网页上面出现一层遮罩提示去浏览器打开然后再次拉起app

方案

使用第三方openinstall

他们里面有详细的api和耐心解答的客服，，

但是为了下次集成的更迅速我准备把步骤记录下来。。。

注册好账号登录
点击+号创建app

1 创建app 名称我们就叫做官方demo

创建好了以后会出现

AppKey：pqnyjs

Scheme~此处没有出现但是根据我机智的判断应该是和AppKey一样 ~~~不信我们接着集成

选择免费版（如果有需要付费版的功能可以支持一下）

android 端其他细节集成

点击android按照他的官方文档集成（此处可以下载到他们的demo）

如果没有修改直接上传编译好的他的官方安装包

他会提示你

appKey 有问题

scheme(由openinstall自动分配)： pqnyjs 也有问题

改好appkey and scheme

如下

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"          package="com.fm.openinstalldemo">    <uses-permission android:name="android.permission.INTERNET"/>    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>    <!-- 获取mac地址 -->    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>    <!-- 获取deviceId -->    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>    <!-- 写文件存储 -->    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>    <application        android:name=".InstallApplication"        android:allowBackup="false"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".SplashActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN"/>                <category android:name="android.intent.category.LAUNCHER"/>            </intent-filter>        </activity>        <!-- android:allowTaskReparenting="true" -->        <activity            android:name=".MainActivity"            android:launchMode="singleTask">            <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="pqnyjs"/>            </intent-filter>        </activity>        <activity android:name=".WakeupActivity"/>        <activity android:name=".InstallActivity"/>        <activity android:name=".ChannelActivity"/>        <meta-data            android:name="com.openinstall.APP_KEY"            android:value="pqnyjs"/>    </application></manifest>

编译后，再上传一次

android 端其他细节集成

点击android 集成文档

web端集成

网址

直接用js 加到自己项目中就好记得把注释去掉

     /*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*/        //preferWakeup:true,

下载体验就是我说的要点两次下载才可以下载，，第一次没反应拉起是正常的。。。

html代码如下

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body><button id="downloadButton">点我跳转</button><!-- 以下为openinstall集成代码，建议在html文档中尽量靠前放置，加快初始化过程 --><!-- 强烈建议直接引用下面的cdn加速链接，以得到最及时的更新，我们将持续跟踪各种主流浏览器的变化，提供最好的服务；不推荐将此js文件下载到自己的服务器--><script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script><script type="text/javascript">    //openinstall初始化时将与openinstall服务器交互，应尽可能早的调用    /*web页面向app传递的json数据(json string/js Object)，应用被拉起或是首次安装时，通过相应的android/ios api可以获取此数据*/    var data = OpenInstall.parseUrlParams();//openinstall.js中提供的工具函数，解析url中的所有查询参数    new OpenInstall({        /*appKey必选参数，openinstall平台为每个应用分配的ID*/        appKey: "jrwpkb",        /*可选参数，自定义android平台的apk下载文件名，只有apk在openinstall托管时才有效；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/        //apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',        /*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*/        preferWakeup:true,        /*自定义遮罩的html*/        // mask: function () {        //     return "<div id='openinstall_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"        // },        /*openinstall初始化完成的回调函数，可选*/        onready: function () {            var m = this, button = document.getElementById("downloadButton");            button.style.visibility = "visible";            /*在app已安装的情况尝试拉起app*/            m.schemeWakeup();            /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/            button.onclick = function () {                m.wakeupOrInstall();                return false;            }        }    }, data);</script></body></html>

这样就集成完了。。。拉起很nice

上一篇：响应式布局@media screen and ( max-width: 像素值 ) {}

下一篇：Could not find bundletool.jar

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

ps:此处只有android教程，，ios的自己看文档吧。。

需求

效果

android端

ios端

演示

方案

web端集成

发表评论

最新留言

关于作者

推荐文章

ps:此处只有android教程，，ios的自己看 文档吧。。

需求

效果

android端

ios端

演示

方案

web端集成

发表评论

最新留言

关于作者

推荐文章

ps:此处只有android教程，，ios的自己看文档吧。。