vue+uniapp快速入门:https://www.kancloud.cn/zengqs1976/uni-app/1143144

前端开发文档

前端技术栈:

  • VUE: MVC框架 vue@2.6.3
  • Uniapp: uniapp官方跨端API调用 uniapp-api
  • html5plus: 原生API调用 html5plus
  • Uview: uniapp生态最好的UI库 uview
  • Weex: 富交互页面或主要页面等需要高性能的页面使用Nvue模式(内置weex) weex
  • Weex-ui: weex官方UI库 Weex-UiWeex-ui/
  • Webview: webview API文档 webview
  • Api请求库: flyjs

毫无疑问,vue+uniapp+uview+weex是目前在能保证不错的性能前提下开发APP或开发跨平台应用最快捷最省成本的方式

工程目录说明

  1. ├─App.vue ------------------------------------- vue跟组件
  2. ├─main.js ------------------------------------- vue入口js
  3. ├─manifest.json ------------------------------------- uni-app配置文件
  4. ├─package.json ------------------------------------- 项目依赖包
  5. ├─pages.json ------------------------------------- 路由配置文件
  6. ├─uni.scss ------------------------------------- uni-app全局scss文件,文件内的样式会编译到每个页面
  7. ├─vue.config.js ------------------------------------- vue webpack配置文件
  8. ├─treer.md ------------------------------------------项目目录说明
  9. ├─utils ------------------------------------- 工具函数
  10. | ├─emojimap.js ------------------------------------- 表情编译 解析函数
  11. | ├─index.js ------------------------------------- 全局工具函数
  12. | ├─nvueCommon.js ------------------------------------- nvue页面工具函数
  13. | ├─share.js------------------------------------- 分享
  14. | websocket.js ------------------------------------- websocket 工厂函数,支持断线重连
  15. ├─store ------------------------------------- 全局状态管理
  16. ├─static ------------------------------------- 静态文件
  17. | ├─uni.css ------------------------------------- 样式文件
  18. | ├─images ------------------------------------- 图片
  19. | ├─fonts ------------------------------------- 字体图标
  20. | ├─css ------------------------------------- css样式文件
  21. | ├─svga ------------------------------------- 直播礼物动画文件
  22. ├─platforms ------------------------------------- 平台页面目录
  23. ├─pagesC ------------------------------------- 订单、商品、直播页面目录
  24. | ├─chat ------------------------------------- 聊天
  25. | ├─wallet ------------------------------------- 钱包页面目录
  26. | ├─shop ------------------------------------- 店铺页面目录
  27. | ├─search ------------------------------------- 搜索页面目录
  28. | ├─order ------------------------------------- 订单页面目录
  29. | ├─live ------------------------------------- 直播页面目录
  30. | ├─integral ------------------------------------- 积分页面目录
  31. | ├─goodsComment ------------------------------------- 商品评论
  32. | ├─goods ------------------------------------- 商品页面目录
  33. | ├─forget ------------------------------------- 忘记密码
  34. | ├─diy ------------------------------------- 首页装修
  35. | ├─components ------------------------------------- 页面目录内的组件(编译小程序可以减少主包大小)
  36. ├─pagesB ------------------------------------- 页面目录
  37. | ├─webview ------------------------------------- webview
  38. | ├─shortVideo ------------------------------------- 短视频
  39. | ├─setting ------------------------------------- 设置目录
  40. | ├─seller ------------------------------------- 订单售后目录
  41. | ├─register ------------------------------------- 注册目录
  42. | ├─my ------------------------------------- 个人中心目录
  43. | ├─message ------------------------------------- 消息通知和IM页面
  44. | ├─member ------------------------------------- 会员目录
  45. | ├─login ------------------------------------- 登录目录
  46. | ├─coupon ------------------------------------- 优惠券目录
  47. | ├─components ------------------------------------- 组件目录
  48. | ├─comment ------------------------------------- 留言目录
  49. | ├─category ------------------------------------- 商品分类目录
  50. | ├─article ------------------------------------- 文章
  51. | ├─tabBar ------------------------------------- tabbar
  52. | ├─find ------------------------------------- 发现
  53. ├─pages ------------------------------------- tabbar页面
  54. | ├─tabBar
  55. | | ├─appLiveStream.nvue ------------------------------------- app端直播
  56. | | ├─appShortVideo.nvue ------------------------------------- app端短视频
  57. | | ├─find.vue ------------------------------------- 发现
  58. | | ├─h5mpLiveStream.vue ------------------------------------- 直播
  59. | | ├─h5mpShortVideo.vue ------------------------------------- 短视频
  60. | | ├─home.nvue ------------------------------------- home页面
  61. | | ├─index.nvue ------------------------------------- app端首页根组件
  62. | | ├─index.vue ------------------------------------- 首页根组件
  63. | | ├─message.vue ------------------------------------- 消息
  64. | | ├─myCenter.vue ------------------------------------- 个人中心
  65. | | ├─publishVideo.vue ------------------------------------- 发布短视频
  66. | | ├─components ------------------------------------- 组件
  67. ├─graceUI ------------------------------------- ui组件
  68. ├─config ------------------------------------- 项目配置文件
  69. | ├─appUpdateConfig.js -------------------------------- app更新配置
  70. | ├─constValue.js ------------------------------------- 项目长量
  71. ├─components ------------------------------------- 组件目录
  72. ├─api ------------------------------------- 接口

组件

组件详见上面的目录说明文档

常见问题

uni-app 整包升级/更新方案 uni-app 资源在线升级/热更新