这篇教程的目的是通过通俗易懂的流程讲解，绕过所有对新手很不友好的大坑，实现对于uniapp的超快速入门。目的主要还是避免很多官方坑，毕竟我刚开始研究的时候，是真的摸坑摸到头皮发麻，几个小时几个小时的消耗。很多网上的文档，官方的案例，全都是有问题的，这对于新手而言是个非常沉重的打击。就基于这样的原因，我决定写这个入门必看的教程。不过我，已经初步的摸坑完毕了，所以决定整理这个教程。

不过学习的前提是，必须要有css的基础，vue的入门级技能，第一次写完可能教程还不完善，有疑问就评论留言，我会补充上来。

uni-app是一个使用 Vue.js开发跨平台应用的前端框架，可以通过它来制作小程序，h5手机网页，安卓app，苹果app等，只要会vue，了解基础的页面布局css知识，就可以轻松上手。

然后，现在开始上手吧，教程很详细，有疑问可以评论留言，而且也存在因为官方更新导致有些方案失效的可能，不过我有时间的话也会继续补充。

怎么创建一个新的页面模板呢，很简单，就是在pages里面，或者其下级文件创建一个vue文件，然后在pages.json文件中pages数组中定义

然而，这种方法造成的明显的问题就是，页面内部的js方法，效果会大量失效，甚至完全不可用。我这里弄了整整一两个小时才反应过来，这简直就是天大的坑，对于新手而言自定义底部还是稍微复杂。简单的方法应该是删除main.js里面这几个定义全局页面切换的代码，在创建页面模板之后，从pages.json中进行定义。

然后，通过上面那个截图，可以看到这样一句话“pages数组中第一项表示应用启动页”，这里千万别信它的邪。虽然第一项在安卓端调试时候确实是启动页，但是在微信小程序调试中，真正的启动页在这里定义。

上面这段代码就是pages.json往下翻就可以看到。然后开始回到最初的问题，底部导航应该怎么实现，答案也在pages.json里面，使用如下的代码，定义底部导航，tabBar这个数组和pages是同级的，可以加在pages.json尾部。

这样才是正确的底部导航实现方式。

比如component/chat.vue，打开后，点击HBuilderX上面的运行，选择内置浏览器运行，就是个完美的聊天页面

再比如component/list.vue，列表组件的底下，就是聊天列表的案例。

然后还有更厉害的，plugin/indexes.vue，打开之后就是完全类似于微信联系人的索引，而且这个页面还提供了头部导航和搜索框的区块，都是可以随意照搬迁移的。

更多的组件就看ColorUI的默认模板文件，去里面自己拼成需要的页面就好了，如果没有自己需要的布局，那么就只有用css知识自己敲了。

要实现下拉刷新和触底刷新，其实很简单，就在pages.json的pages数组内，对需要实现效果的页面加两句代码，大概如下：

然后在已开启的页面上，加如下的方法：

然后在用的时候，就会发现下拉刷新的那个圆球，是不会自动消失的，所以下拉刷新还有一个关闭方法。

而弹窗刷新的方法实现，则是如下的代码：

如果要传递参数，以传递id为例：

在post这个页面中，接收方法如下：

onLoad是一个判断页面是否加载完成的方法，res中就携带了浏览器的参数，所以通过res.id的形式，就可以从参数中获取id的值。

在进行这个操作的时候，先下载以下文件，属于现成了封装完的方法：

把解压出来的utils拖进项目，然后再页面上引入的方法如下：

使用的方法则是如下，首先是GET方法：

然后是POST方法：

将文章类的富本文内容赋值给article字段就行了。

比如我新建一个文件叫做cu-header.vue，里面写了我自己的头部代码，那么我就可以在main.js里面添加两行。

不过也记得，在cu_header.vue'这个文件，把最外层那个叫做cu-custom的class，改名为cu_header，然后使用的时候，也是同样的把cu-custom替换为cu_header，用法类似如下（根据实际情况改变）。

这里是个非常无语的地方，官方的文档看了等于没看，而且还会严重的带误，让你认为发现了一个bug，并且对这个bug无可奈何。这里的坑是指动态的设置导航栏的参数，官方文档说buttons会继承uni.setNavigationBarColor的设置，实际上是瞎几把乱讲，在APP环境下buttons的颜色根本不会继承上述设置，基本等于完全无效。比如我要使用系统自带导航栏，并且右侧需要一个图标按钮，那么我在page.json中的配置如下：

app要动态的设置导航栏的参数，使用官方提供的代码默认如下：

这里看官方的说明，是这么说的，实际上这里也没有完全错，在h5下确实会继承设置，但是app下无效：

正确的方式是额外加如下代码，设置buttons参数：

uniapp连接webSocket实例，收发数据存储到本地，详细教程uniapp对接oss，实现图片上传uniapp数据post请求后台无法接收问题uniapp苹果ios端免签打包带分发，转换思路玩法uniapp实现国际化多语言切换，原理说明

需要定制app开发，或者想要学习讨论的，可以加本博客交流群：675025692