第二十六期：基于 Taro 的分销小程序关键技术点分析及实践

2022-07-15 10:08:29 浏览数 (1)

Tip

域名到期，回复中的下载地址暂时无法访问，这几天会找时间修复这个问题，同时上传更多的书籍供大家下载阅读。

动机

基于 Taro 进行小程序的开发已经过了很长时间，其中遇到了不少问题。不同的项目之间有时候会遇到类似的需求，比如小程序的登录,分享以及生成海报图等常见的功能。

一个问题是，不同的项目在遇到相同的问题时，同样的业务逻辑需要重新写一遍业务代码，并且大家实现的方式不尽相同，容易出现意想不到的问题。

另外一个问题是，用 Taro 及 Taro-Ui 开发企业微信的过程中，有些问题暴露的非常严重。比如企业微信的登录流程隔三差五的总是报异常，Taor-Ui 的表单兼容性问题总是会影响界面功能。

这里仅对常见的问题进行分析，并尝试将问题抽象成一种公用的组件，进而在以后的开发中可以给大家以启发。后期也会对企业微信中相关的流程，常用表单组件及常用 API 进行封装，以提高开发体验。

关键技术点

  • 场景值获取
  • 分享动作
  • 生成海报
  • 生成小程序码

TODO

  • 小程序登录
  • 企业微信js-sdk封装
  • 企业微信登录流程封装
  • 企业微信常用表单

场景值

场景值描述用户进入小程序的路劲或渠道。比如:

  • 1001 发现栏小程序主入口进入小程序
  • 1005 微信首页顶部搜索框的搜索结果页进入小程序
  • 1007 单人聊天会话中的小程序卡片进入小程序
  • 1008 群聊会话中的小程序卡片进入小程序
  • 1010 收藏夹进入小程序
  • 1011 扫描二维码进入小程序
  • 1012 长按图片识别二维码进入小程序
  • 1013 扫描手机相册中二维码进入小程序
  • 1036 APP分享的消息卡片中进入
  • 1047 扫描小程序码进入

等等...

场景值的作用

场景值的作用主要提现在以下两方面:

  • 统计客户来源，进行客户画像。
  • 企业及小程序管理人员可以通过统计信息，设定不同的营销策略。

场景值的获取

获取场景值的方式有两种：

  • App 的 onLaunch 和 onShow。
  • 调用API中的wx.getLaunchOptionsSync()。

对于场景值的处理，理论上应该作为全局属性，在需要用到的组件内直接获取。因此，暂时决定采用React中的Context对其进行封装，使之可以作为全局变量在组件树中进行传递，子组件可以通过context直接获取。

分享

小程序的分享从表象上看有两种情况：

一种是通过页面右上角的菜单唤起分享，这种分享只有页面内定义了onShareAppMessage(Object object)方法，才会显示转发按钮。

另外一种是通过给 button 组件设置open-type='share'属性，用户点击按钮后触发分享，这种方式称为页面内发起转发。

本质上，页面内转发其实最终也是触发了onShareAppMessage这个方法。onShareAppMessage方法写法如下：

代码语言：javascript复制
onShareAppMessage(opts){
  // from : button：页面内转发按钮 || menu：右上角转发菜单
  // target : button || null
  const {from , target,webViewUrl} = opts
  return {
    title: '自定义转发标题',
    path: '/page/user?id=123',
    imageUrl:'自定义图片路径'
  }
}

它的参数中会标识出转发事件来源，并最终返回一个自定义内容的对象。

所以，考虑分享按钮的表现形式后，对分享按钮组件的设计大致有一下几个功能：

  • fixed 浮动。
  • 支持图标。
  • 支持自定义内容及样式。

为了减少组件与界面之间的耦合度。预计将分享功能作为组件的一个方法，抛给父页面直接调用，当然前提是需要传入相应的参数。同时将支持自定义分享按钮的内容及样式。实现该功能的技术点如下：

  • ref 用于父组件调用子组件方法。
  • render-props 用于实现自定义组件内容(非必须)。

海报

海报的生成有两种场景:

  • 生成任务或产品推广海报，即生成具体要推广产品的海报，产品海报 产品二维码。
  • 生成小程序推广海报，即小程序海报 小程序码相结合。

产品推广海报，需要的参数有：

  • 海报图
  • 二维码
  • 海报标题
  • 海报描述
  • 链接地址
  • 二维码位置信息

小程序推广海报，需要的参数有:

  • 海报图
  • 小程序码(太阳码)

为避免组件中逻辑过重，预计拆分两个组件，根据不通的业务场景，使用相应的组件即可。

  • 产品海报ProductPoster。
  • 小程序海报programPoster。

小程序码

小程序码的生成主要依赖后端服务返回小程序码的图片。并且只能生成已发布小程序的小程序码(太阳码)。

服务端API主要接口有：

  • get
代码语言：javascript复制
 POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

适用于需要的码数量较少的业务场景。通过该接口生成的小程序码，永久有效，有数量限制

  • getUnlimited
代码语言：javascript复制
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

适用于需要的码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制。

生成小程序码

小程序码的生成可以有两种方式:

  • 封装成一个函数，返回小程序码图片地址。
  • 封装成一个组件，支持自定义样式。

这里倾向于将所需参数通过props传递给相应组件，直接封装成组件，减少页面中的逻辑。

同时实现一个方法，返回图片地址。

具体实现

代码仓库:https://gitee.com/mynoe/mini-share-platform.git

后期会逐渐完善TODO中相关内容，尽量将流程组件化。

小程序 微信 企业 api react

0 人点赞