SERVICE PHONE

  • 首页
  • 富达头条
  • 热门新闻
  • 热门新闻

    热门新闻

    当前位置:富达娱乐 > 热门新闻 >

    微信幼程序转百度、支付宝、快行使体验

    发布时间:2021-09-14点击量:

    微信幼程序展现后,多多公司平台也纷纷推出了自家的幼程序(快行使),比如百度智能幼程序、支付宝幼程序、字节跳动幼程序以及国内手机厂商的快行使等等。每家幼程序(快行使)平台都有各自的流量入口,开发者多上传一个平台,就多一份流量来源。

    原文首发于vivo 快行使官方博客 | 微信幼程序转百度、支付宝、快行使体验。

    各平台幼程序语法专门相近,业界已经有很多幼程序跨端解决方案。一栽手段是从已有的微信幼程序起程,行使转换工具(比如 qa-adapter, wx2swan, wx2my, antmove)转换成现在的幼程序的代码。另一栽手段是行使幼程序多端框架(比如 taro, uni-app, mpvue)开发。

    下面介绍第一栽手段,如何基于已有的微信幼程序,行使转换工具生成多端代码。并以 IQOO 社区幼程序为例,体验下各平台的转换流程。

    微信 => 百度

    百度幼程序官方文档上挑供了转换工具(搬家工具)

    声援两栽转换形态: npm 命令走 和 开发工具

    npm 转换安置 npm install -g wx2swan转换 wx2swan wxmp wxmp 是微信幼程序的现在录在百度开发者工具中掀开,查望 log 手动修改不同点

    输出现在录会自动增补 _swan 后缀

    终端中会同步打印 log 新闻:

    同时,转换的代码中会生成 log 文件。包含三栽 log:

    log├── error.json   (没法转换过来的,现在不声援的,比如百度暂未声援的API,二次开发时必要修改的)├── info.json    (搬家工具转换操作的log)└── warning.json (按照经验,有能够引首报错的,二次开发时候必要重点仔细的)

    error.json 例子:

    [{  "type": "delete api",  "file": "/Users/dev/packageAPI/pages/bluetooth/bluetooth.js",  "row": 50,  "column": 10,  "before": "wx.onBluetoothAdapterStateChange(function (res) {\n  if (res && res.available) {\n    this.startBluetoothDevicesDiscovery();\n  }\n})",  "after": "",  "message": "wx.onBluetoothAdapterStateChange:异国相对答的函数"}]
    开发工具转换转换终局

    尝试了几个项现在,都能转成百度幼程序,但清淡无法平常运走,必要手动修改几处壅塞的题目之后才能去下进走。

    遇到的几个题目:

    不声援 require('utils.js') 这栽相对路径的写法,必要手动改成 require('./utils.js')不声援 require 变量,必要避免不声援 plugin, 必要将其从 usingComponents 中移除,否则编译报错不声援微信幼程序的 miniprogram_npm, 必要手动修改 require 的路径转换工具会直接删除不声援的 API, 必要属意转换通知

    解决完壅塞题目后的成绩对比:

    微信 => 支付宝

    转换工具:

    wx2my https://developer.aliyun.com/article/699595Antmove https://ant-move.github.io/guide/#命令行安装wx2my

    wx2my 声援 npm 命令走和 vscode 插件形态。

    npm 命令走npm i -g wx2mywx2my wxmp 会在 wxmp 所在现在录生成 wxmp_output(wxmp_output 下有转换通知 todo.html)在支付宝幼程序开发工具中掀开预览项现在

    转换过程的 log 较少:

    容易展现“转换战败”的挑示,不过照样有转换代码生成。

    不声援的 api 只会在通知中表现,不会擅自删除代码。

    生成的 todo.html 新闻较为雄厚,还能够跳转到文档。

    vscode 插件形态搜索安置插件 wx2my掀开 vscode 命令面板输入 wx2my 或者直接在文件栏 app.json 右键选择 wx2my转换终局

    挑示转换战败,用 IDE 掀开转换子女码,无法平常展现页面。

    Antmove

    Antmove声援多栽幼程序间的相互转换。

    npm 命令走形态:npm i -g antmoveantmove wx-alipay -i IQOO_wx -o IQOO_my --env development -i 指定微信路径, -o 指定输出路径,--env development 参数可生成转换通知在支付宝幼程序开发工具中掀开预览项现在

    转换通知表现转换得很成功。

    vscode 插件形态搜索安置插件 Antmove掀开 vscode 命令面板输入 Antmove: Run antmove wx-alipay选择输出路径转换终局

    固然转换通知表现十足转换,但是其实在 IDE 中无法平常预览。编译中有壅塞性的报错。由于微信幼程序的 plugin 在支付宝中是无法行使的,导致编译报错。

    一时删除引用的 plugin 后,页面能够大致展现出来:

    微信 => 快行使(兼容版)

    微信幼程序转换快行使(兼容版)也声援两栽形态转换

    npm 命令走IDE 插件

    详细教程:微信幼程序转快行使工具

    npm 命令走npm i -g qa-adapteradt [sourceDir] [destDir?optional]会自动弹出转换通知 report.html在快行使开发工具中掀开预览IDE 插件快行使中搜索安置插件 hap-transformer命令面板,输入 hap:transfer wechat miniprogram into Quick App输入源码路径和输出路径,点击“转换”转换成绩

    在 IDE 中掀开相通遇到了 plugin 报错题目,手动把 plugin 删除后就能够平常预览页面:

    总结现在市面上的幼程序语法、框架、组件、接口都专门相近,行使转换工具,能够专门迅速地实现幼程序多端开发、上线。代码转换基本是分分钟的事各转换工具大差不差,大都声援 npm 命令走的模式,输入命令一键转换行使转换工具生成的现在的代码,和正本的代码组织相反,具有专门益的可读性,方便对现在的平台做针对性的修改现有的转换工具还异国十足遮盖微信的特性,有些微信专有的功能(比如 plugin,miniprogram_npm 等),异国很益的转换或者挑示,必要人造手动修改微信幼程序转快行使工具 挑供了另表一栽迅速接入快行使的手段,而无需学习新语法各幼程序(快行使)平台不同在所不免(比如百度不声援 require('utils.js') 这栽相对路径的写法、微信的 plugin 不被其他平台声援),于是倘若要考虑多端,必要尽量采用比较通用的特性和写法,缩短转换后的修改做事