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

书影o流风回雪-晚来天欲雪_700x.jpg

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 接口进行加密，如果有知道的可以留言告诉我|ू･ω･` )。

接口说明

通过汉服荟产品沟通，该应用可以发布开源，可使用它们测试站点 api5.laosha.net。

保持学习的态度，不污染他人数据。

考虑到它们服务器压力和接口正在变更。为方便应用预览使用 汉服荟Easy-Mock APP 4.7.0 模拟在线随机数据。

• 修改请求地址host，在 api\request.js 和 api\CommonServer.js 两个文件内。
• 汉服荟Easy-Mock接口文件压缩包
• 汉服荟项目Iconfont文件压缩包

汉服荟Easy-Mock APP 4.7.0 RestfulAPI接口

原型完成程度

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

（活动报名、发布日常等、IM聊天功能、商城购物。这些涉及他人数据敏感操作就不添加了。）

项目预览

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

项目说明

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

uni_hanfuhui_mini
┌─api                   RestfulAPI接口服务目录 
├─components            复用组件目录 
├─pages                 业务页面文件存放的目录
├─static                存放应用引用静态资源的目录 
├─store                 全局vuex数据仓库文件目录 
├─style                 全局公共样式文件目录 
├─unpackage             存放编译生成的文件目录 
├─utils                 常用函数工具文件目录 
├─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

好仙一颗丹药-【惊鸿】
书影o流风回雪-晚来天欲雪_500x500.jpg

总结

主要微信小程序，条件编译打包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 2.4.6.20191210 版编译。

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

祝愿DCloud越做越好