记一次小程序开发过程

2024-09-06 22:58
文章标签 过程 一次 程序开发

本文主要是介绍记一次小程序开发过程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

写在前面

前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质、HTTPS、审核。

先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过、什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快。

至于为什么现在选择开发小程序,原因很简单,尝尝鲜!

学习

虽然很早就听说小程序要出来了,但是在我的潜意识中,小程序不过是一个被微信优化、限制、规范过的WebApp。

果然下载完开发工具一看,起码从表面来看确实就是一个“轻量级、功能非常不强大”的前端框架。典型的JS/CSS/HTML结构,微信非得重新取个名字也没办法,逼格还是得有的。

记一次小程序开发过程

然后去看了下官网文档,真的是吃了一惊,文档少的可怜,不是说不全面,而是确实微信就提供了这么多原生功能。很多常用的JS组件全都没有,看样子之后很多地方都需要自己实现。

大概浏览了一遍,开发逻辑基本和常规前端无异,如果遇到大工程,可以用glup或者grant等工具。

设计

用demo写了几句话之后大概明白了语法规则,然后就开始思考做个什么。

一时半会想不到做什么,就把之前做的一个跑车展示软件拿出来再做一遍吧。

这是当时在iOS和安卓上做完的效果:

记一次小程序开发过程

品牌列表

记一次小程序开发过程

车型浏览

所以整体软件结构非常简单,一个品牌列表页,一个左右滑动的详情页。当然由于微信小程序的限制,不能外链,不能加iframe视频,因此图集、视频功能取消。

整个小程序唯一的互动就是点赞。点赞数会记录到服务器统计,同时在本地也保存一下,因此不是真正意义上做到用户点赞。

为什么?因为没有申请小程序appid,无法真正获取用户信息。

开发

首页列表的开发非常简单,思路是:

1.请求服务器数据列表

2.用for标签渲染出每个item

3.为每个item添加点击事件,OK

代码非常简单,一句请求、一句页面跳转。

记一次小程序开发过程

首页开发

在页面布局上,虽说是CSS,但是感觉还是不如CSS好用,还是遇到了很多未解之谜。尤其在我的设计里需要悬浮、百分比设计,结果总是出现莫名的bug,最后不得已固定了像素。

然后就是详情页,好在微信提供了一个类似banner广告的组建Swiper,功能可以说是异常地不强大!

自定义性非常糟糕,万幸地是提供了一个滑动change事件。

再后面就是去写每一个item的布局,费了好大劲,总是发现微信的image组建底部会出现空白,无论改变margin还是padding都没用,不得已全部改成view。

记一次小程序开发过程

详情页

UI全部写完后就要实现应用唯一一个互动功能:点赞。

1.向服务器发起请求,点赞+1

2.本地记录被点赞的汽车id

3.swiper滑动时刷新是否点赞

在这里遇到了一个大坑,可能是小弟愚昧,微信竟然没有提供元素获取的方法,没有jQuery的seletor,也没有HTML原生的getElement,导致我都不知道怎么去获取按钮。希望懂的朋友留言交流一下,谢谢。

最后不得已留了两个按钮,一个点赞,一个已点赞,根据状态隐藏。

写在结尾

第一个功能非常简单的小程序就做完了,要说有什么用,没什么用,自己玩的开心就行了。当然这也是一个学习的过程,后面肯定要开发并发布更多的小程序,也会去接一些小程序开发外包。

作为一名开发者,微信小程序的开发体验让我很失望,远远不如前端。但是作为一名产品,我却很开心,小程序提供了大量机遇,可以用最简单的方式实现非常多的功能。

如果你也想研究、开发小程序,如果你也喜欢研发产品,欢迎联系灯灯微信,小程序开发定制vx:arsenetech

这篇关于记一次小程序开发过程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143362

相关文章

Redis中Hash从使用过程到原理说明

《Redis中Hash从使用过程到原理说明》RedisHash结构用于存储字段-值对,适合对象数据,支持HSET、HGET等命令,采用ziplist或hashtable编码,通过渐进式rehash优化... 目录一、开篇:Hash就像超市的货架二、Hash的基本使用1. 常用命令示例2. Java操作示例三

Redis中Set结构使用过程与原理说明

《Redis中Set结构使用过程与原理说明》本文解析了RedisSet数据结构,涵盖其基本操作(如添加、查找)、集合运算(交并差)、底层实现(intset与hashtable自动切换机制)、典型应用场... 目录开篇:从购物车到Redis Set一、Redis Set的基本操作1.1 编程常用命令1.2 集

Linux下利用select实现串口数据读取过程

《Linux下利用select实现串口数据读取过程》文章介绍Linux中使用select、poll或epoll实现串口数据读取,通过I/O多路复用机制在数据到达时触发读取,避免持续轮询,示例代码展示设... 目录示例代码(使用select实现)代码解释总结在 linux 系统里,我们可以借助 select、

k8s中实现mysql主备过程详解

《k8s中实现mysql主备过程详解》文章讲解了在K8s中使用StatefulSet部署MySQL主备架构,包含NFS安装、storageClass配置、MySQL部署及同步检查步骤,确保主备数据一致... 目录一、k8s中实现mysql主备1.1 环境信息1.2 部署nfs-provisioner1.2.

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe

linux部署NFS和autofs自动挂载实现过程

《linux部署NFS和autofs自动挂载实现过程》文章介绍了NFS(网络文件系统)和Autofs的原理与配置,NFS通过RPC实现跨系统文件共享,需配置/etc/exports和nfs.conf,... 目录(一)NFS1. 什么是NFS2.NFS守护进程3.RPC服务4. 原理5. 部署5.1安装NF

MySQL使用EXISTS检查记录是否存在的详细过程

《MySQL使用EXISTS检查记录是否存在的详细过程》EXISTS是SQL中用于检查子查询是否返回至少一条记录的运算符,它通常用于测试是否存在满足特定条件的记录,从而在主查询中进行相应操作,本文给大... 目录基本语法示例数据库和表结构1. 使用 EXISTS 在 SELECT 语句中2. 使用 EXIS

oracle 11g导入\导出(expdp impdp)之导入过程

《oracle11g导入导出(expdpimpdp)之导入过程》导出需使用SEC.DMP格式,无分号;建立expdir目录(E:/exp)并确保存在;导入在cmd下执行,需sys用户权限;若需修... 目录准备文件导入(impdp)1、建立directory2、导入语句 3、更改密码总结上一个环节,我们讲了

ShardingProxy读写分离之原理、配置与实践过程

《ShardingProxy读写分离之原理、配置与实践过程》ShardingProxy是ApacheShardingSphere的数据库中间件,通过三层架构实现读写分离,解决高并发场景下数据库性能瓶... 目录一、ShardingProxy技术定位与读写分离核心价值1.1 技术定位1.2 读写分离核心价值二

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异:对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理,目前我用的MP的版本