一、前言
由于PC端的网站功能已经写的差不多了，一直想写个微信小程序和App将数据整合到一起。发现uniapp可以一套代码搞定微信小程序和App，于是我利用空闲时间边看文档边搞、搞了一个礼拜初步完成了第一版。由于微信小程序和App进行微信授权的流程是不一样的，我分开进行了区分，全部搞好。正想申请App微信授权认证的时候，微信认证居然要营业执照和300块钱。没钱、免费办理的营业执照也注销了、所以目前只上线了微信小程序(免费上线)。
PC端请点击此处访问https://www.solargod.cn/
在线预览: 微信小程序搜索斜阳技术博客
二、开发遇到的问题
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获取用户昵称和头像信息，将这些数据发送到后端
- 第三步：后端接收到数据，先进行判断是否存在用户，存在(从数据库中取),不存在(将获取的信息存入数据库)
三、页面展示
BC86159F9F3E8EC9142B381FE8E0C98A.png
