微信小程序:图书馆助手||笔记

版权声明:仅供参考,请勿深度复制。愿世界对我们温柔以待 https://blog.csdn.net/u010913414/article/details/81772329

之前写过一个demo,现在又改了点东西。

这是之前的样子。

我都忍不住吐槽自己了。。

相比之前主要有以下变动

1.数据库,存储到了ECS上,这次https可以用自己的了,毕竟学校不可能搞得。

2.引入了fontawesome库,加了点小图标

3.样式大换血,用了渐变

4.加了通告栏,后台接口,其实这是我用来推自习室的,哈哈,因为图书馆分管新开了一个自习室,就我一个人去,刚好今天情人节,我失恋了,就换个通告,嘿嘿!

5.改了小细节,加了分享,防止为空,温馨提示,收藏功能,热搜功能。

遇到的问题与解决:

1.从引入fontawesome开始,下载源文件,base64编码好像,看这个小伙伴的笔记

@import"pages/index/fontAwesome";

在app.wxss引入就好了

使用如下:

 <text class='fa fa-question-circle-o'></text>
/*这是图中的小问号*/

2.关于小程序列表样式问题

小程序不支持DOM操作,而且实时更新样式利用id无效,最后用的是三目运算,加上数据绑定,传过来指定样式,每个列表条例利用其index是唯一的来更改指定的样式!

小红心收藏:

fa-heart默认是灰色

fa-hearted是我写的,红色

currentTag:标识

index:循环下标

通过绑定事件,来确认当前条例被选中,来更改样式。

<view class="fa  fa-heart  {{currentTag == index ? 'fa-hearted' : ''}}"></view>

3.分享按钮

布局:Position:fixed

事件:微信的文档是open-type=‘share’

需要在对应的JS中加入:onShareAppMessage方法

 <button open-type='share'>...</button>
onShareAppMessage: function (res) {
        if (res.from === 'button') {
            // 来自页面内转发按钮
            console.log(res.target)
        }
        return {
            title: '分享给小伙伴',
            path: '/pages/index/index'
        }
    },

3.滚动通知,这个只用了css样式,和一个绑定的动态通告

4.所有数据,均为json格式。

5.数据会定期更新,重新爬取。

猜你喜欢

转载自blog.csdn.net/u010913414/article/details/81772329