微信小程序改钉钉小程序

1,127 阅读4分钟

先贴一下antmove官网 ant-move.github.io/ ,有需要的可以自己看。
微信转钉钉小程序的话最好通过配置文件的方式来转。

步骤

1、安装antmove

npm install antmove -g
或
yarn global add antmove

2、写配置文件

在小程序目录下创建 antmove.config.js
环境最好是 development,因为可能需要进行二次开发, 如果是production就是压缩过的, 就不好修改了。 而且默认就是production所以一定要手动设置!

module.exports = {
  "env": "development",
  "platform": "dd",
  "component2": true,
  "scope": true,
  "type": "wx-alipay",
  "component": false,
  "error": false,
  "empty": false,
  "isReport": false,
  "useRuntimeLog": false,
  "watch": false,
  "ignoreNpm": true,
  "useCompileLog": true,
  "autoOpenReport": true,
  "input": "./",          // 微信小程序目录
  "output": "..\dd-miniprogram",     // 输出钉钉小程序目录, 注意!! 千万不要在同级目录下输出, 不然可能会出现编译之后再编译  编译过的代码
  "hooks": {
    "appJson": function plugin(appJson) {
      return appJson
    }
  },
  "babel": {
    "presets": [],
    "plugins": function() {
      return []
    }
  },
  "plugins": [],
}

3、执行编译

在控制台直接执行antmove命令即可

antmove

4、等待编译结束

编译完后会生成一份报告并自动打开, 大部分都是可以编译过的。 有些部分转换的是因为钉钉没有提供(支持)相应的设置(方法)。 点击可以查看解决方案, 但是其实没什么用,还是得自己看文档改。这个时候其实就算是编译完成了, 剩下要做的就是钉钉端的适配。

5、 有点重要的一件事!!

如果是用框架(uniapp或其他)写的微信小程序或者typescript写的, 一定要在编译后生成的微信小程序目录下再使用antmove进行编译。 用ts的话就把ts编译成js再用antmove。

遇到的问题及解决方案!!

1、 Uncaught ReferenceError: dd is not defined

这个是因为你没有用钉钉端打开, 只需要在左上角的端管理中选择钉钉即可。 或者在一开始打开应用的时候就注意记得选择钉钉端。

2、 does not have a method "antmoveTap" to handle event "tap"

找不到方法执行, 这个是因为在微信小程序中方法是写在methods中的, 只需要把methods中的方法都移出来即可。antmove会把bindtap编译成 onTap='antmoveAction' data-antmove-tap='functionName', 所以js内的 antmoveAction方法不要删除(其实他也有一句不要删除的注释)。

3、 Error: page *** not found!

很抱歉,您访问的页面不存在。
即使你在pages里配置了,他也找不到, 这是因为在钉钉小程序中如果是页面, 一定要用 Page({}) 但是在微信小程序中这是可行的, 所以检查一下你是否用了其他的, 比如 Component({}) 等等, antmove并不会把Component编译成Page

4、关于weui

如果你在微信小程序中使用了weui, 不管是用 useExtendedLib 还是用npm方式引入的, 编译之后都会报错。此时需要手动引入weui。

4.1 从npm上下载

weui的aliapp版本,貌似也是用antmove编译过的。

npm install weui-aliapp

4.2 从node_modules中拷贝出来

疑惑为什么要拷贝出来?请看支付宝小程序的框架概述 opendocs.alipay.com/mini/006kyi…
原话是这么说的:
注意: 由于node_modules 里第三方模块代码不会经过转换器,为了确保各个终端兼容,node_modules 下的代码需要转成 ES5 格式再引用,模块格式推荐使用 ES2015 的 import/export。同时,浏览器相关 web 能力同样无法使用。
如果不拷贝出来的话,编译的时候就会报错, 提示一些es6的新语法不能用。

4.3 修改weiui组件引入的路径

事实上antmove会把weui编译成weui-aliapp的版本,而且路径也会改变

"mp-checkbox": "weui-aliapp/dist/components/checkbox/checkbox"

但是这样的路径是直接引用npm里的包, 是不对的,我们需要把他改成相对路径, 当然根据你的文件位置来改哈, 以下只是参考。

"mp-checkbox": "../../weui-aliapp/dist/components/checkbox/checkbox"

4.3 一个可能的骚操作

如果要用其他的npm包, 应该也需要这么操作吧, 所以如果可以的话, 在装完npm包之后, 把node_modules的文件名改掉, 然后在引入包的时候改成相对路径, 这样或许就可以了。 当然这个方法我也没试过, 觉得骚的可以自己试试, 我并没有深入研究支付宝或者钉钉他们是否是根据node_modules的文件夹名称来识别的。

5、关于编译后有些多余的文件

有些文件不会被antmove编译, 但是也会原封不动的被拷贝过来,所以在生成的目录下会有一些原本有用在钉钉段无用的文件,可留可删, 无所谓的,反正钉钉端又用不到, 也不参与编译。