用MUI花两天时间快速开发『One·一个』App,兼容Android、iOS双平台

原创 李帅醒 教程 vue 485阅读 2018-04-10 14:07:16 举报

『One·一个』App

以下所有 API 均由产品公司自身提供,本人皆从网络获取。获取与共享之行为或有侵犯产品权益的嫌疑。若被告知需停止共享与使用,本人会及时删除此页面与整个项目。请您暸解相关情况,并遵守产品协议。

低仿 「ONE · 一个」 的App

前段时间由于业务需要快速开发App,所以上手了MUI,试着写了一个小项目作为练手,分享给大家,能力有限,大家多包涵。虽然现在还是以ReactNative为主,但是MUI应付一些小应用还是很方便的,话不多说,先上图。
开屏引导

阅读界面

音乐播放界面

每日一图

项目介绍

使用HBuilder作为开发打包工具,基于MUI框架开发,能同时运行在Android、iOS环境下。
实现了「ONE·一个」绝大部分的功能点,涵盖了图文、阅读、音乐、电影四大版块。

项目运行

阅读

获取最新 readinglist

url:http://v3.wufazhuce.com:8000/api/channel/reading/more/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

json 解析:

data 是一个数组,size是10,也就是每次只返回十条数据,当我们想获取更多数据就需要把最后数组最后一条的id传递过去。
如:

  • 阅读:我们需要使用该 json 字段中的 item_id 获取该阅读的详细信息

阅读详细信息

内容信息 url:http://v3.wufazhuce.com:8000/api/essay/ + item_id + ?channel=wdj&source=channel_reading&source_id=9264&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

示例:http://v3.wufazhuce.com:8000/api/essay/2668?channel=wdj&source=channel_reading&source_id=9264&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

影视

获取最新 movielist

url:http://v3.wufazhuce.com:8000/api/channel/movie/more/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

json 解析:

data 是一个数组,size是10,也就是每次只返回十条数据,当我们想获取更多数据就需要把最后数组最后一条的id传递过去。
如:

  • 电影:我们需要使用该 json 字段中的 item_id 获取该电影的详细信息

电影详细信息

内容信息 url:http://v3.wufazhuce.com:8000/api/movie/detail/ + item_id + ?channel=wdj&source=channel_movie&source_id=9240&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

示例:http://v3.wufazhuce.com:8000/api/movie/detail/1202?channel=wdj&source=channel_movie&source_id=9240&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

音乐

获取最新 musiclist

url:http://v3.wufazhuce.com:8000/api/channel/music/more/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

json 解析:

data 是一个数组,size是10,也就是每次只返回十条数据,当我们想获取更多数据就需要把最后数组最后一条的id传递过去。
如:

  • 音乐:我们需要使用该 json 字段中的 item_id 获取该音乐的详细信息

电影详细信息

内容信息 url:http://v3.wufazhuce.com:8000/api/music/detail/ + item_id + ?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

示例:http://v3.wufazhuce.com:8000/api/music/detail/2361?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

<h2 id="music_url">音乐地址 Api</h2>
由于我太渣,没有找到one音乐中的播放地址,也没解决虾米音乐的播放地址,暂时使用QQ音乐的接口凑合。

搜索 url https://music-api-jwzcyzizya.now.sh/api/search/song/qq?key=李健&limit=5&page=1

json 示例:

播放链接:https://music-api-jwzcyzizya.now.sh/api/get/song/qq?id={id}

示例:https://music-api-jwzcyzizya.now.sh/api/get/song/qq?id=000PLHrM2luXiz

json 示例:

<h2 id="onelist">获取最新图文</h2>
此 url 获取所有近期图片列表,返回 json 中的的数字作为参数传入后面的 url 中

图文url http://v3.wufazhuce.com:8000/api/onelist/idlist/?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

将上一个 json 中的 data 字段的值放入 url 中,并拼接好相应的参数
url:http://v3.wufazhuce.com:8000/api/onelist/ + 上面获取的data + /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

示例:http://v3.wufazhuce.com:8000/api/onelist/4739/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android

json 示例:

关于

关于界面

关于界面

  • 用到MUI提供的方法,可以直接对图片精选保存。
评论 ( 1 )
最新评论