• uni-app开发音乐电子书库


     

     

    uni-app:一套代码,多端发布。可以发布到微信小程序、安卓app,ios api,h5页面。听了是不是很爽。

    uni-app官网介绍

    首先上做的产品效果图

    音乐初始页面

     

    点击黑色半透明区域,即可进去音乐播放器页面

     音乐详情播放页面

     

    在该页面面板可以快进、快退、上一首、下一首切换歌曲,以及暂停音乐和下载音乐。

    个人中心

     

    个人中心页面登陆后可以扫码添加图书。

    然后可以进入图书页面即可查看到我们添加的图书。

    当然,您也可以通过微信扫描图上面的二维码,给与作者小小的打赏,以给出更多的好的作品。

    图书列表页面

     

    该Tab页面可以看到我们添加过的所有图书,点击图书即可进入图书详情介绍页面。

    图书详情页面

     

    该页面是图书的详情页面。

     

    小程序二维码

     

    大家可扫描微信小程序二维码体验效果。(个人账户不允许发布音乐类型小程序)

     

    安卓版本apk下载地址

    我的项目文件地址(码云)

     

    项目目录文件介绍

     

    好的,展示效果大家已看完。

     

    欢迎打赏

     

    大家可以进入码云地址下载该项目进行学习。

    码云地址链接

     

    顺带教大家怎么使用iconfont

    1. 进入iconfont官网:https://www.iconfont.cn/,  在里面找我们所需要的字体图标

    2. 最后下载整个包

    3. 解压该下载zip文件,需要将里面的ttf文件文件转为base64格式

    这里我们借助网站工具: https://transfonter.org/

    ttf转base64文件

     

    最后拿到里面的.css后缀文件,里面已经包含了转码后的字体文件。这样我们就不需要再iconfont.css文件中导入ttf、ttf2等字体文件。

    4. 最后只需要将转换后的 @font-face{ }  替换掉原本iconfont.css文件里面的@font-face里面的内容。

    这样,我们就只需要单单引入iconfont.css文件即可使用字体图标了。

     

     

     

     

     

     

  • 相关阅读:
    Design Thinking 设计思维
    SELECT小技巧
    网站架构
    代码生成器重构
    如何监控你的鼠标
    Asp.net超轻异步框架
    跨线程修改UI控件
    NPOI组件
    浅析Linux计算机工作机制
    VS2010单元测试
  • 原文地址:https://www.cnblogs.com/burtyang/p/10224599.html
Copyright © 2020-2023  润新知