如何将支付宝小程序迁移至微信/FinClip运行

这篇具有很好参考价值的文章主要介绍了如何将支付宝小程序迁移至微信/FinClip运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

许多小程序开发者都会遇到这样一个困扰,自己已经在微信,支付宝等不同环境中开发了对应的小程序代码,但在不同平台中的小程序语法并不一致。

本篇文章将通过手把手入门的方式,快速了解「如何使用第三方工具互相转换小程序代码进行?」相关问题。

第一步:创建支付宝小程序

顾名思义,在本文中我们会以「支付宝小程序」作为示例,来讲解如何进行小程序格式的相关转换。
支付宝小程序转微信小程序,技术飞起来,小程序,微信,微信小程序

首先,需要启动支付宝小程序开发工具,并且在其中分别选择「小程序>支付宝小程序>空白模板」,随后我们就会得到一个支付宝格式的小程序。
支付宝小程序转微信小程序,技术飞起来,小程序,微信,微信小程序

当支付宝小程序创建完毕后,我们可以在资源管理器中看到上图所示的项目机构。熟悉小程序的朋友不难发现,不论是哪一家的小程序,基本的项目结构都是比较类似的。我们顺便复习一下主要的项目结构:

  • js ⻚⾯逻辑
  • axml ⻚⾯结构
  • acss ⻚⾯样式表
  • json ⻚⾯配置
  • app.js 注册⼩程序、⼩程序⽣命周期、⼩程序全局变量
  • app.json ⼩程序全局设置:⻚⾯配置、window配置、tabBar配 置、分包配置等
  • app.acss ⼩程序全局样式表
  • mini.project.json ⼩程序项⽬配置

第二步:了解 Antmove

Antmove 起源于高德地图(自 2021年 Q4起,高德归属于阿里本地生活业务线)的一个内部项目。

在高德小程序平台建立之初,有许多的企业合作商希望将他们的小程序应用上线到高德小程序平台(支付宝小程序平台),但他们已经有了自己的微信小程序应用,再开发一套高德的(或是支付宝的)对企业来说是一种资源的负担。

基于这个需求,内部实现了一个微信小程序到高德小程序的转换工具,通过这个工具帮助这些企业用户快速的将他们的应用上线到高德上。目前已经有上百款小程序借助 Antmove 完成了小程序的格式迁移与转化工作。

支付宝小程序转微信小程序,技术飞起来,小程序,微信,微信小程序
Antmove - 小程序转换器

由于不同小程序平台中始终存在的一些无法抹平的差异,和针对特定平台可能存在的不同产品能力,Antmove 已经实现了跨端语法与条件编译的能力尽可能帮助开发者降低不同代码维护的成本。但 Antmove 并不能帮助用户实现 100% 的代码迁移,你可以点击这里查看 Antmove 对微信与支付宝小程序的转化支持度。

第三步:在 VS Code 中进行编译

为了使用 Antmove,我们这次选择通过在 VS Code 中安装对应的拓展的方式,实现小程序代码的一键转化编译。

支付宝小程序转微信小程序,技术飞起来,小程序,微信,微信小程序

首先需要在 VS Code 扩展中搜索 Antmove 下载安装 Antmove vscode 转换插件。随后打开对应的小程序项目,并输入对应的命令即可。

  • 在 macOS 中打开命令面板的方式是:Command + Shift + P
  • 在 Windows 中打开命令面板的方式是:Ctrl + Shift +P

支付宝小程序转微信小程序,技术飞起来,小程序,微信,微信小程序

我们可以在新打开的命令窗口中运行 Antmove: Run antmove alipay-wx 命令,实现支付宝小程序转换微信小程序的转换。

由于 FinClip 对于微信小程序语法的高度兼容,也就意味着通过转化的小程序代码可以直接在 FinClip 环境中使用。

支付宝小程序转微信小程序,技术飞起来,小程序,微信,微信小程序

运行如上命令后会给出一个弹窗,选择转换后生成代码存储目录,随后代码转换完成。我们就可以通过 FinClip IDE 打开对应的项目内容了。

附录:也可以试试使用命令行编译

当然,如果你不想使用 VS Code,也可以通过 npm 或 yarn 的形式进行开发。通过 npm 或 yarn 的形式不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

全局安装

$ npm install antmove -g

$ yarn global add antmove

本地安装

$ npm install antmove --save

$ yarn add antmove

命令行使用

npm i -g antmove

通过 npm 或 yarn 全局安装才能使用如下命令行

antmove wx-alipay(使用前请将终端切换到需转换编译的微信小程序项目路径)
antmove wx-alipay -i ./ -o ./dist/alipay-app
antmove - 该命令更加灵活,可配置输出输出目录/编译模式等
antmove wx-alipay -i ./wechat-mini/project -o ./dist/alipay-mini/project --env development
如上的命令表示将 ./wechat-mini/project 微信小程序项目转换为支付宝小程序项目,转换到 ./dist/alipay-mini/project 目录 如果你不想输入参数,可以体验交互式的命令方式,执行 antmove 即可。

配置参数

--input,-i

可选,编译源码目录,如果不传则是当前目录
--output,-o

必传,编译输出目录
--env,-e

可选(development/production),编译模式,生产模式代码会压缩,无编译日志及运行时日志
--watch,-w

可选(true/默认false),值为true时开启监听模式,实时监听输入路径文件变化

如果你在使用 Antmove 过程中遇到了任何困难,或者在使用 FinClip 的过程中遇到了疑惑,也可以查看 FinClip 开发者帮助社区了解更多信息。文章来源地址https://www.toymoban.com/news/detail-673804.html

到了这里,关于如何将支付宝小程序迁移至微信/FinClip运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp兼容微信小程序和支付宝小程序遇到的坑

    改为v-if。 App端和H5端支持 v-html ,微信小程序会被转为 rich-text,其他端不支持 v-html。 解决方法:去插件市场找一个支持跨端的富文本组件。 兼容微信小程序和支付宝小程序  pages.json: 给支付宝的导航栏设置 透明 agent页面: 支付宝加上 my.setNavigationBar 设置标题文字即可,

    2024年02月15日
    浏览(84)
  • uni app Signalr 支持 微信小程序和支付宝小程序

    使用方法

    2024年02月16日
    浏览(46)
  • 如何获取支付宝小程序的appid

    最近在复盘支付宝小程序,之前遇到个问题:支付宝要求小程序内容要丰富,但我们一期内容单薄,想要自己开发功能排期上不允许,于是就想从我方小程序跳转到他方小程序。这时候就要获取他方小程序的appid进行跳转。 这方法也是逛社区学来的,现在再复盘巩固下。 以【

    2024年02月11日
    浏览(54)
  • 小成本搏大流量:微信/支付宝小程序搜索排名优化

    随着移动互联网的快速发展,小程序已成为企业和个人开发者重要的流量入口和业务承载平台。而小程序搜索排名则是影响小程序曝光量、用户获取及业务转化的关键因素。小柚在本文和大家探讨如何制定有效的优化方案,提升小程序在搜索结果中的排名。 首先跟我一起来了

    2024年04月25日
    浏览(34)
  • HBuilder X运行微信小程序项目至微信开发者工具失败

    在HBuilder X中运行微信小程序项目时,此步于以下过程,无法进一步打开界面   解决方案: 导入项目即可,但是需要注意导入项目的路径信息。 需要是当前项目unpackage==dist==dev==mp-weixin下面的文件,微信开发者工具才能识别。    

    2024年02月11日
    浏览(65)
  • uniapp开发APP跳转微信小程序和支付宝小程序(安卓版)

    开发APP时需要支付时跳转微信或者支付宝去支付,但是因为银行合作问题不能直接跳转,所以选择跳转到小程序页面进行支付,微信小程序和支付宝小程序写法不同 APP跳转微信小程序 (需要manifest.json中APP模块配置Share中微信分享保持开启) 微信小程序原始id在微信开放平台查

    2024年02月06日
    浏览(55)
  • uniapp 之 微信小程序、支付宝小程序 对于自定义导航栏的不同

    目录 前言  微信小程序 代码  支付宝小程序 首页配置文件 二级菜单页面  配置 总结  不同 相同  小程序都是 uni-app 写的 不是原生 pages.json文件中配置 重点: \\\"navigationStyle\\\": \\\"custom\\\",  // 导航栏样式  首页 vue文件 template  script  备注:  height:是胶囊的高度 首页配置文件

    2024年02月15日
    浏览(40)
  • 一码多端,一个二维码适用微信小程序,支付宝小程序,h5页面

    最近公司研发自己的一个小程序,因为是线下树牌,涉及到扫码这个问题,但是扫码又分三个端,浏览器扫码,微信扫一扫,支付宝扫码,做这个需求也是遇到了很多坑,在此记录一下 1.扫码进入微信小程序 首先登录微信公众平台,链接 https://mp.weixin.qq.com/  原本此处会有一

    2024年02月08日
    浏览(73)
  • uniapp支付宝小程序如何在开发者工具启动

    小程序开发者工具安装地址 在uniapp项目根目录下的manifest.json中找到支付宝小程序配置,输入在支付宝中获取的appid 选择HBuilder导航栏的工具-设置-运行配置-支付宝小程序开发者工具路径-选择到小程序开发者工具.exe 运行-运行到小程序模拟器-支付宝小程序开发者工具 运行成功

    2024年02月11日
    浏览(44)
  • 最新demo版 | 如何0-1开发支付宝小程序之小程序如何上线(四)

    支付宝小程序开发 0-1 系列前三期详见: 最新demo版|如何0-1开发支付宝小程序之前期准备篇(一)  最新demo版 | 如何0-1开发支付宝小程序之如何调试小程序(二) 最新demo版 | 如何0-1开发支付宝小程序之小程序页面功能介绍(三) 那么,今天让我们一起探索一下小程序开发

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包