手机下载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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/43433.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

批量修改Git历史commit信息中的username

批量修改Git历史commit信息中的username

之前很长一段时间GitHub上的提交都在使用工作账户, 导致私人仓库中的提交者比较混乱. 在StackOver里面找到了一个bash脚本可以批量修改username, 在这里记录一下. 修改的步骤一共两步: 执行修改脚本将本地修改同步到Git服务器 首先我们来看脚本: #!/bin/shgit filter-branch…
阅读更多...
SFUZZ模糊测试平台全新升级，从标准到实践助力车企安全出海

SFUZZ模糊测试平台全新升级，从标准到实践助力车企安全出海

开源网安模糊测试平台SFuzz全新升级&#xff0c;参照各国相关标准要求进行针对性建设&#xff0c;可为智能网联汽车信息安全测试提供更为强大的工具支持。SFuzz向被测系统输入大量随机数据&#xff0c;模拟各种异常情况&#xff0c;可以发现被测系统内潜在的缺陷和漏洞&#xf…
阅读更多...
Spring中如何操作Redis

Spring中如何操作Redis

Spring毕竟是Java中的一个主流框架&#xff0c;如何在这个框架中使用Redis呢&#xff1f; 创建项目并引入相关依赖 然后进行创建。 至此就将Redis的相关依赖引入进来了。 编写Redis配置 将application.properties修改成application.yml 然后编写如下配置&#xff1a; spr…
阅读更多...
usbserver工程师手记（二）设置定时任务

usbserver工程师手记（二）设置定时任务

概述 部分银行ukey 长时间不使用后会导致休眠&#xff0c;出现虽然有连接&#xff0c;但是读不到证书&#xff0c;可以用定时重置端口的办法&#xff0c;调用接口 http://ip/usb_server/reset_port,参数为 {"port":"B5-1-2","vid_pid":"09…
阅读更多...
Golang | Leetcode Golang题解之第228题汇总区间

Golang | Leetcode Golang题解之第228题汇总区间

题目&#xff1a; 题解&#xff1a; func summaryRanges(nums []int) (ans []string) {for i, n : 0, len(nums); i < n; {left : ifor i; i < n && nums[i-1]1 nums[i]; i {}s : strconv.Itoa(nums[left])if left < i-1 {s "->" strconv.It…
阅读更多...
多个标签页中复用同一 QTableView

多个标签页中复用同一 QTableView

在 PyQt 中实现在多个标签页中复用同一个 QTableView 实例&#xff0c;复用同一个 QTableView 实例可以减少内存和资源的使用。每个 QTableView 实例都会消耗一定的内存和处理资源&#xff0c;如果每个标签页都创建一个新的实例&#xff0c;会增加系统的负担。通过复用实例&…
阅读更多...
每天一个数据分析题（四百二十一）- 一元线性回归模型

每天一个数据分析题（四百二十一）- 一元线性回归模型

关于一元线性回归的求解过程说法正确的是&#xff1f; A.一元线性回归只需要求解出两个参数系数即可 B.对于新来的样例&#xff0c;建立好的一元线性回归模型可以做出准确的预测 C.一元线性回归模型的基本形式是YAxe&#xff0c;其中A为系数&#xff0c;e为随机误差 D.一元线性…
阅读更多...
日常学习-20240710

日常学习-20240710

1、一次一千万条数据插入和删除案例&#xff1a; 第一次&#xff1a;插入--批量插入&#xff0c;每次插入5000条数据&#xff0c;总耗时28min,数据无异常 删除--通过sql语句一次性删除&#xff0c;总耗时1h52min;一次删除的数据过多导致mysql的备份恢复文件极其庞大&#xff0…
阅读更多...
CentOS7 安装 git 命令

CentOS7 安装 git 命令

通过yum源install下载的git版本比较低&#xff0c;不推荐此方式安装。 官网下载最新版git源码&#xff1a;Git 1. 解压安装包 tar -xzvf git-2.45.2.tar.gz 2. 安装相关依赖 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils…
阅读更多...
uniapp使用高德地图（公众号+h5）

uniapp使用高德地图（公众号+h5）

选择微信小程序的话后果就是你的地图出不来&#xff0c;出来了就报key异常 下面直接放配置和代码&#xff1a; 打包后的高德uni-app,uniCloud,serverless,高德地图,申请高德地图Key,配置使用高德地图,参数说明,高德开放平台用户名,百度地图,申请百度地图Key,配置使用百度地图,…
阅读更多...
线性代数|机器学习-P22逐步最小化一个函数

线性代数|机器学习-P22逐步最小化一个函数

文章目录 1. 概述2. 泰勒公式3. 雅可比矩阵4. 经典牛顿法4.1 经典牛顿法理论4.2 牛顿迭代法解求方程根4.3 牛顿迭代法解求方程根 Python 5. 梯度下降和经典牛顿法5.1 线搜索方法5.2 经典牛顿法 6. 凸优化问题6.1 约束问题6.1 凸集组合 Mit麻省理工教授视频如下&#xff1a;逐步…
阅读更多...
bert训练的一些技巧(rand() ＜ self.skipgram_prb)

bert训练的一些技巧(rand() ＜ self.skipgram_prb)

rand() < self.skip_gram_prb) 是一个条件表达式&#xff0c;用来判断是否进行skip-gram掩码操作。这种掩码操作通常用于自然语言处理中的数据增强&#xff0c;通过概率决定是否应用skip-gram掩码。下面是对这个表达式的详细解释&#xff1a; 解释 rand(): rand() 是一个随…
阅读更多...
uniapp 初始学习1

uniapp 初始学习1

uni-app代码基本包括js,vue,css.在app端支持原生渲染nvue&#xff0c;可编译的kotlin和swift 掌握js就可以进行不同应用的开发 页面文件遵循 Vue 单文件组件 (SFC) 规范&#xff0c;即每个页面是一个.vue文件 .vue文件是一个自定义的文件类型&#xff0c;用类HTML语法描述一…
阅读更多...
SpringBoot使用RedisTemplate、StringRedisTemplate操作Redis

SpringBoot使用RedisTemplate、StringRedisTemplate操作Redis

前言 RedisTemplate 是 Spring Boot 访问 Redis 的核心组件&#xff0c;底层通过 RedisConnectionFactory 对多种 Redis 驱动进行集成&#xff0c;上层通过 XXXOperations 提供丰富的 API &#xff0c;并结合 Spring4 基于泛型的 bean 注入&#xff0c;极大的提供了便利&#x…
阅读更多...
深度学习和NLP中的注意力和记忆

深度学习和NLP中的注意力和记忆

深度学习和NLP中的注意力和记忆 文章目录 一、说明二、注意力解决了什么问题&#xff1f;#三、关注的代价#四、机器翻译之外的关注#五、注意力&#xff08;模糊&#xff09;记忆&#xff1f;# 一、说明 深度学习的最新趋势是注意力机制。在一次采访中&#xff0c;现任 OpenAI 研…
阅读更多...
使用 python 构建企业级高可用海量爬虫调度系统

使用 python 构建企业级高可用海量爬虫调度系统

一、引言 在大数据时代&#xff0c;信息的获取与分析成为了企业决策的重要依据。对于营销行业而言&#xff0c;实时抓取和分析竞争对手动态、市场趋势以及用户反馈等数据&#xff0c;是制定有效策略的关键。然而&#xff0c;构建一个高可用的、能够处理海量数据的爬虫调度系统…
阅读更多...
K8S中部署 Nacos 集群

K8S中部署 Nacos 集群

1. 准备 GitK8Skubectlhelm 咱也没想到 K8S 部署系列能搞这么多次&#xff0c;我一个开发天天干运维的活&#xff0c;前端后端运维测试工程师实至名归。 2. 方案选择 https://github.com/nacos-group/nacos-k8s 我替你们看了一下&#xff0c;有好几种方式能部署&#xff…
阅读更多...
华为机考真题 -- 求字符串中所有整数

华为机考真题 -- 求字符串中所有整数

题目描述&#xff1a; 输入字符串s&#xff0c;输出s中包含所有整数的最小和。 说明&#xff1a;字符串s&#xff0c;只包含 a-z A-Z &#xff1b; 合法的整数包括&#xff1a; 1&#xff09; 正整数 一个或者多个0-9组成&#xff0c;如 0 2 3 002 102 2&#xff09;负整数…
阅读更多...
【RHCE】基于用户认证和TLS加密的HTTP服务（HTTPS）

【RHCE】基于用户认证和TLS加密的HTTP服务（HTTPS）

目录 一、创建用户账号 二、TLS加密 三、配置http服务子配置文件 四、创建访问http服务的文件夹以及输入重定向到文件 五、配置Linux本地仓库以及Windows下的本地仓库 六、基础操作 七、测试 一、创建用户账号 用户认证 # 创建两个账户 [rootlocalhost ~]# htpasswd -…
阅读更多...
交叉熵损失函数的使用目的（很肤浅的理解）

交叉熵损失函数的使用目的（很肤浅的理解）

第一种使用方法 import torch from torch import nn # Example of target with class indices loss nn.CrossEntropyLoss() input torch.randn(3, 5, requires_gradTrue) target torch.empty(3, dtypetorch.long).random_(5) output loss(input, target) output.backward(…
阅读更多...
最新文章

Copyright @ 2022~2023