手机下载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网络配置文…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...