语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

1、微信小程序

1.1、wx 小程序 工程目录

其中，

pages目录/index目录【必有】：
index.js 编写业务逻辑 【初始数据，生命周期函数】
index.json 编写配置
index.wxml 编写模板 【可理解为本页html】
index.wxss 【可理解为本页css】

1.2、wx 小程序 标签

直接输入关键词敲回车，连尖括号都不需要就可以标签补全

<div> —> <view>

<img> —><image>

<span> —> <text>

<a> —> <navigator>

1.3、wx 小程序 数据绑定

1）初始数据写死

在index.wxml 引入变量用 {{}}，参见 flask 向 template 中嵌入变量的写法

//index.js
Page({

  
 //页面的初始数据
  
  data: {
    name:'cold'
  },
 
  //生命周期函数--监听页面加载
  
  onLoad(options) {

  },
    //...
})

2）渲染时修改初始数据

//index.js

 //页面的初始数据
  data: {
    name:''
  },
 
  //生命周期函数--监听页面加载
  //setTimeout(()=>{},2000)
  onLoad(options) {
   
    setTimeout(()=>{
      this.setData({name:"sherry"})
    },2000)
  
  },

1.4、wx 小程序条件判断

标签有这样一个属性 wx:if 可用于条件判断

//index.wxml
<view wx:if="{{f}}">{{name}}</view>

1.5、wx 小程序 列表渲染

渲染 | 遍历一组数据 |for循环

以下面 list 为例，

//index.js
list:[1,2,3,4,5]

1）item作为关键词，可以筛选出wx:for`每个成员变量的 value

//index.wxml
<view wx:for="{{list}}">{{item}}</view>

也可以不用item，说明一下用谁，比如说明用it

//index.wxml
<view wx:for="{{list}}" wx:for-item:"it">{{it}}</view>

2）index 作为关键词，可以遍历索引

//index.wxml
<view wx:for="{{list}}">{{index}}</view>

同理，也可以 wx:for-index:"ID"说明一下，直接用ID或其它命名代替。

2、uni-app

<

2.1、uni-app 规范

1）页面文件遵循 Vue单文件组件（SFC）规范

body | script | style -> template | script | style

参见 H5 单页面写脚本和样式的理解

2）组件标签靠近小程序规范

标签和微信小程序同

<div> —> <view>

<img> —><image>

<span> —> <text>

<a> —> <navigator> ×     <a> —> <uni-link>

3）接口能力（JS API）靠近微信小程序规范

4）数据绑定及事件处理同VUE.js 规范

（妹学 Vue）

5）为兼容多端运行，使用 flex 布局

2.2、uni-app 特色

• 条件编译
• App 端的 Nvue 开发
• HTML 5+

HT5+ ，HT5+app，这是个什么东西？

HbuiderX ，DCLOUD 公司自家编译器，高度支持 uniapp，组件补全提示只需要输入几个相关不连续的字符就可以 。

2.3、uni-app 模板语法

index.vue 文件中包含三个大的标签，写模板，写脚本，写 样式，很好理解。

其中<template></template>的子标签只能有一个。

<template>
	<view class="container">
	
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				
				
			}
		},
		methods: {
			
			
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

2.4、uni-app 数据绑定

什么是动态绑定？

组件内有些值绑定的不是字符串，这里绑定的是数据，而数据是动态。

为什么要动态绑定？

原生组件，属性值呢只能被解析成字符串，想要绑定变量，就要用到动态绑定，而这也是学 uni-app 原因之一。

何为组件？

标签。

2.4.1、一般的数据绑定

例如，这里将content变量作为前端数据绑定，

<template>
	<view class="container">
		
		<view class="">
			{{content}}
		</view>
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				content:" i am a student,learning English very hard."
			}
		},
		methods: {

		}
	}
</script>

为啥数据绑定打双括号很少见？

随着案例的深入，会发现变量打括号会很少用的，最一般的，同时也是最少用的，顶多在组件文本处、页面空白处这样用。

原生组件不支持双括号语法，会将数据命名本身连带双括号一并解析成字符串，uniapp 自有的组件本身就支持动态绑定，更没必要写个双括号来说明什么了，直接上变量名称。

因此，在原生组件中，双括号用不了，在uniapp组件中双括号没意义，显得多余，所以用的就少。

2.4.2、动态 class

①:class 是v-bind:class的缩写

②选择器的值不需要带引号了

//index.vue
<template>
	<view :class=className></view>
</template>


<script>
	export default {
		//初始化数据方法
		data() {
			return {
				className:'uni-app',
                
			}
		},
		methods: {

		}
	}
</script>

2.4.3、动态 onclick

①@click 是 v-on:click 的缩写

②通过this 可以获取data中的所有初始化数据，可利用this.content 直接修改

举个例子，点击事件实现修改content的值，

<template>
	<view class="container">
		
		<view class="" @click="open">
			{{content}}
		</view>
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				
				content:"initial data"
			}
		},
		methods: {
			open(){
				console.log("我被点击了");
				this.content =" i am a student,learning English very hard."
			}
		}
	}
</script>

2.5、uni-app 条件判断

1）借助标签内的v-if 属性，判断要不要渲染这个标签

其值为变量或者 bool 值，只用引号引起来，不需要双重花括号。

<template>
	<view class="" v-if="judge">
		this is true.
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				judge: true

			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

2）条件不成立不渲染，走下一个标签：

①严格等于 ===；

②在引号内写判断。

<view class="" v-if="content === '内容1'"  >this is content1.</view>
<view class="" v-else-if="content === '内容2'">this is content2</view>
<view class="" v-else="content === '内容3'">this is content3.</view>

2.6、uni-app 列表渲染

1）例如通过数组arr来渲染我们的列表，for 循环

<template>
	<view class="" v-for="item in arr">
		{{item}}
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				arr :[11,22,33,44]

			}
		},
		methods: {

		}
	}
</script>

2）数组下标也表示出来：

①可见默认只表示迭代元素的值，写个元组的形式，哎，索引他就有了。【按照 python 的理解】

②data方法里存放的数据就是字典类型的。【按照 python 的理解】

<template>
	<view class="" v-for="(value,index) in arr">
		{{index}} : {{value}}
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				arr:{
					name :"cold",
					age:22,
					sex:'man'
				}

			}
		},
		methods: {

		}
	}
</script>

2.7、uni-app 基础组件的使用

从常用组件入手，这里介绍几个，建议文档 uniapp.dcloud.io查阅进行全面学习。

文档中有组件 平台差异，性能问题，使用须知等更多细节。

1）容器组件

• 普通容器<view></view>

• 滚动容器<scroll-view></scroll-view>

2）表单组件

• 按钮<button></button>，属性巨强。

• 富文本编辑器<editor></editor>

• 选择器<picker></picker>，以往原生实现<select><option></option><select>从数据库查值选地区

• <input></input>，value 属性的动态绑定 ，比如绑定数据 value

  • <input type="text" :value="value">
    
    <input type="text" v-bind:value="value">
    <!-- 双向绑定 -->
    <input type="text" v-model="value">
    

2.8、uni-app 自定义组件的使用⭐（初级）

属于高级用法，非常重要，可以实现一些自带事件，自带样式的组件定义，还可以返回数据到这个页面给这个页面的其他事件用。

1）自定义组件的一般流程：

• 注册
• diy 内容
• 引入这个 diy 组件（有待考察，或许不必人为引入了）

以创建<btn></btn>这个组件为例，

1、在项目根目录下，新建目录 components ， 在里面新建组件，名为btn【勾选创建同名目录】

2、在btn.vue中，使用旧组件定义新组件

<template>
		<view class="btn-box" :style="{color:color}" @click="onClick">
			<slot></slot>
		</view>			
		
</template>

<script>
	export default {
		name:"btn",
		//样式变量
		props:{
			
			color:{
				type:String,
				default:'#ff0000'
			}
		},
		//自定义方法
		methods:{
			onClick(){
				console.log("wo bei dian ji le");
				//发送事件至目标页面
				this.$emit('change',this.color)
				
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.btn-box{
	border: 1;
}
</style>

其中，

• 通过绑定数据实现动态样式:style
• 样式变量要定义在 props{} 中，而不是初始数据 data中，而且两者内的数据都可以 this 提取。
• 像正常的成对标签一样可以中间填入文本要用到<slot></slot>文本插槽。
• 绑定操作都是在script组件中，style组件用的不多，可能就设计 flex 布局的时候有点存在感？
• props 属性很多，还可以继续学。
• 点击组件可以返回一个事件,并且是可控的，给页面某个事件发射数据：

this.$emit(自定义事件,参数)

3、在目标vue文件中引入

<script>
	import btn from '@/components/btn/btn.vue'
	export default{
        components:{
            btn
        },
    }
</script>

我发现现在不需要额外的引入也能用。 — 2023.05.25

4、在 index.vue使用 btn组件

<template>
	<view class="">
		<btn @change="change">点击</btn>
	</view>

</template>

<script>
	
	export default {
		//初始化数据方法
		data() {
			return {
			

			}
		},
		methods: {
			change(e){
				console.log("我是页面的事件，我返回了"+e);
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

强调这里的三个 change：

<btn @change="change">点击</btn>

前者对应 this.$emit('change',...)
后者对应 change(e){}

三者同名即可。

2.9、uni-app 基础 API 用法

uni.前缀，说明要调用API了。

2.9.1、请求系统信息

带有回调函数的写法：

onLoad() {
			uni.getSystemInfo({
				success(res) {
					console.log('成功的返回',res);
				},
				fail(err) {
					console.log('失败的返回',err);
				},
				complete(res) {
					console.log('不管成功失败都返回',res);
				}
			})
		},

2.9.2、跳转

举个例子，希望从 index 页面中执行跳转至 test-page-a 页面，则在index.vue中编写业务逻辑，option有很高的可玩性。

1）使用uni.navigateTo()

其中，url 参数指定了要跳转的页面路径，options 参数是一个对象，可以包含一些其他的配置项，如动画效果、跳转时间等。这个例子将跳转到详情页，并使用向右滑入的动画效果，动画持续时间为 1 秒。需要注意的是，使用 uni.navigateTo 跳转时，用户无法返回上一级页面，只能通过点击返回按钮退出应用程序。

<template>
	<view class="">
		<button @click="open">打开</button>
	</view>
</template>

<script>	
	export default {
		//初始化数据方法
		data() {
			return {
			

			}
		},
		methods: {
			open() {
				uni.navigateTo({
					url:'./test-page-a/test-page-a',
					options: {  
					    animation: 'slide-in-right',  
					    time: 1000  
					  }  
				})
			}
		}
	}
</script>

2）使用uni.redirectTo()

重定向到另一个页面，旧页面被销毁，无法返回。

<template>
	<view class="">
		<button @click="open">打开</button>
	</view>
</template>

<script>	
	export default {
		//初始化数据方法
		data() {
			return {
			
			}
		},
		methods: {
			open() {
				uni.redirectTo({
					url:'./test-page-a/test-page-a'
				})
			}
		}
	}
</script>

更多的，比如上传、下载、路由 看文档。

2.10、uni-app 条件编译

• 具有不冗余的特点，不会存在非当前平台的未编译代码。

• 不同组件内的注释不同。

• 更多注意，查阅文档。

<template>	
<!-- ifdef H5 || APP-LUS -->
组件
<!-- endif H5 || APP-LUS -->
</template>

<script>
//	ifdef H5
//	endif H5
</script>

<style>
/* ifdef H5 */
/* endif H5 */
</style>

ifndef 表示唯独不编译这个平台。

2.11、uni-app 页面布局

1）没有原生 body 标签怎么实现整个页面的样式？

uni-app 等价实现，

<style>
    page{
        /* 定义整个页面的样式*/
    }

</style>

2）flex布局，老朋友了

display: flex;
margin: 0 auto;
justify-content: center;

3）CSS 外联，比如外联 index.css

page{
	background-color: blue;
}

<style>
	@import './index.css'
</style>

3、浅谈

3.1、随笔目的

好记性不如烂笔头，

习惯做随笔，

造轮子。

3.2、一个话题

新东西太难理解，内容太多？太费时间？如何提效？

注：以下内容是说给我自己听的【保命叠甲】

首先下一个结论，方法可能不对！犯了一个一口吃成胖子的错误，学习是要分阶段的。

如果你在跟课，跟视频等等，啥都想记，是没有相关文档吗？还是文档不如你记得全面？还是你能做到比文档排版更好？更有深度？还是太前沿了，没有前辈经验总结可以借鉴？时间就是这么浪费的，不理解不消化，越学负担越重，进度就是这么慢下来的。所以呢，要循序渐进，反对过度笔记。

印象很深刻，考研的时候，过于崇拜记笔记，投入了大量的时间成本，其实也不看。看过高数讲义，武老师的ppt，我在上面做批注，详略得当，既全面，又有重点突出，讲义|PPT排版明显比自己的笔记不知道好了多少，我翻看的频率也上去了，好了好了，不怀旧了。

我理解的学习过程是这样的，三个阶段：

主动的机械模仿阶段👉肤浅简单的理解阶段，学习一般用法👉深度理解阶段，学习使用高级用法。

其中，一二阶段是需要很长一段时间的训练，消化，经验值拉满后才会进入到第三阶段，这个是急不来的，除非，卷王式短时间持续刺激前两个阶段的训练，亦或是，积累一定相关经验，主观感受内容太过简单，也会加快学习进程。

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=301wv6epszgg8文章来源地址https://www.toymoban.com/news/detail-522329.html

到了这里，关于语法速通 uni-app随笔【uni-app】【微信小程序】【vue】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！