[前端笔记023]uniapp入门

最新推荐文章于 2024-09-29 22:06:17 发布

Plusmile1

最新推荐文章于 2024-09-29 22:06:17 发布

阅读量102

点赞数

分类专栏：前端文章标签：前端 uni-app 微信小程序

本文链接：https://blog.csdn.net/qq_29589765/article/details/129101761

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

前言

接了个项目，可是我才刚学完三大件，Node还没学完
既然接了个项目，那就快速rush掉uniapp吧，顺带学点vue.js
参考视频BV1mT411K7nW
文档https://uniapp.dcloud.net.cn/

简介与基础

代码可跨端，常用IOS，安卓，微信小程序和正常网页
有插件市场，使用自己的编程环境，HBuilder，再运行中可以使用自己浏览器，也可以安装内置浏览器插件；可以关联微信开发工具，预览页面，微信工具中的安全选项要去掉
组件库的东西更加兼容
一个空白页面：

//vue2必须一个temlate和有且只有一个view根标签
<template>
	<view class="box">	
	</view>
</template>

<script>
	//vue固定写法
	export default {

	}
</script>

<style>
</style>

入门

需要切换调试页面时，在pages.json中，把需要调试的页面放到前面
pages.json中的标题样式可以在style中进行设置，没设置则遵循globalStyle，文档：https://uniapp.dcloud.net.cn/collocation/pages.html#style
view可以当div使用，块元素；
text当span使用，行元素；text有属性，select，表示是否可以选中，用于复制，不同平台属性值不一样。
icon标签，引入内置的图标，一般使用别的图标库，保证通用
单位由px换为rpx响应单位，总宽度为750rpx。
scroll-view，滚动栏，scroll-x，scroll-y，是否左右滚动/上下滚动，在标签中写即可
swiper，轮播，文档查看相关属性，在mode属性中进行定义
使用image代替img标签，image有默认属性，自定义看文档，在mode属性中进行定义
还有video/audio，在原生基础上增加了一些属性
camera属性，只能在小程序使用。
表单组件：选择其他的组件库，uniapp自带的有点少。
路由与页面跳转：navigator，类似a标签，但只能跳本地页面，实现就是不同页面之间的跳转，目标页面必须在pasges.json中注册；注意存在底部导航菜单时的跳转方式(属性)区别，navigateTo与reLaunch
底部导航栏：tabBar，在其list值中添加要跳转的页面名字/路径/图标字体等

vue2快速入门

基础

三个一级节点，template，script，style
vue2必须一个temlate和有且只有一个view根标签
template标签中通过{{变量名}}来获取数据，在script标签中通过data(){return {num:123}}的形式传递数据。
v-if=“条件判断句”/v-else-if/v-else，有这两个属性的标签必须紧挨，中间不能有空格以外的元素，条件判断句中的数据依然是在data中获取
v-show，这个是通过display:none来实现的，存在但不显示，v-if是直接不渲染
v-for，遍历数组/对象属性，注意+key属性
v-html往标签里加内容，比{{}}好的点是可以加html代码，还可以在小程序中渲染其不支持的H5标签
标签属性要使用动态变量时使用v-bind，动态地绑定一个或多个属性，或一个组件 prop 到表达式。 v-bind缩写为‘ : ’
v-on，简写@，可以关联一些函数，函数定义在methods中，methods在script标签中与data同级定义
style/class的绑定，v-bind:style/class=“{background:bgcolor}”，属性值可以按对象格式书写
v-model，双向绑定，多用于表单项，大部分用不了
form表单很常用，配合按钮的submit等属性使用
computed中可以运算，里面的函数相当于data中的属性，区别是可以运算；使用缓存，减少函数执行次数

组件

组件，方便复用，有全局注册和局部注册，一般使用局部注册
vue2需要3步走完成局部注册，uniapp使用了easycom精简了组件引入，直接当标签名使用即可
父组件引用时用属性传递数据，子组件通过props接收父组件传递的数据；props可以设置默认值，数据类型等信息
子传父，因为子组件一般不对数据进行处理，所以数据需要在父组件处理，在子组件中定义类似click的事件，让父组件引入即可。
引用子组件后还想使用原生事件，在事件后添加.native修饰符；使用sync修饰符可以简化父子互相传值的操作，当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。
vue的生命周期中会自动调用不同的函数，可以根据调用函数的不同，在不同的生命周期做不同的事；