2020年uniapp学习手记-基础篇，和我一起学uniapp

uniapp基础部分

有文档还看什么教程？

官网文档非常的详细，但是如果没有接触过的新人看文档其实是没法学的，因为他不知道要完成一个开发，需要学习那些知识点，而且如何正确的使用文档也不清楚

本次内容主要是为后面的实战课打基础，如果你会的话完全可以不看，也大可不必说什么风言风语，你会不代表别人都会，说这种话真的让人挺难受的

其实我昨天晚上凌晨已经录了一套视频是完全现场看文档录的，效果不好，还是得写个简单的文档来录（肝👍）

本次的内容主要就是带你看文档，没错就是看文档，让你学会看文档，并且有个整体的认知

开发工具

首先uniapp可以使用命令行的方式开发，然后选择你喜欢的开发工具，但是大可不必，HBuilder X完全能满足需求，记得下载app开发版本的

官方称可以同时编译十个平台，但是如果你想让每个平台都是同样的体验的话，估计是要花很多的功夫的；即使你只需要开发微信小程序一个平台，uniapp也是一个很好的选择

我希望你是使用chrome浏览器的，新edge浏览器也可以，如果你对浏览器调试感兴趣的话还可以看我总结的浏览器调试技巧

你还可以在电脑上安装一个 Android的虚拟机用来做安卓端的调试，安装小程序开发工具（一般安装微信的就可以了）

前置知识

你最好能有vuejs的基础知识，如果没有也别怕,可以跟着我的vue基础教程学习，花不了多少时间

认识一下官方文档

• 介绍 ；这个部分的内容更像一个说明书，可以看一下
• 框架；这个部分更多的是关于整个项目的配置方面的东西
• 组件；项目中的页面实现主要看这个部分
• API；项目中的逻辑功能主要看这个部分
• unicloud；小公司利器，后面会专门讲

意图

首先你一定要明确自己的意图，使用uniapp的目的，不能为了会什么技术去做什么东西，要为了实现什么功能去学习技术

• 如果你是想开发精美的移动app 你完全可以使用原生就行开发 flutter也是更好的选择

• 如果你只是想开发小程序，uniapp也是一个非常好的选择

• 如果你想快速上线一个 小程序+app的应用，你需要提前做好填坑的心理准备

  • uniapp继承了weex那一套，再app端你可以使用nvue渲染，纯原生渲染

我们认识一下项目

打开manifest.json可以对我们的项目进行配置，不过目前你也不能配置个啥，可以设置一下h5网页的名称或者是app端的图标等等，后面需要配置的地方再说

page

pages.json是项目的页面配置，可能是我们前面最多配置的地方，pages数组里面放置的就是一个个页面，第一项配置就是默认打开程序的页面，后面如果我们调试哪个页面，为了方便可以把他放到第一个位置

tabBar

很多应用基本的标配

配置它也很简单，我们先创建三个页面来试一试，在pages文件夹鼠标右键可以选择新建页面

根据这个方式我们新建content、list这两个页面，每个页面的文件中我们就随便写个文本区别就行了，uniapp的页面结构和vuejs是几乎一样的

然后我们在static目录下放置一个图标icon.png

在page.json中配置我们的tabBar，可以通过color和selectedColor来设置默认和选中的字体颜色，list里面就是放置的具体每个选项，每个选项里面需要配置pagePath页面链接,iconPath默认图selectedIconPath选中以后的图标，text文本

"tabBar": {
   
	"color": "#7A7E83",
	"selectedColor": "#f55f25",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
   
			"pagePath": "pages/index/index",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/icon.png",
			"text": "主页"
		},
		{
   
			"pagePath": "pages/list/list",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/icon.png",
			"text": "列表"
		}, {
   
			"pagePath": "pages/content/content",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/icon.png",
			"text": "内容"
		}
	]
}

看下效果

导航栏

文档

当页面的默认导航栏不满足我们的需求的时候，我们可以自定义导航栏，只需要在这个页面的page.json栏目设置一下就可以了

{
   
	"path": "pages/index/index",
	"style": {
   
		"navigationBarTitleText": "uni-app",
		"navigationStyle":"custom"
	}
},

此时我们的导航栏就不见了，可以使用官方的组件，也可以自己实现，详情看下方的使用组件

使用组件

uniapp的生态还是不错的，除了官方的 uni-ui插件市场还有很多现成的东西

我们下载一个这个插件

新版本的uniapp是不需要做任何配置可以直接使用第三方组件的

直接在页面中使用这个插件，然后看看效果

<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>

使用微信小程序的组件

文档

有时候你需要的组件，uniapp插件市场没有，但是微信小程序组件里面有怎么办呢，uniapp也是可以使用小程序组件的

在根目录新建一个wxcomponents文件夹，里面继续创建一个wxcomdemo文件夹

创建以下几个文件

index.js

Component({
   
  properties: {
   
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
   
      type: String,
      value: 'default value',
    }
  },
  data: {
   
    // 这里是一些组件内部数据
    someData: {
   }
  },
  methods: {
   
    // 这里是一个自定义方法
    customMethod: function(){
   }
  }
})

index.json

{
   
  "component": true
}

index.wxml

<view class="inner">
  {
  {innerText}}
</view>
<slot></slot>

index.wxss