微信小程序插件开发

小程序插件

以目录结构为主简单介绍,注意,doc miniprogram plugin 名称均不可更改。

doc

该目录下存放的是小程序插件必备的说明文档“README.md”以及文档所需的图片,注意该目录下的README.md在微信小程序开发工具中需要单独提交。

miniprogram

小程序插件开发的主体。

小程序插件必须依赖一个主体(小程序),因此在开发过程中会需要一个小程序,这个目录下的小程序就是模拟之后调用者的小程序。

不必担心提交的时候携带上这个目录会影响插件,因为微信官方审核的时候也是需要通过开发者在当前目录下写的小程序调用小程序插件来进行判断是否符合规范等。

plugin

小程序插件开发的真正区域。

api

小程序插件对外可调用的api,可以在miniprogram目录下找到调用插件的地方结合起来理解。

一般来说这里可以不用动。

pages

小程序插件的页面,虽然可以用多个,但是在吾来对话机器人插件中用不着,因此就只有一个chat页面,里面有小程序插件本体的HTML、CSS、JS。

chat

按照生命周期了解功能。

  1. 首先进入插件后就触发 ready 这个生命周期钩子;
    在这个生命周期内进行了一系列操作:

    • 把调用方传递参数本地化;
    • 判断是否已经登录,如果调用方在吾来后台把调用者的小程序的appId和appSecret传递给我们了,那么如果调用方传递的参数username: '',那么我们就可以帮忙做登录,如果调用方自己有能力,就可以自己登录完毕,把登录完毕换回的openid存在username字段中传递给插件,详情请阅读doc下的README.md;
    • 登陆完毕之后调用startWork开始插件的基础设置——是否展示历史消息、头像是什么、气泡什么样……详情请参见后端开放平台接口

    登录操作和启动操作都完成后就可以开始工作了。

components

页面要调用的组件,小程序调用插件的方法可以查阅官方文档

工具类: module-*
消息类型: msg-*
用户消息: user-msg
机器人回复: bot-msg
提示消息组件: notice-msg

代码内部做了详细的注释,阅读起来应该没有很大的问题。

static

一些静态文件,小图标等,大的图片考虑上传阿里云;

utils

constant.js

存放了一些常量:

  • 接口的path
  • 项目内常用的一些常量(看见大写的变量不懂的话来这里看看)

env.js

按照注释做,用于区分测试环境还是灰度正式环境,影响到的是后端接口的host

promisify.js

封装了promise方法,想要调用Promise请求的时候可以考虑从这里引用。

request.js

封装了POST和GET方法

util.js

封装了一些项目中通用的方法

watch.js

ohhhhh,这个文件没啥用。


以上就是对于小程序插件的介绍,相关配置project.config.json plugin.json app.json可以通过官方文档对照学习使用,很easy的。

如何应对定制化

定制化需要考虑功能是否是必须从基础版本中脱离出来的,如果是,那么继续。

需要一个新的插件

这意味着需要一份新鲜的代码
吾来小程序插件Gitlab地址
进入并且Fork到新的仓库中,仍然会进行开发。

代码有了,还需要一个微信后台账号,找到负责的产品去新建就完了。

新建完毕之后按照正常小程序插件开发流程去配置,下载一个‘微信小程序开发工具’进行本地的开发即可。

如果需要更新

Fork的版本如果想要更新到通用版的某个更加新的版本,可以通过新建Merge Request来解决。

定制化

保乐力加定制化

需求:

  1. 可以在插件内部点击消息中的链接跳转到调用方小程序内部的某个页面;
  2. 可以在插件内部点击消息中的链接跳转到其他的小程序的某个页面;

跳转方案:

小程序插件开发有诸多限制,小程序插件的wx对象和调用者的wx(后面用WX来表示)对象是不同的,在官方文档中插件内部的跳转的api虽然不被限制,但是实际的效果却是只能在小程序插件内部的页面中切换跳转。

因此采用了HACK的方式,在小程序插件内部获取到了调用方小程序的 WX 对象。

1
2
3
4
5
6
7
8
<!-- 调用方的js文件 -->
plugin.init(wulAiSDK, wx, pubkey, userInfo);

<!-- 小程序插件内部调用WX -->
<!-- 需求1 -->
WX.navigateTo()
<!-- 需求2 -->
WX.navigateToMiniProgram()

触发跳转方案

在已有的消息类型,如CUSTOM消息类型中的content字段中存储上跳转所需的appId pathUrl等所需信息,当有这个类型的消息到达时,在对应的 “/components/msg-custom”(新建)组件中去处理content字段中携带的信息,并且以链接的形式呈现在消息卡片中,当用户点击的时候触发方法进行跳转。

作者: 张熠
文章链接: https://crazyoctopusdan.github.io/2019/07/16/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.