手机下载APP （uniapp/vue）
一、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>
相关文章：
手机下载APP （uniapp/vue）
一、uniapp <template><view class"content"><view class"appName">{{ formData.appName }}</view><view class"appInfo">{{ formData.appInfo }}</view><image class"logo" :src"formDa…...
python数据可视化（5）——绘制饼图
课程学习来源：b站up：【蚂蚁学python】 【课程链接：【【数据可视化】Python数据图表可视化入门到实战】】 【课程资料链接：【链接】】 Python绘制饼图分析北京天气 饼图，是一个划分为几个扇形的圆形统计图表ÿ…...
实习随笔【iviews的Select实现‘与全部互斥’的多选】
在实习中，遇到了如下需求，要求如下： 上面提到了一个需求为，选择全部与选择一个或者多个互斥，我们来看一下如何解决 核心代码 监听value的变化，如果含有‘全部’，且数组长度>1，则删…...
网站架构核心要素
高性能 技术指标：响应时间、吞吐量、并发数 前端优化手段 页面布局：css在前，js在后通信数据量：数据尽量精简缓存：浏览器缓存、cdn异步：ajax 后端优化手段 缓存：反向代理、redis异步&#x…...
XML 解析异常问题解决
问题描述 The parser has encountered more than "64000" entity expansions in this document; this is the limit imposed by the JDK. 在运行 Java 应用程序时，出现了 XML 解析异常。具体表现为： 报错信息显示无法创建 StAX（S…...
C# 匿名方法、Lambda、Linq概念及联系
匿名方法、Lambda表达式与LINQ 匿名方法 概念： 匿名方法是没有名称的方法实现，通常与委托关联使用。它提供了一种在不创建独立命名方法的情况下编写代码块的方式。 语法： delegate void MyDelegate(string message);MyDelegate del dele…...
django ninja get not allowed 能用 put delete
遇到一个奇怪的问题，django-ninja 编写的 get post 方法不能使用 # 获取Material router.get(/material, responseList[MaterialSchemaOut]) paginate(MyPagination) def list_material(request, filters: Filters Query(...)):qs retrieve(request, Material, f…...
服务器操作集合
服务器使用PC作为代理访问外网 1、PC上启动代理，比如nginx 下载nginx：http://nginx.org/en/download.html 修改配置文件，在conf下： http {include mime.types;default_type application/octet-stream;sendfile o…...
论文阅读【时空+大模型】ST-LLM（MDM2024）
论文阅读【时空大模型】ST-LLM（MDM2024） 论文链接：Spatial-Temporal Large Language Model for Traffic Prediction 代码仓库：https://github.com/ChenxiLiu-HNU/ST-LLM 发表于MDM2024（Mobile Data Management…...
【linux基础】linux远程传输三种免交互方式
linux远程传输三种免交互方式 文章目录 linux远程传输三种免交互方式1、使用sshpass工具2、使用expect脚本来输入密码3、SSH 密钥对 1、使用sshpass工具 建立信任关系的做法是最方便和安全的做法，但是在有些场景下(比如远端的authorized_keys是不能随意更改的)&…...
MySQL篇：事务
1.四大特性 首先，事务的四大特性：ACID（原子性，一致性，隔离性，持久性） 在InnoDB引擎中，是怎么来保证这四个特性的呢？ 持久性是通过 redo log （重做日志&…...
处理在 electron 中使用开启了懒加载的 el-image 后，窗口最大化或窗口尺寸变化后图片无法显示的问题
文章目录 1、问题描述2、详情动图3、解决思路4、解决方案5、效果展示 1、问题描述 在 electron 中使用 el-image 时，开启了懒加载后，发现只有当窗口滚动后，图片才会显示，即便图片已经处于窗口的可视区域。当拖动窗口使其尺寸变大…...
Electron 进程间通信
文章目录 渲染进程到主进程（单向）渲染进程到主进程（双向）主进程到渲染进程 （单向，可模拟双向） 渲染进程到主进程（单向） send （render 发送）on &a…...
0基础学python-8:if，while，for
目录 前言： 一、选择循环结构 1.if条件语句 2.while 3.for循环 4.break语句 5.continue语句 前言： if、while 和 for 是 Python 中常用的控制流结构，它们分别用于条件判断、循环执行和迭代遍历。这些关键字帮助程序根据条件和数据进行选…...
低空经济持续发热，无人机培训考证就业市场及前景剖析
随着科技的不断进步和社会需求的日益增长，低空经济已成为全球及我国经济增长的新引擎。作为低空经济的重要组成部分，无人机技术因其广泛的应用领域和显著的经济效益，受到了社会各界的广泛关注。为满足市场对无人机人才的需求，无人…...
[IDEA插件] JarEditor 编辑jar包（直接新增、修改、删除jar包内的class文件）
文章目录 1. 安装插件 JarEditor2. 在IDEA中添加外部JAR包3. JarEditor 使用介绍 之前我们需要修改jar内文件的时候需要解压jar包，反编译class，新建java源文件，修改代码，再编译成class，替换jar包内的class文件。 现在…...
JavaScript系列：JS实现复制粘贴文字以及图片
文章目录 一. 基于 Clipboard API 复制文字（推荐）基本概念主要方法使用限制实际应用示例 二、基于 document.execCommand(copy)缺陷实际应用示例说明 三、复制图片功能四、封装 一. 基于 Clipboard API 复制文字（推荐） 基本概念 …...
音视频入门基础：H.264专题（14）——计算视频帧率的公式
一、引言 通过FFmpeg命令可以获取到H.264裸流文件的视频帧率： 在vlc中也可以获取到视频帧率（vlc底层也使用了FFmpeg进行解码）： 所以FFmpeg和vlc是怎样获取到H.264编码的视频的帧率呢？它们其实是通过SPS中的VUI parame…...
LeetCode-返回链表倒数第K个节点、链表的回文结构，相交链表
一、返回链表倒数第k个节点 . - 力扣（LeetCode） 本体思路参展寻找中间节点的方法，寻找中间节点是定义快慢指针，快指针每次走两步，慢指针每次走一步，当快指针为空或者快指针的下一个节点是空时，…...
Linux 网络配置与连接
一、网络配置 1.1 ifconfig 网卡配置查询 ifconfig #查看所有启动的网络接口信息 ifconfig 指定的网卡 #查看指定网络接口信息 1.2 修改网络配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 #ens33网络配置文…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...