小程序开发

思捷智联 > 小程序开发 > 微信转百度小程序工具

微信转百度小程序工具

编辑时间:09-08 18:56 浏览次数:4

现在前端对移动端和小程序的开发热情很高,各种多端解决方案百花齐放。例如很火的Taro和mpvue,还有后来居上的uni-app等等。

因公司业务需要,本人最近也在忙活各种小程序,例如:之前开发的小程序的业务逻辑需要在其他平台复用,我们不可能把业务再重写一遍,所以需要研究下小程序之间的差异和转换,因此花了不少精力,有点心得体会,写点东西和大家交流交流。

这篇总结文章主要是对转换工具 github.com/xujie-phper… 的介绍,想进一步研究的同学可以带着问题看看代码,这样你就会更疑惑了~~

小程序的比较

设计图

流程图

架构图

生成项目基本文件目录

使用 recursive-copy 库,完成文件的整体拷贝,替换文件名后缀,例:.wxml===> .swan

转换json文件,去掉组件驼峰

1、找到josn文件里“usingComponents“包含的值,将组件引用中的驼峰改为kebabCase 2、若包含抽象节点“componentGenerics“字段,手百中不支持,存放在错误日志中

:warning:将修改后的组件名的映射关系记录在全局的contextStore中,属性值为“renamedComponents“,视图层中转换中需要使用新的组件名

逻辑层转换

借助babel的三剑客: @babel/parser 、 @babel/traverse 、 @babel/generator 、 @babel/types ,

js的转换规则较复杂,会大量依赖 babel/types 做类型判断,并借助在线AST工具辅助测试。

想学习babel,并在实际项目中使用的同学可以先看看这篇babel的 介绍文档 ,边写边查,巩固学习

+--------+                     +----------+Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output
          +--------+          |          +----------+
                              X
                              |
                       +--------------+
                       | Transformers |
                       +--------------+复制代码
  1. 名称不同,功能相同的api,需要做映射,例: navigateToMiniProgram ===> navigateToSmartProgram

  2. 自定义组件的处理: 百度小程序构造器不支持的属性: moved,relations, observers 内置behaviors的处理:

    wx://form-field` ===>  `swan://form-field`
    `wx://component-export` ===>  `swan://component-export`
    复制代码

    relations 中若有使用link回调函数,则对应到百度的attached生命周期中执行 配套使用对应的 getRelationNodes 。

    对应百度的selectComponent方法,为解决页面多组件实例的问题,引入swanId做为唯一标识,我们会为有依赖关系的组件添加swanId属性,同一组的父子组件共用一个swanId。

    所有的父子组件的依赖关系存在在全局的contextStore中,供视图层添加swanId时使用

  3. 独有api无法自动匹配,存放到转换日志中,需手动删除或替换对应逻辑

  4. 关键词替换:wx ===> swan

视图层转换

视图层的转换也是使用的AST,借助 stricter-htmlparser2 将html转化为节点树,遍历,替换指定节点,最后生成新的html结构。

<view wx:='aaa'>test</view>"parseHtml": {        "type": "tag",        "name": "view",        "attribs": {            "wx:": "aaa"
        },        "children": [
            {                "data": "test",                "type": "text"
            }
        ],        "singleQuoteAttribs": {},        "selfclose": false
    }
复制代码

循环和条件判断

微信:

//循环<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}</view>//条件<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view wx:else="{{view == 'MINA'}}"> MINA </view>复制代码

百度

//循环<view>
    <view s-for="p,index in persons">
        {{index}}: {{p.name}}
    </view>
</view>
//条件
<view s-if="is4G">4G</view>
<view s-elif="isWifi">Wifi</view>
<view s-else>Other</view>
复制代码

转换逻辑为:

  1. 将wx:替换为s-,例:wx:if =====> s-if

  2. 去掉插值语法(花括号)

  3. wx:for, wx:for-index,wx:for-item合并为s-for="p,index in persons"

模版的转换

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view></template>//**微信**:<template is="msgItem" data="{{...item}}"/>//**百度**:<template is="msg-item" data="{{ {...item} }}" />复制代码

转换逻辑为:

  1. data属性外增加一个大括号

  2. 名称改为小写字母与中划线“-”的组合

for 和 if 作用于同一标签

微信可以使用,手百禁止, 编译会报错

注意: s-if 与 s-for 不可在同一标签下同时使用。

将微信中的 if 标签,借助虚拟组件block,分成父子组件。 例:

<view wx:for="{{list}}" wx:if="{{item}}">test</view>复制代码

转化为

<view s-for="item, index in list">
     <block s-if="item">test</block>
 </view>复制代码

双向绑定

//**微信**:<scroll-view scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view></scroll-view>//**百度**:<scroll-view scroll-into-view="{=toView=}" scroll-top="{=scrollTop=}">
    <view id="green" class="scroll-view-item bc_green"></view></scroll-view>复制代码

转换逻辑为:

将插值语法变换为{= * =}

wxs语法

微信使用wxs来进行数据处理,定义共用函数段;对应的百度的filter语法

//**微信**:<wxs module="test">    var some_msg = "hello world";
    module.exports = {
        setPosition: function (position) {            return 'transform: translateX(' + position.pageX + 'px);';
        }
    }
</wxs>//**百度**:<filter module="test">    var some_msg = "hello world";
    export default {
        setPosition: function (position) {            return 'transform: translateX(' + position.pageX + 'px);';
        }
    }
</filter>
复制代码

转换逻辑为:

将module.exports替换为export default

注:百度的filter中不支持导出变量,但是微信是支持的,所有这部分需要开发者手动处理下逻辑

样式文件的转换

小程序间的样式完全一样,只是文件后缀名不同,只需要替换引入的样式文件后缀wxss ===> css

例:

@import "header.wxss";
复制代码

转化为:

@import "header.css";
复制代码

转换日志

转换日志分为'info'、'warning'、'error'三种类型,转换过程中产生的日志信息都存放在统一logStore中,结束时会借助 mkdirp 和 fs 能力把logStore存储的所有信息,写入到日志文件中。

注:小程序独有能力和私有能力,无法转化,需要手动进行逻辑替换或删除。转换中不涉及项目依赖文件的替换,例: project.swan.json 和 pkginfo.json ,可以使用百度开发者工具自动生成

后记

以上所讨论的都是最近写的一个 微信转百度小程序工具 的详细介绍和具体实现,对小程序和babel感兴趣的可以去看看代码,应该会有所收获,并能发现其中还存在的一些问题,欢迎讨论,一起学习。

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章,欢迎咨询免费获取思维导图!
感受专业服务,从来电咨询开始
15821967367158-2196-7367
no cache
Processed in 0.682029 Second.