俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

微信小程序俄罗斯贵宾会:南大小百合客户端

前言

迄今为止,正儿八经的上线了真正意义上的程序,但是这个小程序却着实不小。

之所以不小,是因为这个类似于社区的小程序,已经做了大部分都有的功能了

举例说明,具体的一些功能点:

  • 1、帖子列表页面:会有的功能:滚动加载,下拉刷新等
  • 2、发帖页面:图文发表,视频上传
  • 3、评论页面,图文评论
  • 4、帖子详情页:富文本解析,点赞,回复帖子,回复评论,关注,收藏,朋友圈分享,分享
  • 5、任务中心,积分获取,兑换。
  • 6、小程序提现到零钱(即将上线)

先看效果图:

细数以下几个坑(上)

1、富文本

这个说来就有非常坑,作为一个帖子,自己创建的还好,如果是导入的富文本,对于小程序的体验真的是苦不堪言,寻求了多种方法以后,其中甚至有自己过滤标签,不过表现 形态不是很好,最终选择了 wxParse

社区里也专门有人对这个开源项目,设计出来了小程序插件,不过建议最好还是用这个项目引入,毕竟有些代码改起来方便,不是每个解析富文本的需求都刚好满足,可以 适当的调整下源代码。

相关截图

俄罗斯贵宾会 1

出自于 wxParse

值得注意的是,在某些搜索结果页面,可能也需要用到富文本解析进去搜索结果标红,因为前端去一个个匹配,还是太为繁琐,这个时候就要用到 wxParse多数据循环使用方法

例子上举例的是数组模式,实际上键值对的对象也是可以,只要经过一些处理便可,也不是很麻烦 。

2、图片上传

参考问题来源chooseImage当sizeType为compressed时怎么获取压缩图片

关于图片上传有两个小问题

1、真机上的时候,不论怎么打印压缩后的结果都会发现没有压缩。

这个时候……不要奇怪,因为开发者工具上确实无法看到真实压缩后的结果,要放在真机上联调的时候,才能打印出来具体压缩后的大小 ,虽然不是很难的问题 ,但却着实苦恼了一阵。

2、上传过后,显示预览图的速度比较慢。

这个是自己作死遇到的,为了图方便,直接拿了七牛云上面的链接地址渲染img,但实际体验比想象中的要差的多,最好改善的方案,还是拿choose后的本地图片渲染,速度快很多。

3、video始终处于最高级

当初在做弹框的时候,无论怎么设计弹窗,都无法逾越video这座大山,最后发现不管使用什么标签,设置啥层级都没有啥用。

选择的办法,设计一个假装视频暂停的画面(黑屏),把真实的video移走,等弹窗消息的时候,再重新移回来。

这个方案至今觉得还是挺low的,有好的方案的可以建议下 。

4、textarea获取焦点时,页面没有上推

对,这是个已知问题,不用再去各种搜索,坐标2018-9-3,还没有修复…………各种怨念。(一部分手机是支持上推的)

俄罗斯贵宾会 2

细数以下几个坑(下)

5、小程序海报二维码的绘制

俄罗斯贵宾会,只要小程序在功能都开始完善的差不多的时候,无可避免的都会遇到这个小程序海报二维码的问题,这个时候就是各种神笔马良绘制的时候。

这个时候,就会遇到如何隐藏当前canvas的问题,有很多种方案,最后选择的时候,把canvas移出屏幕之外,跟之前video用的是差不多的方法。

至于二维码的绘制,需求量大的,推荐文档的中的B方案。

获取二维码

还有一点比较坑的是,识别二维码一定要是已经发布的小程序,假如小程序从来没有发布过,无论你怎么神通广大都是调试不成功。

6、小程序分享

已经发出公告取消成功回调了

详细见 小程序、网页及App分享功能调整

主页面

未完……不知道是否待续

长时间没有写博客了,这段时间都一直浸淫在小程序当中,有愿意讨论的童鞋欢迎,目前小程序已稳定上线2个多月,社区类的小程序。

转载请注明原文地址 https://www.cnblogs.com/star-wind/p/9581055.html:谢谢

我的github,欢迎拍砖

俄罗斯贵宾会 3

登录页面

俄罗斯贵宾会 4

帖子详情

俄罗斯贵宾会 5

评论

俄罗斯贵宾会 6

搜索谈论区

详细介绍

# 微信小程序 南大小百合功能基于南大小百合bbs,这个小程序相当于是个查询工具,信息都抓取于http://bbs.nju.edu.cn/

功能:

1,浏览bbs十大和各区精华帖

2,查看和搜索讨论区帖子

3,查看个人bbs主页

4,微信与小百合账号绑定

5,评论和点赞

6,推送每日十大内容

项目结构

│ app.js # 小程序登录

│ app.json # 小程序公共设置(页面路径、窗口表现、设置网络超时时间、设置多tab)

│ app.wxss # 小程序公共样式表

│ README.md # 小程序项目说明

├─image # 小程序图片资源

|

├─pages # 小程序文件

│ ├─about # 关于

│ ├─common # 模板

│ ├─detail # 帖子详情

│ ├─index # 我的

│ ├─login # 绑定小百合账号

| ├─newpost # 发帖

| ├─personalInfo # 个人主页

│ ├─switchzone # 选择查找谈论区

│ ├─topics # 主页面

│ └─zone # 浏览特定版面

└─utils # 小程序公用方法模块

│ ├─api # 网络通信接口

│ └─ group # 谈论区板块分组

└─wxParse # 富文本解析

└─wxSearch # 搜索

└─data # 本地数据


项目整体结构如上,这个demo是数据来自本地data,引用了wxParse富文本解析组件解析从网页抓取的HTML,wxSearch搜索组件用于搜索谈论区。下面详细介绍下小程序的实现:

UI界面:主界面是由swiper加scroll-view实现左右滑动并自适应高度,关键要将swiper-item包裹的内容height设置为100%

背景图片得用url

/*列表 list*/

.scroll-posts-list {
  overflow: auto;
  margin-top: 0rpx;
  background-image: url("http://bbs.nju.edu.cn/downloadk.gif");
  height: 100%;
}

获取用户信息:一进入小程序会提示你是否授权,调用wx.login和wx.getUserInfo绑定使用,得到code,encryptedData,iv,然后通过服务器得到openid并保存。也可以使用组件来获取用户信息,用户拒绝授权后也可以重新弹窗再次授权。

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:微信小程序俄罗斯贵宾会:南大小百合客户端

您可能还会对下面的文章感兴趣: