一周时间，用uniapp + uniCloud 全干开发了一个小程序

最新推荐文章于 2024-09-08 09:15:44 发布

乌南竹

最新推荐文章于 2024-09-08 09:15:44 发布

阅读量123

点赞数

文章标签： uniapp 微信小程序

原文链接：https://juejin.cn/post/7388635438741110793

版权

一、为什么要做这件事情

1.扩展技术、能力范围

本人已经从事前端开发有五年时间了，对日常的工作需求，已经差不多是闭眼写水平。对于自己还没实践过的东西比较好奇，比如公司的埋点平台，错误日志上报，国际化翻译平台等等，这些工具化的SDK只见过而未能参与其中，现在开始做自己的小应用，后面才可能基于这个扩展其他方面的能力。第二点就是挑战一个人全干。

2.满足日常灵感收集

这个应用的灵感来自于微信社群的讨论，大家希望有一个讨论的地方，后面也可以做一些记录，导出的功能，或者把大家的奇思妙想转成电子书等等。所以，利用微信小程序会比较方便用户使用。

二、为什么是uniapp

我问了一个在开发微信小程序方面有经验的朋友，她说他们团队主要用uniapp，我就对比了一下原生的微信小程序开发和uniapp开发。

特性	微信	uniapp
学习成本	需要学微信设计的wxss、wxml语法	可以直接用vue写
跨端支持	微信小程序、安卓、ios	微信、支付宝、百度、抖音、QQ、360、快手、飞书、钉钉、京东、小红书这样的小程序、安卓、ios、web
组件支持	文档有点散，原生的组件不太好看，其他的组件库还需要研究	本身有uni-ui的组件

基于学习成本和未来更好扩展到其他平台，所以选择用uniapp开发。

在这个过程，还吃了个瓜。DCloud才是小程序鼻祖，不是微信。

基于我没有太多时间精力搞服务器，直接购买了uniCloud的云服务和数据库(这个是noSQL的，在用的时候非常想念关系型数据库，特别是表关联麻烦得很！想写Sql😂)

三、这个应用如何设计

应用的定位是帮助大家记录灵感，同时方便大家讨论，后续可能对数据做其他筛选。所以大致应该包含的功能有：

序号	功能
1	发布看法
2	评论看法
3	回复评论
4	点赞
5	微信登录

因为要记录发布的用户，所以必须做登录，登录就用微信账号这一种方式。

哐哐哐的，一个上午就完成了prd、原型图和接口文档设计。

四、过程中我踩了哪些坑

1.ui组件的兼容

在使用uniapp的textarea组件的时候在web正常，在微信小程序无法聚焦输入。

试了很多方案都不行，比如用JS去focus(),最后观察现象,上骚操作，默认v-model绑定两行文字，在打开的时候异步去掉文字。

2.平台的差异

1.web和小程序传参的差异

本来在web从列表页跳转详情页的时候，用路由的query传参(this.$route.query.id)是没问题的，但是在小程序就不行（值变成undefined）。

后面发现要在onLoad的option里面拿传参，如下

onLoad: function(option) {
    this.opinionId = option?.id;

    console.log('详情页onLoad',option);
},

2.样式的差异

微信小程序不支持css的id、标签、属性选择器。

不支持标签、属性选择器的原因是微信小程序有自己的标签命名规则，和html5不同。
比如html5中的img标签，在微信小程序中是image标签，如果用标签选择器就会出现web和微信小程序平台兼容性问题。
(当然也可能是微信小程序项目组懒得去follow html5规则，也不想花时间支持标签、属性选择器，有工作量不是~)

3.功能设计的变动

本来想在评论的回复中展示用户头像，这样需要记录用户的头像，如果在评论的时候记录，可能用户头像更新之后，还有更新的工作量在。

如果不随评论记录用户头像，那么就需要在查询的时候去用户列表匹配，这样虽然比较麻烦，但是更新不会有问题。现在可以理解为什么有的评论不展示头像了。

目前评论的回复不展示头像，后续看情况再优化。

五、成果

六、总结

1.不能只看官方说了什么，而要看他没说什么

一开始看uniapp的官方视频，一整个快速和酷炫，特别是schema2code的功能，一下子就根据数据表生成页面，太快了，还需要什么熟手！

等真开始写，不是啊，这也不是我要的东西和界面，有时候改动成本比重新写要大。官方的初心和功能都是很好的，但是不能满足我的要求。

2.在新的生态系统中抓取东西为自己所用，需要先了解生态

我本以为按我的能力，三天搞定不是问题。但是，现实往往很多问题。比如，web和混合h5 app都可以直接用原生的window.sessionStorage,但是uniapp里面就没有，需要找他的平替uni.setStorageSync。传参方式和vue项目的不同也需要时间，等等等，就是一个爬坑史。

但是你也不能把官方文档都看完才开始，就先捋清自己需要什么，再去找自己需要的东西。