uni-app初次学习使用

uni-app刚开始的印象

接触uni-app的原因

主要是找了公司实习，之前学的是vue，公司觉得我有培养的体质，就给我开了实习底薪，够最低生活还有点结余。让后我就来做uni-app项目了。哎，主要是去年考研去了，今年没考上也不想调剂，没有项目经验，实习经验，只能先找家靠谱的公司先学学技术去了。

uni-app感受

就是一个跨端的多平台开发
缺点，程序运行效率不如原生的开发（废话，不然原生开发就被淘汰了）
优点：学过vue上手很快，官方的示例案例很好，创建项目的时候有个Hello uni-app，初学者可以尝试下来用一下，你会发现基本所有的基础功能都有实现，作为初学者，那就直接照着官方的案例走就可以了

学习建议

如果有一定vue基础的同学，或者看视频要开倍速的，说明你已经可以开始通过看文档来学习了。视频可以先看两三集，看看项目最开始是怎么配置的，后面就可以通过结合官方案例和文档来自己学者玩。

uni-app学习记录

终于开始说代码的事情了

项目目录介绍

pages存放的是页面文件，static存放的是静态文件（例如图片），unpackage里面好像是打包的，暂时没用到，pages.json里面是页面路径文件，有点像vue里面的router,里面可以使用tarbar也是微信里面的东西。

数据绑定和按钮绑定

官方的案例上面说的很清楚就是和vue是一样的。v-bind: （简写为:）还有差值表达式也是一样的{{}}

页面直达

有时候我们不想写跳转事件，也不想改变首页页面的顺序，就可以通过在pages.json 里面设置 condition 配置，在微信小程序编译器里面通过设置编译模式切换页面直达

"condition":{
		//当前激活的模式
		"current":0,
		"list":[{
			"name":"swiper",
			"path":"pages/detail/detail"
		},{
			"name":"test",
			"path":"pages/test/test"
		}]
	}

input使用

<input :value="detailText" type="text"/>

可以绑定，但是是单向数据绑定，即修改数据不能改变数据源。如果要使用双向数据绑定

<input v-model="detailText" type="text"/>

控制台输出

测试了一下,log可以使用，但是官方有这句话：

注：App 端 debug 方法等同于 log 方法。

所以可能在真机编译上的时候，要用debug，但是这些都是小问题。

插件安装

先把常用的插件安装一下，但是感觉暂时还用不到，先记录一下遇到的坑：less编译插件安装

为什么要手写css/less

我不太清楚前端写ui是否都是通过ui框架来写，但是我用过element-ui，用了之后你就知道什么叫做带着镣铐跳舞，element-ui只是实现了些基本功能，但是如果遇到特殊的需求的时候，你就得自己写css。简单来说就是ui框架只是简化重复内容的编写，但是前端必须要回自己写css。

如何配置Hbuilder中的less

插件市场搜索安装less，然后将打开less的编辑页面。

				"extensions": "less",
				"key": "ctrl+s",//保存关键快捷键，和保存文件设置一个键位
				"showInParentMenu": false,
				"onDidSaveExecution": true//快捷键启用

还有一个坑，就是less文件要能成功编译，就是不能有语法错误，我之前就是less有语法错误，没有成功编译，折腾了半天之后发现是我less文件没写对

css文件无法在微信小程序中实现

源代码：

		<view class="content">
			<text>{{detailText}}</text>
			<input v-model="detailText" type="text"/>
			<button type="default" @click="clickTest()">点击事件</button>
		</view>

解决办法：在外面包裹一个page

		<page>
		<view class="content">
			<text>{{detailText}}</text>
			<input v-model="detailText" type="text"/>
			<button type="default" @click="clickTest()">点击事件</button>
		</view>
	</page>

然后css文件就可以了，不知道为什么

路径跳转

uni-app提供了一些路由跳转的方法
navigateTo不能跳转到tarbar的页面，跳转到其他页面不报错

methods: {
			routerJump(){
				uni.navigateTo({
					url: '../detail/detail'
				})
			}
		}

然后也可以携带参数

methods: {
			routerJump(){
				uni.navigateTo({
					url: '../detail/detail?name=uniapp&id=1'
				})
			}
		}

但是这个不好，因为是用相对位置跳转路由的，如果项目文件位置出现了变动，那么就要全部都改一遍。
然后查了很久的csdn，最后发现好像是多端开发，就没有router的必要，比如微信小程序的tarBar。所以要我们自己写路由跳转的方法。

`${}‘语法，注意是反引号，我这里makedown写不出来。注意是反引号
语法介绍

然后具体模拟的方法就看这个了介绍的很详细，而且不熟练ES6语法的也可以借此机会熟悉一下，我就做到第一步，基本解决了我的问题。今天就学这么多，累了。