uniapp开发微信小程序的坑

430 阅读3分钟

一、前言

由于PC端的网站功能已经写的差不多了,一直想写个微信小程序和App将数据整合到一起。发现uniapp可以一套代码搞定微信小程序和App,于是我利用空闲时间边看文档边搞、搞了一个礼拜初步完成了第一版。由于微信小程序和App进行微信授权的流程是不一样的,我分开进行了区分,全部搞好。正想申请App微信授权认证的时候,微信认证居然要营业执照和300块钱。没钱、免费办理的营业执照也注销了、所以目前只上线了微信小程序(免费上线)。 PC端请点击此处访问

在线预览:微信搜索斜阳技术博客

二、开发遇到的问题

1、首页

首页没什么大问题,很简单的布局。使用组件和卡片式直接布局简单明了。

2、文章详情

使用mp-html组件解析md文档。这里图标的选择以及左右布局的大小对于强迫症的我纠结的比较久!

3、聊天室

  • 这里最坑的就是scroll-view组件,将聊天记录渲染完后,要跳到底部。因此我给每个item加一个id值,用scroll-view来识别每次进入聊天室直接获取列表长度的值-1来跳到底部。想法虽然没问题,但是最终老是离底部有那么一点距离。折腾半天,一开始是以为高度不能设置成百分比,我直接改成具体高度。好家伙,布局直接乱了。经过多次反复测试,发现有那么一个高度,恰好能滑到最低部。心想每个手机的尺寸和高度肯定不一样,于是想着动态获取手机的可视高度减去底部tabbar的高度不就行了?问题直接解决。
  • 输入框问题,一开始想着设置textarea自适应高度,根据输入的字数自动调节高度,在自己手机上调试的没问题,但是在不同手机上的初始高度不一样,很不美观,其次是发送按钮没有给固定高度,父元素也没有高度,导致垂直居中不了(有会的吗?)。于是算了,我直接给输入框固定高度把。至少美观一点。
  • 突然想到,用户进入聊天室的时候,只需要返回最新的十条记录就行,用户上拉再继续请求数据。

4、我的

这里最纠结的就是背景颜色和图标的选择。选哪个都觉得不对劲。最后还有一个坑就是设置背景颜色的时候,高度设置100%不会生效,设置100vh才会生效。麻了。

5、微信授权问题

这里分为两种:微信小程序和App两种使用的是不同的微信授权流程

微信小程序(这是我将微信授权存入后端数据库的流程,可能每个人的写法流程不一样):

  • 第一步:使用wx.getUserProfile获取微信的用户信息保存起来
  • 第二步:使用uni.login获取微信code,获取成功之后,将code和微信用户信息传入后端
  • 第三步:在后端接收到code和用户信息,将code和appid、secret拼接起来请求获取sessionkey和openid
  • 第四步,判断数据库中是否存在该用户,存在(从数据库中取),不存在(将获取的信息存入数据库)

App:

  • 第一步:使用uni.login获取unionid和openid
  • 第二步:使用uni.getUserInfo获取用户昵称和头像信息,将这些数据发送到后端
  • 第三步:后端接收到数据,先进行判断是否存在用户,存在(从数据库中取),不存在(将获取的信息存入数据库)

三、页面展示

56EB7DD2D5314F2D5D897BFB0D36B89E.png