手机下载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网络配置文…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...