域名到期,回复中的下载地址暂时无法访问,这几天会找时间修复这个问题,同时上传更多的书籍供大家下载阅读。
基于 Taro 进行小程序的开发已经过了很长时间,其中遇到了不少问题。不同的项目之间有时候会遇到类似的需求,比如小程序的登录
,分享
以及生成海报图
等常见的功能。
一个问题是,不同的项目在遇到相同的问题时,同样的业务逻辑需要重新写一遍业务代码,并且大家实现的方式不尽相同,容易出现意想不到的问题。
另外一个问题是,用 Taro
及 Taro-Ui
开发企业微信的过程中,有些问题暴露的非常严重。比如企业微信的登录流程
隔三差五的总是报异常,Taor-Ui 的表单兼容性问题
总是会影响界面功能。
这里仅对常见的问题进行分析,并尝试将问题抽象成一种公用的组件,进而在以后的开发中可以给大家以启发。后期也会对企业微信中相关的流程,常用表单组件及常用 API 进行封装,以提高开发体验。
场景值描述用户进入小程序的路劲或渠道。比如:
等等...
场景值的作用主要提现在以下两方面:
获取场景值的方式有两种:
onLaunch
和 onShow
。wx.getLaunchOptionsSync()
。对于场景值的处理,理论上应该作为全局属性,在需要用到的组件内直接获取。因此,暂时决定采用React中的Context
对其进行封装,使之可以作为全局变量在组件树中进行传递,子组件可以通过context
直接获取。
小程序的分享从表象上看有两种情况:
一种是通过页面右上角的菜单唤起分享,这种分享只有页面内定义了onShareAppMessage(Object object)
方法,才会显示转发按钮。
另外一种是通过给 button 组件设置open-type='share'
属性,用户点击按钮后触发分享,这种方式称为页面内发起转发
。
本质上,页面内转发其实最终也是触发了onShareAppMessage
这个方法。onShareAppMessage
方法写法如下:
onShareAppMessage(opts){
// from : button:页面内转发按钮 || menu:右上角转发菜单
// target : button || null
const {from , target,webViewUrl} = opts
return {
title: '自定义转发标题',
path: '/page/user?id=123',
imageUrl:'自定义图片路径'
}
}
它的参数中会标识出转发事件来源,并最终返回一个自定义内容的对象。
所以,考虑分享按钮的表现形式后,对分享按钮组件的设计大致有一下几个功能:
为了减少组件与界面之间的耦合度。预计将分享功能作为组件的一个方法,抛给父页面直接调用,当然前提是需要传入相应的参数。同时将支持自定义分享按钮的内容及样式。实现该功能的技术点如下:
海报的生成有两种场景:
产品海报
+产品二维码
。小程序海报
+小程序码
相结合。产品推广海报,需要的参数有:
小程序推广海报,需要的参数有:
(太阳码)
为避免组件中逻辑过重,预计拆分两个组件,根据不通的业务场景,使用相应的组件即可。
ProductPoster
。programPoster
。小程序码的生成主要依赖后端服务
返回小程序码的图片。并且只能生成已发布小程序
的小程序码(太阳码)
。
服务端API主要接口有:
POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN
适用于需要的码数量较少的业务场景。通过该接口生成的小程序码,永久有效,有数量限制
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
适用于需要的码数量极多的业务场景。通过该接口生成的小程序码,永久有效,数量暂无限制。
小程序码的生成可以有两种方式:
这里倾向于将所需参数通过props传递给相应组件,直接封装成组件,减少页面中的逻辑。
同时实现一个方法,返回图片地址。
代码仓库:https://gitee.com/mynoe/mini-share-platform.git
后期会逐渐完善TODO中相关内容,尽量将流程组件化。
本文分享自 JavaScript高级程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!