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

news2025/1/10 12:55:21

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 数据绑定

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>

随着案例的深入，会发现变量打括号会很少用的。

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>