uniapp开发微信小程序的坑

一、前言

由于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获取用户昵称和头像信息，将这些数据发送到后端
第三步：后端接收到数据，先进行判断是否存在用户，存在(从数据库中取),不存在(将获取的信息存入数据库)

uniapp开发微信小程序的坑相关推荐

uniapp 开发微信小程序踩坑：TypeError: Cannot read property ‘FormData‘ of undefined
需求: UniApp 的 H5 端已经正常使用,现在打算兼容微信小程序. 1. 问题分析本以为应该很顺利,但是一上来就直接报错了,心里很慌呀,报错信息如下: 页面[components/major/ ...
uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...