小程序开发的一些细节,你有注意吗?

更新日期: 2020-02-28阅读: 1.6k标签: 小程序

最近的弄的小程序差不多有点东西了,就来写一些关于小程序的感悟吧


01 前言

一般来说,我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议。


02 技术选型

其实我觉得技术选型是非常重要的,直接关系到你后来的工作复杂度。怎么说呢?因为小程序的开发就是一个注重业务逻辑的过程,它与算法研究类的研发工作不同。小程序的质量高不高,用户体验好不好完全取决于你的页面设计,页面的交互。

所以我觉得在选型的过程中有几个特别值得注意的:

基本上就是这些,首先来说一下第一个关于组件库的支持。

组件库支持

现在的 组件库 特别多,基本上是可以满足我们日常开发的需要,之前我写了一篇关于《 前端人应该掌握的工具 》里面有写到,大家感兴趣的可以去看一下。

可以说组件就是整个程序的重要部分,因为假如你 自己写的话肯定会花费大量的时间 ,即使你已经写出来了可能也就是自己能用,兼容性也会有问题。所以关于组件的开发就 不推荐自己造轮子 了,我们还没有这样的时间和精力。

但是我们也不能随便去选择一个组件库,我们必须要 根据小程序的页面设计 ,详细列出里面所有的元素到底是采用何种方法/组件实现的,你 选择的组件库是否所有都满足 。还有一个重要的是,组件库的 社区反馈 如何,有没有很多不可避免的BUG在里面。

这一点自己也深有体会,因为组件的兼容性问题,自己往往会花费几天时间来做 兼容和适配 。现在我是选择了 mpvue+vant 的形式来写的。设计图上面的navbar是自定义而且是固定顶部的,一开始也没有怎么注意,觉得没有问题。但是,在我切换不同的机型的时候问题就出来了,各种对不齐的情况接踵而来,特别是苹果系列的机型(刘海屏)。

起初我想过自己去适配一下,但是发现头发一直掉,应该在提醒我不能这么搞了。后面就在github找到了一个可以适配的navbar组件,解决了我的问题。也从侧面说明不能自己造轮子。

框架生态

因为最终还是要编译成官方的小程序格式,难免会有一些问题。所以我们选择一个小程序框架的时候也要考虑到这个问题,看 它与官方的区别 在哪,有哪一些是不支持的,看一下 社区对它的评价如何 。

基本上我们 选择一些用户反馈比较积极 的就好, 不要选一些新兴的框架 ,因为往往也是坑比较多,而且你有时候发邮件问他们几个世纪都不回你的。如何选择一个比较好的框架呢?可以看文章的最后github仓库,里面有很多关于小程序的资料,也有一些框架的排名和组件库选择。

框架语法

语法部分还不是最主要的,因为 前端的语法 都一样,那我说这个的目的其实是说小程序的开发语法与官方的语法有 哪些不兼容 的,要注意一下,一般文档都会给出来的。

目前小程序的开发都可以使用vue语法来编写,可以说是非常方便了,但是如果你不熟悉 小程序的生命周期 与 vue的生命周期就 可能会有一些问题。我遇到的问题就是怎么合理使用生命周期函数。有时候你的程序可能会报一些奇怪的错误, 比如提示图片加载失败,然后图片又显示正常 。其实这就是页面渲染的时候还没有识别到图片的原因,是后面加载的,这就是先后的问题。


03 开发步骤

前期就是一些架构设计以及技术选型的内容,前期的选择尤为重要,技术选型好,后面你会节省很多时间和工作量。

代码结构设计

开发步骤也要设计,你要规划一些目录结构,比如存放 组件的 、 图片的 、 工具类函数的 、 页面类 的等。虽然说我们的初始化项目都会有相应的目前结构,但是你也要在它的基础上进行稍微的改造。让我们的目前更加清晰。

一般来说我们就从我提到的 组件 、 图片 、 工具 、 页面 几个步骤出发。页面部分我们基本上不用怎么改,因为项目初始化都帮你设计好了。组件部分我们就新建一个组件文件夹,用于存放我们的自定义组件,方便后期的复用。值得注意的是,我们一定要 写好组件 ,让我们的 复用效率更高 ,可以通过 传参的形式来控制组件的形态 。

关于图片的存储我的建议就是可以 从功能上来划分 ,比如tabbar的图片,navbar的图片,其他的图片也是按照自己的功能来进行划分,这样就显得 逻辑结构清晰 ,后续的 维护 更加方便容易。

项目的配置

这一方面的话看你的 具体业务需求 怎么样,一般来说我们经常都会调用 第三方库函数/接口 ,如定位等。现在我做的这一个就用到了腾讯地图的第三方接口,这里就不再详细展开。

我做的时候会出现域名不合法的情况,你需要在 小程序后台进行域名的配置 ,报错信息都告诉你怎么配置了,把那个域名加上去就好。又或者你的后台请求接口有错误的话一般就是你的接口 域名不是https协议 ,这就有点麻烦了,调试阶段可以在开发者工具的右上角详情部分, 勾上不检验 就好。

但是如果你要上线的话就需要有https的服务器放置你的接口了。


04、小结

好了,以上就是就本次项目的相关总结,但是项目本身还是没有完善的,我也是在早期的设计上面下了一些功夫,主要还是让自己在后面的开发过程中少一些BUG和错误,方便自己后期的维护。

其实业务类的小程序更要主要组件的开发和设计,因为很多页面都会公用一个组件,假如你是复制粘贴那也未尝不可,只是维护比较难而已。我们做每一个产品,在必不得已的情况下才会使用一些技巧性的东西,一般来说都会做成一个可伸缩、可维护的产品,也是对自己的要求。

小程序仓库: https://github.com/justjavac/awesome-wechat-weapp
原文 http://blog.alanwu.site/2020/04/27/miniappDetails/

链接: https://www.fly63.com/article/detial/8789

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序报错Do not have xx handler in current page的解决方法总汇

最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!