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

时间: 2020-02-28阅读: 824标签: 小程序

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


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/
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

手把手教你写个小程序定时器管理库

后台的定时器积累得越多,小程序就越卡,耗电量也越大,最终导致程序卡死甚至崩溃。特别是团队开发的项目,很难确保每个成员都正确清理了定时器。因此,写一个定时器管理库来管理定时器的生命周期,将大有裨益。

微信小程序踩坑之获取手机号

最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况。研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家。

小程序分享海报的实现

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生成图片耗用内存比较大对服务端也是不小的压力;

微信小程序wx.getUserInfo授权获取用户信息

这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

微信小程序开发注意指南和优化实践

转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行。

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

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

腾讯出品的微信小程序有哪些?

腾讯wifi一键连;识花君;企鹅医典;vgo微海报;腾讯AI体验中心;食物健康测评;腾讯地图+;微信辟谣助手;腾讯文档;多媒体AI平台;微云;微信发票助手

微信小程序版本自动更新

当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间

个人怎么做微信小程序

据说移动互联网的轻量级应用是微信applet。简而言之,applet是基于微信平台的应用程序。目前,小方案的主题非常重要。它通知主要媒体和新闻,以及小程序如何打开。它也在增加,甚至个人也可以开发它

点击更多...

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