uni-app仿制汉服荟-基于APP 4.7.0原型

J_TsMask
1,240 阅读4分钟

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

起步

  1. 通过 uni-app 官网快速上手，下载HBuilderX-APP版，亲身体验下uni-app。
  2. 看完 《uni-app官方教程》 ，出品人：DCloud，课时：共3节。
  • 如果你熟悉h5，但不熟悉vue和小程序，建议看完这篇 白话uni-app 。
  • uni-app使用的是vue的语法，不是小程序自定义的语法，不需要专门去学习小程序的语法。
  • DCloud与vue合作，在vue.js官网提供了免费视频教程。

以上是uni-app官方推荐的学习方法，我个人也是怎么从vue开发到uni-app开发的，那时还是1.2.1版，还没现在怎么多教程填坑。

应用说明

汉服同袍主要的APP应用有 爱汉服 和 汉服荟 这两款比较好的的汉服社区APP。

  • 爱汉服 致力于打造一个汉服文化宣传、汉服购买、汉式生活分享于一体的平台。APP应用包(๑◡๑)可以知道这个APP使用 uni-app 开发，里面主要使用 nvue 页面和 webview 加载为主,有深色模式、简繁切换。

  • 汉服荟 是一个以汉服同袍为中心的垂直社区,可以分享汉服日常,发布汉服摄影,怎么区分山寨,汉服怎么穿。APP应用包为原生混入 React Native 开发，里面动态分享、汉服美图、汉服视频、汉服活动等功能。

编码准备

使用 uni-app 开发小程序/APP，汉服荟APP 4.7.0 为原型。内容数据来自应用 反编译 和 数据抓包，数据格式JSON。
观察到 汉服荟 官网从api4到api5的变化，接口也有部分开始变更。由于JavaScript的RSA加密方式无法配合 JAVA 的 RSA (RSA/ECB/PKCS1Padding) 加密方式，我只能使用官网提供的 RSA 接口进行加密，如果有知道的可以留言告诉我|ू･ω･` )。

接口说明

为方便应用预览使用在线模拟应用数据，原先的版本使用Easy-Mock，更新版使用RAP2。

该项目没有开发后端服务，有兴趣可以自行开发后端接口对接。

原型完成程度

  • 动态、关注、发布列表显示
  • 荟吧、摄影、视频、话题、文章、活动列表显示
  • 评论、点赞、回复功能
  • 个人信息、背景封面、个人头像、密码修改
  • 关注、黑名单、排行榜、处罚公示、汉币兑换、签到
  • 视频播放、图片预览

项目预览

汉服荟-APP启动封面 汉服荟-APP 汉服荟-H5 汉服荟-微信小程序 uni统计-入口页统计

项目说明

从项目创建到总体完成大概弄了一个月左右，当然包括接口来源和一些素材图表。

cmd_hanfuhui_mini
┌─api                   RestfulAPI接口服务目录 
├─components            复用组件目录 
├─pages                 业务页面文件存放的目录
├─static                存放应用引用静态资源的目录 
├─store                 全局vuex数据仓库文件目录 
├─style                 全局公共样式文件目录 
├─unpackage             存放编译生成的文件目录 
├─utils                 常用函数工具文件目录 
├─config.js             配置网络地址
├─main.js               Vue初始化入口文件 
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期 
├─manifest.json         配置应用名称、appid、logo、版本等打包信息 
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

又拍云图片后缀跟压缩显示

  • 头像100：_100x100.jpg
  • 头像200：_200x200.jpg
  • 压缩预览图：_min.jpg/format/webp
  • 高斯模糊图：_500x200.blur.jpg/format/webp
  • 列表缩放图：_200x200.jpg/format/webp
  • 列表缩放图：_250x250.jpg/format/webp
  • 查看大图：_700x.jpg/format/webp
  • 查看原图：_0.jpg/format/webp
  • 保存原图：_0.jpg
  • 视频封面图：_850x300.jpg/format/webp

好仙一颗丹药-【惊鸿】

总结

主要微信小程序，条件编译打包APP并调整H5。开发APP端的建议使用 nvue 页面结构同 vue, 由 template、style、script 构成。即将推出的v3大幅度增强原生渲染APP。查看 uni-app 跨端开发注意事项 ，部分跨端使用条件编译调整。

已发布到uni-app 插件市场，欢迎给个五星好评。
mescroll -支持uni-app的下拉刷新上拉加载组件 v1.1.9（2019-12-16）
uParse修复版-html富文本加载 v1.1.0（2019-06-30）
SwipeAction 滑动操作 v1.1.0（2019-12-04）
感谢以上组件的作者，以上插件可能都已经更新，做出大量优化。

项目仓库Gitee 示例应用 HBuilderX 3.1.13.20210514 版编译。

最后推荐看完 uni-app 官网介绍。

祝愿DCloud越做越好

avatar
文章
阅读
粉丝