uni-app快速入门及使用总结 - 网站源码_资源分享

单纯如是说基本概念

uni-app虚拟化小流程架构，还能发售到app和web。宣传品两套标识符马营镇10个网络平台。

选用vue的句法，v-for，v-if，合作开发周期等；QQ小流程的api，但wx.换成了uni.，例如重定向网页uni.navigateTo();QQ小流程的合作开发周期，vue的合作开发周期在uni-app里头皆可选用。

有他们PCB好的模块（和QQ小流程的模块类似于），和非官方扩充的uni ui模块车轮提供更多选用。

可实用性网页方向做为路由器，询问处的式样，导航系统栏，顶部的tabbar等

状况管理工作能用vue的vuex，小流程的globalData，和邻近地区存储和网页状况。

有两个街道社区和两个应用程序消费市场，许多难题能到街道社区发问，对常用的模块都能到找出PCB好的车轮选用，有助于加速合作开发。

难道是跨端，总之有端推论。在uni-app里头叫作前提校对。读法：以 #ifdef 或 #ifndef 加 %PLATFORM%结尾，以 #endif 结尾。

// #ifdef APP-PLUS…// #endif

以内是uni-app的基本原理如是说。

日常生活合作开发选用手册

┌─components uni-app模块产品目录

├─hybrid 存放邻近地区网页的产品目录，详见

├─platforms 存放各网络平台专用网页的产品目录，详见

├─pages 业务网页文件存放的产品目录

├─static 存放应用引用静态资源（如图片、视频等）的产品目录，注意：静态资源只能存放于此

├─common 存放公共工具JS

├─unpackage 校对文件

├─main.js Vue初始化入口文件

├─App.vue 应用实用性，用来实用性App全局式样和监听应用合作开发周期

├─manifest.json 实用性应用名称、appid、logo、版本等打包信息

└─pages.json 实用性网页路由器、导航系统条、选项卡等网页类信息

一般新建网页在page文件夹里头，然后到page.json实用性网页基本信息，具体可看uni非官方文档。这和小流程类似于，和vue路由器写好模块然后实用性路由器地址，匹配到相应的地址则显示相对应的模块。

文件就和合作开发vue模块基本一样了。模板，逻辑，式样，然后点击事件，watch监听，props传值，onLoad接收上一网页传过来的url参数，懂得vue就能够合作开发。

需要注意的是vue有些api在uni-app里头并不适用，https://uniapp.dcloud.io/vue-basics可查阅。

uni-app内置了vuex，能直接选用无需下载。

新建store文件夹，下面创建两个index.js文件。然后就能和vue一样了。

// store/index.jsimport Vue fromvueimport Vuex fromvuexVue.use(Vuex)const store = new Vuex.Store({state:{ },mutations:{ },actions:{ },modules: { }})exportdefault store

然后在main.js入口文件中引入。

import Vue fromvueimport App from./Appimport store from“./store/index.js”import uView from“uview-ui”;Vue.use(uView);import util fromcommon/util/util.js//工具Vue.prototype.$util = utilconst app = new Vue({ store, …App})app.$mount()

免去了下载安装，其他基本相同。然后是vuex的选用了，不会的能去看

传送文http://xiao_yu_shuo.gitee.io/yxc/blog/public/views/vue/vuex.html。

深度选用uni-app后归纳

从去年4、5月份开始正式接触uni-app到现在也已经半年多了，算是深度选用了，因为这么多时间里几乎都是选用uni-app合作开发项目。

为什么选择uni-app？

刚来公司选用的是mui和H5+合作开发手机app，算是首次接触DCloud的产品，觉得不怎么样，公司为什么会用这么不好的架构呢？但知道了前端，用js也是能合作开发app的，还是很棒的。用了接近半年的时间吧，H5+的api，调用原生能力比如扫码，蓝牙等能迅速查看文档熟练选用，mui的移动端ui架构也是和vant一样精通了。

安卓更新到了安卓10，mui也早就不更新维护，DCloud非官方也推荐选用uni-app合作开发，同时要合作开发新项目，app为原生+H5混合合作开发，小流程合作开发，所以决定用uni-app来尝试。也想过用rn，flutter，但学习成本太高，同事也都没用过（其实我也不会），又能虚拟化，写两套标识符小流程也做了，开会讨论，坑多，但也能接受，不行就原生也应用程序，前端来调用呗。就这样决定了用uni-app做为技术方案来做以后的项目合作开发。

万事结尾难uni文档

之前没接触过uni，第一次接触是做公司主要项目难免有点紧张刺激。但之前也还是听说过单纯了解过uni的，毕竟宣传品一套标识符10个网络平台，想想都觉得敲标识符不会累了。

项目基础架构由大佬同事搭建好，PCBuni请求拦截响应，常用util方法，vuex，所需要实用性的XXX，然后我git clone下面就能愉快地合作开发了。

第一天先过一遍文档。毕竟有啥难题还是要找文档查阅的。

uni如是说分类，主要是安装选用，vue基础句法教程，nvue基础句法教程，注意事项及合作开发技巧性能优化。uni架构分类，主要是实用性文件如是说，实用性文件manifest.json，网页文件page.json（主要），入口文件mian.js和app.vue文件，然后如是说合作开发周期，网页通讯（emit,。uni模块分类，所谓模块呢，是写在template里头的标签，如视图容器view,text,表单模块input,button,媒体模块video,audio等，就不一一列举了，主要说的是uni ui，也是uni官网他们扩充PCB给大家选用的模块，这是有助于大家合作开发的。api分类，这个是主要要记住的，也是合作开发中最多选用的，就和处理数组一样，你肯定要知道数组的方法吧，添加push，删除pop。而这些api和小流程api类似于，网络，路由器，缓存，位置，媒体，设备等等。通过这些api我们能处理业务逻辑。

大致了解，开干！

由于会vue，所以直接是根据设计稿把静态网页写好，运行到浏览器调试，运行到手机上看效果，主要是做app所以但浏览器和手机上有兼容难题式样难题区别，所以效果还是在手机上确定，其实效果是差不多的，能在浏览器里头实现，最后再到手机上微调。不过有些api只适用于app，所以必要还是要到手机上调试。

评价

uni-app确实给合作开发带来了加速的体验，但坑也不少，所以不吹不黑，希望能做得更好。

合作开发小流程

uni合作开发小流程是没有什么难题的，比用原生体验好不少，除非你原生能力很强，性能优化很懂，不然用uni合作开发小流程确实是不错的选择。

合作开发H5

uni合作开发H5手机版也是很能，合作开发中后台管理工作系统，pc端官网就不用想的。合作开发H5和用vue合作开发的区别主要在于vue路由器的选用，uni只能实用性page.json,没有路由器守卫，路由器传值的功能，相对而言不太友好，但对vue路由器不太熟悉，但熟悉小流程的人来说缺是容易上手的。再然后对npm上的应用程序库不是很友好，几乎是摆脱了npm，依赖于自家的应用程序消费市场。

合作开发app

uni合作开发APP，先说结论，不太建议用uni合作开发app，除非是迫不得己。uni能用来合作开发单纯的，功能不太复杂的app。因为uni合作开发app体验上是不太行的，哪怕你优化的在好也不如原生，其次uni无法实现许多原生才能实现的功能，所以还要原生的同事提供更多应用程序，比如上传PPT文件等。小公司，小合作开发比如我，就正在用uni合作开发app。不过也还行吧，大部分是一些展示的内容，uniPCB好了许多api，能直接选用，也是比较方便的。