微信小程序开发知识经验及部分问题解决方案论文_石淇帆

微信小程序开发知识经验及部分问题解决方案论文_石淇帆

石淇帆

成都理工大学网络安全学院 四川 成都 610000

摘要:微信小程序在近两年的发展中,以跨平台、流量大、成本低、轻应用和高体验的特点,在移动终端中流行了起来。支付宝、头条、京东、百度等平台也渐渐研发了自己的小程序。但微信小程序凭借其引领者和先行者的身份仍然是这之中的佼佼者。越来越多的开发者加入到小程序开发的队伍,而微信小程序的的开发知识和经验是开发者短时间内掌握小程序开发的关键,文章还提供了对于以云开发为后端的上拉加载问题的解决方案。

关键词:微信小程序;开发经验;云开发;前后端

1 引言

自2017年1月9日微信创始人张小龙发布微信小程序以来,微信小程序的热度一直居高不下。这两三年的时间内,微信小程序飞速发展,渐渐走入我们的生活,其中不乏一些给我们留下了深刻印象的小程序,如17年底微信官方发布的小游戏“跳一跳”、统计每日步数的“步数宝”、方便日常出行的各类单车小程序等。

由于微信小程序用完即走,无需下载的特点,更多的人倾向于使用小程序而非APP。所以越来越多的开发者加入了小程序开发的队伍。

2 微信小程序开发知识及经验

2.1 微信小程序开发工具

目前,大部分开发者用的都是官方提供的“微信开发者工具”。通过微信开发者工具,填入小程序的相关信息,选择小程序的后端服务,即可快速地在本地创建一个小程序项目。微信开发者工具界面比较清新简洁,配有即时预览、切换机型的模拟器,开发者可以对小程序进行真机调试。同时,选择以云开发作为后端服务的小程序,可以直接在开发工具中进入云开发的可视化后台,对数据库、云存储空间、云函数直接进行操作。虽说微信开发者工具是官方提供的,但在开发调试过程中,开发工具经常会出现一些奇怪的错误,那种调试千百遍,重启工具才能解决的开发体验有时会让你头大。

另外,还有一部分开发者习惯用VS Code(全称Visual Studio Code)作为小程序的开发工具,开发者通过安装一些插件,例如wechat-snippet、minapp、wxapp-helper等即可方便快速的开发小程序,但是VS Code并没有即时预览调试的功能,当代码开发完成后,还是要在微信开发者工具里面进行小程序的调试预览。

2.2 微信小程序目录结构

小程序包含一个描述整体程序的app和多个描述各自页面的page。一个小程序主体部分有三个文件组成:app.js(小程序逻辑)、app.json(小程序公共配置)和app.wxss(小程序公共样式表),这三个文件必须存放在项目的根目录。一个小程序页面有四个文件组成:.js(页面逻辑)、.wxml(页面结构)、.json(页面配置)及.wxss(页面样式表)。

2.3 微信小程序前端开发及组件库推荐

微信小程序的前端开发主要集中在.wxml、.wxss和.js三个页面。

.wxml用于描述页面结构,用的是wxml语言,全称WeiXin Markup Language,即微信设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。.wxss用于描述页面样式,用的是wxss语言,全称WeiXin Style Sheets,即微信设计的一套样式语言,用于控制wxml的组件样式。.wxml和.wxss两个页面组成了小程序的视图层,也就是小程序用户直观看到的页面。.js页面用于描述页面的逻辑,可以调用 Page 方法注册页面实例,指定页面的初始数据、生命周期回调、在函数中调用小程序封装的API来处理用户的事件等。

在前端开发中,一些开发者由于个人的审美原因以及前端开发的不熟练,写出来的界面不太美观,给用户较差的视觉体验。在这里给大家推荐一些UI组件库,可以帮助开发者短时间内搭建出漂亮简洁的前端页面。

期刊文章分类查询,尽在期刊图书馆

WeUI——微信原生视觉体验一致的基础样式库

1) WeUI是微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。WeUI提供的组件和微信中的UI样式基本一致,能够让开发者开发的小程序和微信很好的融合在一起,对微信的兼容性较好

Vant——轻量、可靠的移动端Vue组件库

2) Vant提供了一整套UI基础组件和业务组件,是有赞前端团基于有赞统一的规范实现的Vue组件库。组件比较简洁清新,但是Vant组件更适合快速搭建一个商城类的小程序。

ColorUI——鲜亮的高饱和色彩、专注视觉的小程序组件库

3) ColorUI是一个Css类的UI组件库,其绚丽多彩的渐变色和大气的动态效果能够瞬间抓住开发者和用户的眼球。在最近的小程序开发中,我也深深的被这个组件库所吸引。

2.4 微信小程序后端开发

2.4.1 服务器

微信小程序可以采用自己搭建的服务器来作后端交互,开发者可以灵活选择后端开发语言,如Java,PHP等。但服务器搭建流程较为繁琐,常常成为一些新手开发过程中的拦路虎。

2.4.2 云开发

云开发是微信与腾讯云联合开发的原生serverless云服务,具备简化运维、高效鉴权等优势。云开发为开发者提供了云函数、数据库、云存储和云调用四大基础能力。

云函数:

1) 在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码。

数据库:

2) 云开发为开发者提供了大小为2GB的非关系型数据库,要注意的是,当用户向数据库中产生数据时,数据库中会自己生成_id和_openid字段,_openid字段是辨别用户身份的唯一标识。

云存储:

3) 可以在小程序前端上传和下载云端文件,但微信对于除图片外的文件上传下载机制并不完善。

云调用:

4) 原生微信服务集成,是基于云函数免鉴权使用开放接口的能力,包含服务端调用、获取开放数据的能力。

虽然云开发无需搭建服务器,即可为小程序提供后端服务,但是对于中大型的小程序来说,服务器终究才是最好的选择。

3 基于云开发为后端的上拉加载问题解决方案

由于云开发为开发者提供的是非关系型数据库,而非关系型数据库并没有像关系型数据库的自增字段,另外小程序端调用数据库get方法一次最多获取20条数据,云函数端一次最多获取100条记录,这使得上拉加载时开发者无法确定已经加载和未加载的记录。

解决方法:利用时间戳和随机数创造一个尽可能不重复的有序字符串,来实现数据库记录的有序排列和分次读取。调用util.js中的formatTime方法获取当时时间,例2019/7/29 10:00:31,处理之后获得字符串190729100031,之后再用随机数加减乘除获取一个小概率重复的五位随机字符串,拼接两个字段得到一个17位的字符串(经测试,超过17位的位都会变成0)。

当用户触发上拉加载函数时,将数据库中的记录按有序字段排列,调用数据库count方法获取数据库中的记录数,除以每次获取的记录数得到要加载的总页数,以一个变量暂记为lastrecorde,来记录每次获取的记录数组中最后一条记录的有序字段,之后每次获取小于或大于lastrecorde的记录数组加入总的记录数组中,即可实现上拉加载的效果。

论文作者:石淇帆

论文发表刊物:《文化时代》2019年15期

论文发表时间:2019/10/28

标签:;  ;  ;  ;  ;  ;  ;  ;  

微信小程序开发知识经验及部分问题解决方案论文_石淇帆
下载Doc文档

猜你喜欢