手机下载APP (uniapp/vue)

server/2024/9/24 12:58:50/

一、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"><imagesrc="/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"><imagestyle="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.1if (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-PLUSuni.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 H5window.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 Storewindow.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>

http://www.ppmy.cn/server/62216.html

相关文章

kdiff3官方版本

当前 https://download.kde.org/stable/kdiff3/ GithHub 说明 一般在网上搜到的版本链接是https://kdiff3.sourceforge.net/&#xff0c;这个版本只有0.9.98 查看最新版本 最新版本如下

【LeetCode】2187. 完成旅途的最少时间

1. 题意 2. 分析 二分法有一个关键特征&#xff1a;如果答案answer满足题意&#xff0c;那么对于任何整数i&#xff0c;如果有i>answer&#xff0c;那么i也会是一个存在的解&#xff0c;只不过不是最优解。 本题想要找出一个达到 totalTrips 趟需要的最少时间成本t&#x…

iOS ------ 类 父类 元类的总结

一&#xff0c;类的定义 类在OC中其实是指向objc_class的结构体指针&#xff0c;结构体构造我 typedef struct objc_class *Class; struct objc_class { Class isa; Class super_class; const char *name; long version; long info; long instance_size; struct obj…

前端反显后端图片、上传预览图片

一、下载反显图片 1、将文件下载为blob格式文件。 2、将后端返回的文件转为base64&#xff0c;然后将解析完的数据赋值到图片组件上。 将后端返回的数据解拿出&#xff0c;调用转换base64 方法&#xff1a; downloadFile(_this.userInfo.imgUrl).then(res > {res res.data…

在linux中查找 / 目录下的以.jar结尾的文件(find / -name *.jar)

文章目录 1、查找 / 目录下的以.jar结尾的文件 1、查找 / 目录下的以.jar结尾的文件 [rootiZuf6332h890vozldoxcprZ ~]# find / -name *.jar /etc/java/java-1.8.0-openjdk/java-1.8.0-openjdk-1.8.0.342.b07-1.el9_0.x86_64/lib/security/policy/limited/US_export_policy.ja…

人像视频预处理【时间裁剪+画面裁切+调整帧率】

在视频处理中&#xff0c;cut&#xff08;裁剪&#xff09;、crop&#xff08;画面裁切&#xff09;和fps&#xff08;帧率调整&#xff09;这三个操作的顺序安排对最终的视频质量和效率有重要影响。以下是一种推荐的顺序和理由&#xff0c;旨在提高效率和减少错误&#xff1a;…

【深度学习】PyTorch框架(1):PyTorch基础

1.引言 PyTorch专辑的知识源于2023年阿姆斯特丹大学深度学习课程的PyTorch入门教程&#xff0c;旨在为程序员提供PyTorch基础的简洁介绍&#xff0c;并帮助您配置环境&#xff0c;以便编写自己的神经网络。PyTorch是一个开源的机器学习框架&#xff0c;它允许您自定义神经网络…

PostgreSQL 基于时间点恢复

作者&#xff1a;文若 前言 本篇文章介绍 PostgreSQL 基于时间点恢复&#xff08;point-in-time-recover&#xff09;需要的条件及恢复过程&#xff0c;属于操作说明。 1. WAL 日志 WAL&#xff08;Write Ahead Log&#xff09; 日志优先写机制&#xff0c;常用于关系型数据…