这篇教程的目的是通过通俗易懂的流程讲解，绕过所有对新手很不友好的大坑，实现对于uniapp的超快速入门。目的主要还是避免很多官方坑，毕竟我刚开始研究的时候，是真的摸坑摸到头皮发麻，几个小时几个小时的消耗。很多网上的文档，官方的案例，全都是有问题的，这对于新手而言是个非常沉重的打击。就基于这样的原因，我决定写这个入门必看的教程。不过我，已经初步的摸坑完毕了，所以决定整理这个教程。
uni-app是一个使用Vue.js开发跨平台应用的前端框架，可以通过它来制作小程序，h5手机网页，安卓app，苹果app等，只要会vue，了解基础的页面布局css知识，就可以轻松上手。
怎么创建一个新的页面模板呢，很简单，就是在pages里面，或者其下级文件创建一个vue文件，然后在pages.json文件中pages数组中定义
"usingComponts":true,"condition":{//模式配置，仅开发期间生效"current":0,//当前激活的模式(list的索引项)"list":[{"name":"表单",//模式名称"path":"pages/component/form",//启动页面"query":""//启动参数}]}上面这段代码就是pages.json往下翻就可以看到。然后开始回到最初的问题，底部导航应该怎么实现，答案也在pages.json里面，使用如下的代码，定义底部导航，tabBar这个数组和pages是同级的，可以加在pages.json尾部。
"tabBar":{//"color":"#ffffff",//未选中的菜单文字颜色"selectedColor":"#1cbbb4",//选中时的菜单文字颜色"borderStyle":"black","backgroundColor":"#ffffff",//背景"list":[{"text":"首页","pagePath":"pages/post/home","iconPath":"static/tabbar/home.png",//图标默认"selectedIconPath":"static/tabbar/home_cur.png"//页面被点击选中后},{"text":"发现","pagePath":"pages/find/home","iconPath":"static/tabbar/find.png","selectedIconPath":"./static/tabbar/find_cur.png"},{"text":"分类","pagePath":"pages/post/category","iconPath":"./static/tabbar/category.png","selectedIconPath":"./static/tabbar/category_cur.png"},{"text":"我的","pagePath":"pages/user/home","iconPath":"static/tabbar/user.png","selectedIconPath":"./static/tabbar/user_cur.png"}]}这样才是正确的底部导航实现方式。
更多的组件就看ColorUI的默认模板文件，去里面自己拼成需要的页面就好了，如果没有自己需要的布局，那么就只有用css知识自己敲了。
要实现下拉刷新和触底刷新，其实很简单，就在pages.json的pages数组内，对需要实现效果的页面加两句代码，大概如下：
{"path":"pages/post/home","style":{"enablePullDownRefresh":true,//开启下拉刷新"onReachBottomDistance":300//触底刷新，距离底部多少，开始执行}},然后在已开启的页面上，加如下的方法：
onPullDownRefresh(){let_this=this;//用户下拉操作时执行的方法},onReachBottom(){//触底后执行的方法，比如无限加载之类的},然后在用的时候，就会发现下拉刷新的那个圆球，是不会自动消失的，所以下拉刷新还有一个关闭方法。
uni.stopPullDownRefresh();而弹窗刷新的方法实现，则是如下的代码：
//显示弹窗出来刷新的方法uni.showLoading({title:'加载中...',mask:true});//关闭弹窗刷新方法uni.hideLoading();5.页面跳转参数传递的实现，uni-app中，要打开下级页面和传递页面参数，方法如下：uni.navigateTo({url:"跳转的路径地址"})如果要传递参数，以传递id为例：
uni.navigateTo({url:"postid=12";})在post这个页面中，接收方法如下：
onLoad(res){this.cid=res.cid;},onLoad是一个判断页面是否加载完成的方法，res中就携带了浏览器的参数，所以通过res.id的形式，就可以从参数中获取id的值。
在进行这个操作的时候，先下载以下文件，属于现成了封装完的方法：
把解压出来的utils拖进项目，然后再页面上引入的方法如下：
varAPI=require('../../utils/api');varNet=require('../../utils/net');使用的方法则是如下，首先是GET方法：
Net.request({url:"请求地址",method:"GET",success:function(res){//请求成功后执行的方法},fail:function(res){//请求失败后执行的方法}})然后是POST方法：
比如我新建一个文件叫做cu-header.vue，里面写了我自己的头部代码，那么我就可以在main.js里面添加两行。
importcuheaderfrom'./colorui/components/cu_header.vue'Vue.component('cu_header',cuheader)不过也记得，在cu_header.vue'这个文件，把最外层那个叫做cu-custom的class，改名为cu_header，然后使用的时候，也是同样的把cu-custom替换为cu_header，用法类似如下（根据实际情况改变）。
{"path":"pages/friend/chat","style":{"app-plus":{"bounce":"none","titleNView":{"buttons":[{"text":"\ueb9f","fontSize":"20","fontSrc":"/static/iconfont.ttf",}]},}}},app要动态的设置导航栏的参数，使用官方提供的代码默认如下：
正确的方式是额外加如下代码，设置buttons参数：
需要定制app开发，或者想要学习讨论的，可以加本博客交流群：675025692