手机下载APP （uniapp/vue）

筱歌儿

已于 2024-07-10 13:43:23 修改

阅读量504

点赞数 3

文章标签：智能手机 uni-app vue.js

于 2024-07-10 09:21:42 首次发布

本文链接：https://blog.csdn.net/shelter123456/article/details/140313523

版权

一、uniapp

<template>
  <view class="content">
    <view class="appName">{{ formData.appName }}</view>
    <view class="appInfo">{{ formData.appInfo }}</view>
    <image class="logo" :src="formData.icon"></image>
    <!-- <view class="text-area">
      <text class="title">{{ formData.appName }}</text>
    </view> -->

    <view class="download_button" @click="downloadApp('ios')">
      <view class="download_box"
        ><image
          src="/static/icon/ios.png"
          style="margin: 0 10px; width: 25px; height: 25px"
          mode="aspectFill"
        ></image>
        iPhone 下载
      </view>
    </view>
    <view class="download_button" @click="downloadApp('android')">
      <view class="download_box"
        ><image
          style="margin: 0 10px; width: 25px; height: 25px"
          src="/static/icon/android.png"
          mode="aspectFill"
        ></image>
        安卓 下载
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      platform: null,
      formData: {},
      formList: [],
    };
  },
  onLoad(options) {
    this.getPlatform();
    if (options.params) {
      const params = JSON.parse(decodeURIComponent(options.params));
      // 现在 params 变量包含了您传递的参数对象
      this.formData = params;
      this.formList = JSON.parse(JSON.stringify(params));
    }
    this.formData.come = 0;
    this.init();
  },
  methods: {
    //判断是否微信登陆
    isWeiXinLogin() {
      var ua = window.navigator.userAgent.toLowerCase();
      console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },

    downloadApp(platform) {
        if (this.isWeiXinLogin()) {
          uni.showToast({
            icon: "none",
            title: "点击右上角 ··· 在浏览器中打开下载",
            duration: 3000,
          });
          return;
        }

      if (platform == "ios") {
        var appleId = "appid";
       
        plus.runtime.launchApplication({
          action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
        });
      } else if (platform == "android") {
        var downloadUrl = `apk下载地址`;
        var urlStr = downloadUrl;
        // #ifdef APP-PLUS
        uni.showLoading({ title: "下载中,请稍后..." });
        uni.downloadFile({
          url: downloadUrl,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.hideLoading();
              uni.showToast({ title: "下载成功", icon: "success" });
              uni.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (res) {
                  uni.openDocument({
                    filePath: res.savedFilePath,
                    success: function (res) {
                      console.log(res, "打开安装包");
                    },
                  });
                },
                fail: (err) => {
                  console.log(err, "打开安装包-失败");
                },
              });
            }
          },
          fail: (err) => {
            console.log(err, "下载失败");
            uni.hideLoading();
            uni.showToast({
              title: "下载失败,请检查网络",
              icon: "none",
              duration: 1500,
            });
          },
        });
        return;
        // #endif

        // #ifdef H5
        window.open(urlStr);
        // #endif
      }
    },
    init() {
      if (this.formData) {
      
		 
		this.formData.appName = "XXX";
		this.formData.icon = "/static/icon/app1.png";
		this.formData.appInfo =
		  "xxx是一款....";
		this.formData.apkUrl =
		  "https://a.app.qq.com/o/simple.jsp?pkgname=XXX"; // 应用宝
		 
		 }
    },
    getPlatform() {
      var that = this;
      uni.getSystemInfo({
        success: function (res) {
          console.log(res.platform);
          that.platform = res.platform;

          // Vue.prototype.iosHidden = true;
        },
      });
    },
  },
};
</script>

<style>
.content {
  width: 100vw;
  height: 100vh;
  padding: 40px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* justify-content: center;  */
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 160rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.appName {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.appInfo {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.download_button {
  width: 180px;
  line-height: 45px;
  margin-bottom: 20px;
  background-color: #3ab3ae;
  color: #fff;
  border-radius: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.download_box {
  display: flex;
  align-items: center;
  image {
  }
  /* justify-content: space-around; */
}
</style>

二、原生js 引入vue.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>APP</title>
    <script src="./js/vue.js"></script>

    <link rel="stylesheet" href="./css/element-ui.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        var viewWidth = window.screen.width;
        if (viewWidth < 768) {
            //document.write('<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">'); 
        } else {
            document.write('<style>@media screen and (min-width: 768px) and (max-width: 1199px) {html {zoom: 0.8;}}</style>');
        } 
    </script>

</head>
<style>
    html,
    body {
        /* width: 100vw;
        max-height: 100vh; */
        /* overflow: hidden; */
        touch-action: manipulation;
    }

    .open {
        /* position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0; */
    }

    .content {
        /* width: 100%; */
        /* height: 100vh; */
        padding: 40px 20px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        /* justify-content: center;  */
    }

    .logo {
        height: 20rem;
        width: 20rem;
        margin-top: 10rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10rem;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 8rem;
        color: #8f8f94;
    }

    .appName {
        text-align: center;
        font-size: 5rem;
        margin-bottom: 2rem;
        margin-top: 4rem;
    }

    .appInfo {
        font-size: 2.5rem;
        line-height: 4rem;
        text-align: center;
    }

    .download_button {
        width: 30rem;
        line-height: 6rem;
        margin-top: 6rem;
        margin-bottom: 4rem;
        background-color: #3ab3ae;
        color: #fff;
        border-radius: 4.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .download_box {
        display: flex;
        align-items: center;
        font-size: 2.5rem;



        /* justify-content: space-around; */
    }

    .el-dialog {
        background-color: transparent !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        margin-top: 5vh !important;
        margin: 0 50px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        width: auto !important;
    }
</style>

<body>
    <div id="app">

        <el-dialog title="" :visible.sync="isWeiXin" :show-close="false" :close-on-click-modal="false"
            style="background-color: transparent !important;">
            <img src="./images/icon/open.png" alt="" class="open">
        </el-dialog>


        <div class="content" :style="isWeiXin?'opacity:0.2;':'opacity:1;'">

            <div class="appName">{{ formData.appName }}</div>
            <div class="appInfo">{{ formData.appInfo }}</div>
            <img class="logo" :src="formData.icon"></img>
          

            <div class="download_button" v-if="platform=='ios'" @click="downloadApp('ios')">
                <div class="download_box">
                    立即下载
                
                </div>
            </div>
            <div class="download_button" v-if="platform=='android'" @click="downloadApp('android')">
                <div class="download_box">
                    立即下载
                   
                </div>
            </div>
            <div class="download_button" v-if="platform=='pc'" @click="downloadApp('pc')">
                <div class="download_box">
                    立即下载
               
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
        document.addEventListener('touchstart', function (event) {
            // 当触摸点超过1个时，你阻止了默认行为。
            // 只有在用户试图进行缩放（通常需要两个触摸点）或其他需要多点触控的操作时，才会阻止默认行为。单点触控的操作，如点击、滑动等，不会被影响。
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, { passive: false });

        var app = new Vue({
            el: '#app',
            data: {
                title: "Hello",
                platform: null,
                isWeiXin: false,
                formData: {},
                formList: [],
            }, created(options) {
                this.isWeiXinLogin();
                this.getPlatform();

                this.formData.come = 2;//0 疯子读书 1吴门医述 2众秒之门
                this.init();
            },
            methods: {
                //判断是否微信登陆
                isWeiXinLogin() {

                    var ua = window.navigator.userAgent.toLowerCase();
                    // 通过正则表达式匹配ua中是否含有MicroMessenger字符串
                    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                        this.isWeiXin = true;
                    } else {
                        this.isWeiXin = false;
                    }


                },
                async downloadApp(platform) {

                   
                    if (platform == "ios") {

                      
                        var appStoreUrl = "itms-apps://itunes.apple.com/cn/app/id" + this.formData.appleId;

                        // 跳转到App Store
                        window.location.href = appStoreUrl;

                    } else if (platform == "android") {

                        var src = 'apk下载地址';
                        if (src != '') {
                            var form = document.createElement('form');
                            form.action = src;



                            document.getElementsByTagName('body')[0].appendChild(form);
                            form.submit();
                        } else {
                            window.location.href = this.formData.apkUrl
                        }


                    }

                    else if (platform == "pc") {
                        console.log('platform at line 269:', platform)

                        var src = 'apk下载地址';

                        window.open(src);
                    }
                },
                init() {
                    if (this.formData) {
                        this.formData.appName = "XXX";
		this.formData.icon = "/static/icon/app1.png";
		this.formData.appInfo =
		  "xxx是一款....";
		this.formData.apkUrl =
		  "https://a.app.qq.com/o/simple.jsp?pkgname=XXX"; // 应用宝
		    }
                },
                getPlatform() {
                    var that = this;
                    const userAgent = navigator.userAgent;

                    if (userAgent.match(/Android/i)) {
                        that.platform = 'android'
                    } else if (userAgent.match(/iPhone/i)) {
                        that.platform = 'ios'
                    }
                    if (!window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
                        console.log('pc')
                        that.platform = 'pc'
                    }
                   
                },
            },
        });
    </script>
</body>

</html>