阅读 585

小程序开发踩坑记录

技术栈

由于我是React技术栈,所以在开发小程序时首选支持React语法的框架来开发,根据网上从业人员的反馈,及生态综合看下来,决定了采用 TaroJS + TaroUI 为基本框架,并且后续支持多平台小程序同一套代码构建。

  • TaroJS :taro-docs.jd.com/taro/docs/c…

  • TaroUI:taro-ui.jd.com/#/docs/intr…

  • TaroUI 同时拥有完善的设计规范及插件,对开发者和设计师都非常友好

  • 跟随 TaroJS 的CLI工具快速上手就可以3分钟内搭建完小程序基础项目,开发者只需要专注于业务开发

具体坑点

此前完全没有接触过小程序的开发,所以对我来说,遇到的不仅仅是业务或者框架使用上的坑,还有一部分是小程序开发流程上的坑,所以下面分别从开发流程及框架使用上两个方面来列举

小程序流程中的坑(注意点)

1. 小程序开发工具如何切换小程序项目

这个在我刚开始的时候把我坑的够呛,因为开发者工具打开过项目后,后面再打开是会直接进入到之前打开的项目中的,此时的界面上是没有切换项目的功能按钮的,Goole出来的答案都比较老旧,不适用于新版的开发者工具了。。实际上只需要关掉(×掉)当前的项目,就会弹出选择项目的界面,如下

2. 接口只支持HTTPS,这就要求开发者必须拥有HTTPS协议的域名

不过在本地开发时,可以通过 开发者工具 --> 调试器 --> Mock Tab --> 添加mock数据来解决开发时没有HTTPS协议接口的问题,具体如下图。

最新更新:关于本地联调http协议的接口,找到了另一快捷方法:

直接在开发工具中修改本地不校验https即可
复制代码

3. 关于开发者工具,还有一个遗留的坑是还没找到本地配置代理的入口

这个问题和上面的第二点相关,因为本地如果不采用mock,而又只有HTTP协议的接口时,要联调的话还有一种方法是可以通过Charles代理的方式来解决,但其中的一步就是需要在开发者工具中配置代理。我暂时还未找到。所以才采用的mock方式,但终究是联调不了。。。

Charles代理的方法连接

最新查了下,开发者工具的代理配置可以通过command + , 快捷键调出配置窗口,里面可以配置代理

TaroJS 和 TaroUI 中的坑

首先声明一下,TaroJS和TaroUI在开发体验上确实是非常爽,这个毫无疑问,对我这样的新手来说上手非常快,但是同样,其中也不可避免的遇到了一些坑点,但不影响开发,后面会随着开发的深入增加更新。

1. 最新版本中AtInput组件中的maxLength属性失效,GitHub上很早就有人提了Issue但是还未修复

注:我目前使用的最新版本是: TaroJS 3.0.26TaroUI 3.0.0-alpha.3

2. AtForm组件虽然是表单组件,但是似乎不具备表单校验功能,需要配合第三方库 utilscore 来实现校验功能

这也算是社区的最佳实践吧,但对于表单组件来说,功能不太完整,这里提供一下 utilscore 的地址。

taro-ext.jd.com/plugin/view…

3. TaroUI的官方的回复速度挺快,但是bug修复(版本更新)速度似乎有点慢

免费开源的,要啥自行车。。。

文章分类
前端
文章标签