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

news/2024/11/8 23:05:15/

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了。

比如请求系统信息，带有回调函数的写法：

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

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

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 表示唯独不编译这个平台。

条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
值生效条件
VUE3HBuilderX 3.2.0+ 详情
APP-PLUSApp
APP-PLUS-NVUE或APP-NVUEApp nvue 页面
APP-ANDROIDApp Android 平台 仅限 uts文件
APP-IOSApp iOS 平台 仅限 uts文件
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION快应用联盟
QUICKAPP-WEBVIEW-HUAWEI快应用华为

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


http://www.ppmy.cn/news/93312.html

相关文章

Vue+Element-ui实现表格导出和导入

Vue+Element-ui实现表格导出和导入

表格导出&#xff0c;填写数据&#xff0c;导入表格 需求&#xff1a;表格导出&#xff0c;填写数据&#xff0c;导入数据表格文件存储在前端表格文件不存储 需求&#xff1a;表格导出&#xff0c;填写数据&#xff0c;导入数据 分析需求&#xff1a; &#xff08;1&#xff0…
阅读更多...
Windows Subsystem for Linux (WSL)安装Ubuntu 0x80070005的问题

Windows Subsystem for Linux (WSL)安装Ubuntu 0x80070005的问题

文章目录 小结问题解决参考 小结 在Windows 11中安装Windows Subsystem for Linux (WSL)&#xff0c; 并安装Ubuntu 22.04.2 LTS&#xff0c;碰到了棘手的问题报错&#xff1a;0x80070005&#xff0c; 进行了解决。 问题 在Windows 11的微软应用商店Microsoft Store中安装Ub…
阅读更多...
C++中读写文件方法（fstream用法）

C++中读写文件方法（fstream用法）

文章目录 前言一、 打开文件方法二、读写方法三、读写文本示例1、文本文件操作示例&#xff1a;2、二进制文件读写示例&#xff1a; 总结 前言 日常工作中肯定会用到文件读写操作&#xff0c;C STL中 fstream 是一种用于文件读写的流类&#xff0c;它可以方便地对文件进行输入…
阅读更多...
服务器模型 setsockopt 网络超时检测 广播组播和unix域套接字 5.23

服务器模型 setsockopt 网络超时检测 广播组播和unix域套接字 5.23

四.服务器模型 1.循环服务器 TCP服务器 TCP服务器端运行后等待客户端的连接请求。 TCP服务器接受一个客户端的连接后开始处理&#xff0c;完成了客户的所有请求后断开连接。 TCP循环服务器一次只能处理一个客户端的请求。 只有在当前客户的所有请求都完成后&#xff0c;服务…
阅读更多...
Java-API简析_java.lang.Class类（基于JDK1.8）（浅析源码）

Java-API简析_java.lang.Class类（基于JDK1.8）（浅析源码）

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/130838927 出自【进步*于辰的博客】 其实我的【Java-API】专栏内的博文对大家来说意义是不大的。…
阅读更多...
GATK最佳实践之数据预处理SnakeMake流程

GATK最佳实践之数据预处理SnakeMake流程

<~生~信~交~流~与~合~作~请~关~注~公~众~号生信探索> 写的数据预处理snakemake流程其实包括在每个单独的分析中比如种系遗传变异和肿瘤变异流程中&#xff0c;这里单独拿出来做演示用&#xff0c;因为数据预处理是通用的&#xff0c;在call变异之前需要处理好数据。 数据…
阅读更多...
GPC_UICC Configuration

GPC_UICC Configuration

GPC_UICC Configuration_v2.0.pdf 1 简介 本文档规定了在 ETSI 规范 TS 102 221 [TS 102 221]、TS 102 223 [TS 102 223] 中指定的 UICC 平台上实施 GlobalPlatform 规范的配置要求&#xff0c; TS 102 225 [TS 102 225] 和 TS 102 226 [TS 102 226]。 GlobalPlatform Common …
阅读更多...
叮咚音乐门铃芯片方案推荐 WTN6006-8S 低功耗 高性价比

叮咚音乐门铃芯片方案推荐 WTN6006-8S 低功耗 高性价比

​ 随着物联网技术的不断发展&#xff0c;智能家居已经成为了生活中不可或缺的一部分。作为智能家居中的重要组成部分&#xff0c;门铃同样需要进行智能化升级&#xff0c;在改善用户体验、保障家庭安全方面起到了重要作用。本文将介绍一种基于音乐芯片的叮咚门铃应用方案…
阅读更多...
最新文章

Copyright @ 2022~2023