您的当前位置：首页>全部文章>文章详情

【Html】H5跳转支付宝小程序的两种方式

CrazyPanda发表于：2024-03-28 20:25:36浏览：358次TAG：

1. 第一种方式

<body>

    <button onclick="goMap()">去支付宝小程序</button>

    <!-- 第一种方式 -->
    <script>
        /**
        *@appId 跳转目标appid
        *@page 指定页面路径
        */
        let queryEncode = encodeURIComponent({id:123123})
        let url=`alipays://platformapi/startapp?appId=xxxxxx你自己的appid&page=pages/index&query=${queryEncode}`

        function goMap() {
            window.location.href = url  
        }

    </script>

</body>

网上还有用下面这种方式的，但是我没试出来

<body>

    <button onclick="goMap()">去支付宝小程序</button>

    <!-- 第一种方式 -->
    <script>
        /**
        *@appId 跳转目标appid
        *@page 指定页面路径
        */
        let queryEncode = encodeURIComponent({id:123123})
        let params =`alipays://platformapi/startapp?appId=xxxxxx你自己的appid&page=pages/index&query=${queryEncode}`

        function goMap() {
            window.location.href = `https://ds.alipay.com/?scheme=${params}`  
        }

    </script>

</body>

同样的这种方式还可以打开支付宝生活号网页，只是换成appid换成网页应用appid，page参数换成url参数，url对应的是自己页面的链接

<body>

    <button onclick="goMap()">去支付宝网页</button>

    <!-- 第一种方式 -->
    <script>
        /**
        *@appId 跳转目标appid
        *@url 指定页面链接
        */
        let page_url= encodeURIComponent('https://xxx.xxx.com?id=123123')
        let url =`alipays://platformapi/startapp?appId=xxxxxx你自己的网页应用appid&url=` + page_url

        function goMap() {
            window.location.href = url  
        }

    </script>

</body>

2. 第二种方式

<body>

    <button onclick="goMap()">去支付宝宝小程序</button>

    <!-- 第二种方式 引入相关SDK-->
    <script type="text/javascript" src="https://appx/web-view.min.js"></script>
    <script>
        /**
       *@url 指定页面路径
       */
        function goMap() {
            my.navigateTo({ url: '/pages/main-page/index' });
        }

    </script>

</body>

第二种方法我没有试，大家有兴趣可以自己试下。

猜你喜欢

: 【前端】JavaScript判断数组对象是否含有某个值的方法（6种）; 【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法（6种）知识回调场景复现实现方式（6种）利用循环遍历数组元素利用some，filter方法利用array.indexOf方法利用array.includes方法利用array.find方法利用set中has方法本期小结知识回调文章内容文章链接vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】https://blog.csdn.net/XSL_HR/arti; 发表于：2024-02-23 浏览：350 TAG：

: 【前端】微信小程序推送订阅消息; 业务需要，商城类小程序，要在用户下单支付成功后，推送消息通知用户。首先想到的是小程序模板消息，微信公众号模板消息已经用过很多了，小程序模板消息确是第一次做。小程序模板消息     参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html 小程序模板消息在2020年已经改版了，现在推送模板消息都会推送到服务通知里面，; 发表于：2024-03-21 浏览：353 TAG：

: 【Html】H5跳转支付宝小程序的两种方式; H5跳转支付宝小程序的两种方式，第一种方式还可以打开支付宝生活号网页，只是换成appid换成网页应用appid，page参数换成url参数，url对应的是自己页面的链接; 发表于：2024-03-28 浏览：360 TAG：

: 【前端】Nodejs基于Windows安装教程; 一、安装环境在进行 Node.js 环境的安装之前，您需要先安装并配置好以下环境：操作系统：Windows命令行工具：Node.js 是通过命令行工具进行使用和管理的，因此您需要选择一个适合您的命令行工具。在 Windows 上，您可以选择使用命令提示符（cmd）或 PowerShell。文本编辑器：Node.js 应用程序通常是使用文本编辑器编写的，因此您需要选择一个适合您的文本编辑器。常用的文本编辑器包括 Visual Studio Code、Sublime Text、Atom 等。网络连接; 发表于：2024-07-15 浏览：234 TAG：

: 【前端】PHP开发者的Vue与React入门指南; PHP是一种常用的服务器端脚本语言，用于开发动态网页和网站。许多PHP开发者经常需要学习前端框架来提升他们的技能，并且Vue.js和React.js是两个当前非常热门的前端框架。本文将为PHP开发者提供一份Vue.js和React.js的入门指南，带有具体的代码示例，帮助他们快速了解这两个框架的基本概念和用法。1. Vue.js入门指南Vue.js是一款轻量级的JavaScript框架，用于构建交互式的用户界面。下面是一个简单的Vue.js示例，展示了如何创建一个基本的Vue组件并进行数据绑定:; 发表于：2024-03-16 浏览：343 TAG：

: 【前端】如何使用Redis和TypeScript开发高性能计算功能; 如何使用Redis和TypeScript开发高性能计算功能概述：Redis是一个开源的内存数据结构存储系统，具有高性能和可扩展性的特点。TypeScript是JavaScript的超集，提供了类型系统和更好的开发工具支持。结合Redis和TypeScript，我们可以开发出高效的计算功能来处理大数据集，并充分利用Redis的内存存储和计算能力。本文将介绍如何利用Redis和TypeScript开发高性能计算功能，包括数据存储、数据处理和结果缓存等方面。我们将使用Redis的常用数据结构和命令，并; 发表于：2024-04-06 浏览：361 TAG：

: 【前端】全栈软件开发工程师需要具备哪些技能; 全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能，以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈：一、前端技能：1.HTML/CSS/JavaScript:构建网页的基本技能，负责页面结构、样式和交互。2.前端框架：掌握至少一种前端框架，如 React.js、Vue.js、Angular，用于构建可维护的、高性能的前端应用。3.前端工具：使用构建工具（Webpack、Parcel）、包管理工具（npm、Yarn）、代码规范工具（ESLint、Prett; 发表于：2023-12-07 浏览：344 TAG：

: 【前端】PHP、Vue和React：如何选择最适合的前端框架？; PHP、Vue和React：如何选择最适合的前端框架？随着互联网技术的不断发展，前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架，每一种都具有其独特的特点和优势。在选择使用哪种前端框架时，开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使用场景，帮助读者更好地选择最适合自己的前端框架。PHPPHP作为一种服务器端脚本语言，被广泛应用于Web开发中。尽管PHP主要用于后端开发，; 发表于：2024-03-16 浏览：378 TAG：

: 【前端】vite和webpack的区别是什么; 区别：1、webpack服务器启动速度比vite慢；由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。2、vite热更新比webpack快；vite在hrm方面，当某个模块内容改变时，让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖，而webpack基于node。4、vite的生态不及webpack，加载器、插件不够丰富。本教程操作环境：windows7系统、vue3版，DELL G3电脑。写在开头最近的vite比较火，而且发布了2.0版本，v; 发表于：2024-04-18 浏览：359 TAG：

: 【前端】html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图; echarts的3D地图实在太丑了，还一堆bug使用阿里的Antv可视化库L7，实现3D地图，底图是mapbox 参考示例：https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap如果不需要底图样式，可把Scene的style设置为blank 直接上代码了，vue的就不说了，项目是html的mapbox依赖<script src='https://api.mapbox.com/mapbox-gl-js/v2.; 发表于：2024-01-18 浏览：448 TAG：

栏目分类全部>

推荐文章

