uniapp接入openinstall配置

1、h5页面调用方法

  1. <html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  5.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  6.   <meta name="apple-mobile-web-app-capable" content="yes" /><!-- home screen app 全屏 -->
  7.   <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 状态栏 -->
  8.   <meta http-equiv="Access-Control-Allow-Origin" content="*">
  9.   <meta name="keywords" content="红叉">
  10.   <link rel="icon" href="#"  type="image/x-icon"/>
  11.   <script type="text/javascript" charset="UTF-8" src="https://web.cdn.openinstall.io/openinstall.js"></script>
  12.   <title>红叉App</title>
  13.   <script>
  14.       //移动端rem适配
  15.       ;(function(win, lib) {
  16.           var doc = win.document;
  17.           var docEl = doc.documentElement;
  18.           var metaEl = doc.querySelector('meta[name="viewport"]');
  19.           var flexibleEl = doc.querySelector('meta[name="flexible"]');
  20.           var dpr = 0;
  21.           var scale = 0;
  22.           var tid;
  23.           var flexible = lib.flexible || (lib.flexible = {});
  24.           if (metaEl) {
  25.               console.warn('将根据已有的meta标签来设置缩放比例');
  26.               var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
  27.               if (match) {
  28.                   scale = parseFloat(match[1]);
  29.                   dpr = parseInt(1 / scale);
  30.               }
  31.           } else if (flexibleEl) {
  32.               var content = flexibleEl.getAttribute('content');
  33.               if (content) {
  34.                   var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  35.                   var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  36.                   if (initialDpr) {
  37.                       dpr = parseFloat(initialDpr[1]);
  38.                       scale = parseFloat((1 / dpr).toFixed(2));
  39.                   }
  40.                   if (maximumDpr) {
  41.                       dpr = parseFloat(maximumDpr[1]);
  42.                       scale = parseFloat((1 / dpr).toFixed(2));
  43.                   }
  44.               }
  45.           }
  46.           if (!dpr && !scale) {
  47.               var isAndroid = win.navigator.appVersion.match(/android/gi);
  48.               var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  49.               var devicePixelRatio = win.devicePixelRatio;
  50.               if (isIPhone) {
  51.                   // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
  52.                   if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  53.                       dpr = 3;
  54.                   } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
  55.                       dpr = 2;
  56.                   } else {
  57.                       dpr = 1;
  58.                   }
  59.               } else {
  60.                   // 其他设备下，仍旧使用1倍的方案
  61.                   dpr = 1;
  62.               }
  63.               scale = 1 / dpr;
  64.           }
  65.           docEl.setAttribute('data-dpr', dpr);
  66.           if (!metaEl) {
  67.               metaEl = doc.createElement('meta');
  68.               metaEl.setAttribute('name', 'viewport');
  69.               metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  70.               if (docEl.firstElementChild) {
  71.                   docEl.firstElementChild.appendChild(metaEl);
  72.               } else {
  73.                   var wrap = doc.createElement('div');
  74.                   wrap.appendChild(metaEl);
  75.                   doc.write(wrap.innerHTML);
  76.               }
  77.           }
  78.           function refreshRem(){
  79.               var width = docEl.getBoundingClientRect().width;
  80.               if (width / dpr > 540) {
  81.                   width = 540 * dpr;
  82.               }
  83.               var rem = width / 10;
  84.               docEl.style.fontSize = rem + 'px';
  85.               flexible.rem = win.rem = rem;
  86.           }
  87.           win.addEventListener('resize', function() {
  88.               clearTimeout(tid);
  89.               tid = setTimeout(refreshRem, 300);
  90.           }, false);
  91.           win.addEventListener('pageshow', function(e) {
  92.               if (e.persisted) {
  93.                   clearTimeout(tid);
  94.                   tid = setTimeout(refreshRem, 300);
  95.               }
  96.           }, false);
  97.           if (doc.readyState === 'complete') {
  98.               doc.body.style.fontSize = 12 * dpr + 'px';
  99.           } else {
  100.               doc.addEventListener('DOMContentLoaded', function(e) {
  101.                   doc.body.style.fontSize = 12 * dpr + 'px';
  102.               }, false);
  103.           }
  104.           refreshRem();
  105.           flexible.dpr = win.dpr = dpr; 
  106.           flexible.refreshRem = refreshRem;
  107.           flexible.rem2px = function(d) {
  108.               var val = parseFloat(d) * this.rem;
  109.               if (typeof d === 'string' && d.match(/rem$/)) {
  110.                   val += 'px';
  111.               }
  112.               return val;
  113.           }
  114.           flexible.px2rem = function(d) {
  115.               var val = parseFloat(d) / this.rem;
  116.               if (typeof d === 'string' && d.match(/px$/)) {
  117.                   val += 'rem';
  118.               }
  119.               return val;
  120.           }
  121.       })(window, window['lib'] || (window['lib'] = {}));
  122.   </script>
  123.   <script>
  124.         var data = OpenInstall.parseUrlParams();///openinstall.js中提供的工具函数，解析url中的所有查询参数
  125.         new OpenInstall({
  126.             /*appKey必选参数，openinstall平台为每个应用分配的ID*/
  127.             appKey : "t7heo9",
  128.             /*OpenInstall初始化完成的回调函数，可选*/
  129.             onready : function() {
  130.                 var vm = this;
  131.                 document.getElementById("download").onclick = function (){
  133.                     vm.schemeWakeup();         //唤起app
  135.                     vm.wakeupOrInstall();             //下载app
  137.                     openinstall.getInstall(    //待确定h5页面要不要加（获取所传参数方法）
  138.                         8,
  139.                         function(result) {
  140.                             console.log('getInstall : channel=' + result.channelCode + ', data=' + result.bindData);
  141.                         }
  142.                     );
  143.                 };
  144.             }
  145.         }, data);
  146.     // 初始化方法
  147.     window.onload = function(){
  148.         var dom = document.getElementById("xpopup");
  149.         var page = document.getElementById("body");
  150.         var ua = window.navigator.userAgent.toLowerCase();     
  151.         if(ua.match(/MicroMessenger/i) == 'micromessenger'){
  152.             dom.style.display="black";
  153.             page.style.overflow="hidden";
  154.             return true;  //是微信
  155.         }else{
  156.             dom.style.display="none";
  157.             return false;  //不是微信
  158.         }
  159.     }
  161.     //解决ios下 双击放大问题！
  162.     var lastTouchEnd = 0;
  163.     document.documentElement.addEventListener('touchend', function (event) {
  164.         var now = Date.now();
  165.         if (now - lastTouchEnd <= 300) {
  166.             event.preventDefault();
  167.         }
  168.         lastTouchEnd = now;
  169.     }, false);
  171.   </script>
  172. </head>
  173.   <body id='body' style="overflow-x:hidden">
  174.     <div id="hc">
  175.         <!-- 微信浏览器弹窗 -->
  176.         <div class="images ximg" id="xpopup">
  177.             <img  class="w80" src="https://sizex-app.oss-accelerate.aliyuncs.com/92066ce78abb4d0ab9a5f29a78c005ab/base/landing-popup.png">
  178.         </div>
  179.         <!-- 顶部标题 -->
  180.         <div class="image"  id="download" >
  181.             <img src="https://sizex-app.oss-accelerate.aliyuncs.com/92066ce78abb4d0ab9a5f29a78c005ab/base/landing-header.png">
  182.         </div>
  183.         <!-- 下载app领福利 -->
  184.         <div class="image" id="downloadBtn" >
  185.             <img src="https://sizex-app.oss-accelerate.aliyuncs.com/92066ce78abb4d0ab9a5f29a78c005ab/base/landing-content.png">
  186.         </div>
  187.         <!-- 商品列表 -->
  188.         <div class="image"  id="downloadButton" >
  189.             <img src="https://sizex-app.oss-accelerate.aliyuncs.com/92066ce78abb4d0ab9a5f29a78c005ab/base/landing-product.png">
  190.         </div>
  191.         <!-- 底部小程序二维码 -->
  192.         <div class="image">
  193.             <img src="https://sizex-app.oss-accelerate.aliyuncs.com/92066ce78abb4d0ab9a5f29a78c005ab/base/landing-bottom.png">
  194.         </div>
  195.     </div>
  196.   </body>
  197.   <style>
  198.       * {
  199.           padding: 0;
  200.           margin: 0;
  201.       }
  202.        .image{
  203.            width: 100%;
  204.        }
  205.        .images{
  206.            height: 100%;
  207.            position: absolute;
  208.            width: 100%;
  209.            z-index: 10;
  210.            top: 0px;
  211.            background-color: rgba(0,0,0,0.7);
  212.        }
  213.        .image img{width: 100%;}
  214.        .w80{
  215.             position: absolute;
  216.             width: 80%;
  217.             top:30px;
  218.             right: 30px;
  219.             z-index: 10;
  220.         }
  221.        .ximg{
  222.            position: absolute;
  223.            width: 100%;
  224.            z-index: 10;
  225.            top: 0px;
  226.        }
  228.   </style>  
  229. </html>

app.vue

  1. onLaunch: async (options)=>{
  2.             // #ifdef APP-PLUS
  3.                 //openinstall插件安装绑粉功能实现
  4.                 const openinstall = uni.requireNativePlugin('openinstall-plugin');
  5.                 await openinstall.init();
  6.                 await openinstall.getInstall(8,  //获取安装绑定用户数据
  7.                     async (result)=>{
  8.                         if(result.bindData){
  9.                             let xdata = JSON.parse(result.bindData);
  10.                             await uni.setStorageSync('shareId',xdata.uuid);
  11.                         }
  12.                     }
  13.                 );
  14.                 APPUpdate(); //判断app是否需要升级
  15.             // #endif
  16.             // #ifdef MP-WEIXIN
  17.                 this.autoUpdate();
  18.             //#endif
  19.         },