uni-app学习记录-基础语法

老实扒蕉的小吴
1,054 阅读4分钟

1.创建uni-app项目

image.png
相应文章链接：
（1）www.jianshu.com/p/85af46083…
（2）blog.csdn.net/u012732909/…
（3）www.cnblogs.com/heikedeblac…
（4）www.jianshu.com/p/bc1353c16…

2.目录结构介绍
官网：uniapp.dcloud.io/

image.png

image.png

如下图作为了解部分即可：

image.png

重要部分：src文件夹

image.png

common：存放公共文件（如js,css）
components：存放组件（组件库）
hybrid：存放本地页面目录
wxcomponents：存放小程序组件的目录 store:存放Vuex的目录

链接：blog.csdn.net/weixin_4443…
blog.csdn.net/l1830473688…
www.jianshu.com/p/2633ef32c…
www.kancloud.cn/cnxiangxian…

3.引入并使用scss

image.png

（1）sass-loader版本过高导致无法编译，从而报错

image.png

解决方法：版本过高建议在7左右
npm install sass-loader@7.3.1
链接：blog.csdn.net/qq_45339683…

（2）node-sass版本过高导致无法编译，从而报错

image.png
解决方法：
1、卸载： npm uninstall node-sass
2、安装： npm install node-sass@4.14.1
3、再执行编译命令即可
链接：www.cnblogs.com/aoshuang/p/…

即可编译成功！撒花✿✿ヽ(°▽°)ノ✿

代码：

image.png

注意：
（1）rpx 小程序中的单位 750rpx = 屏幕的宽度
（2）vw h5单位 100vw = 屏幕的宽度 100vh = 屏幕的高度

（4）基本语法
1.数据展示

image.png

image.png

image.png

:data-名称 = "变量" 可以通过函数拿到e，再从e拿到对应名称的值

image.png

链接：blog.csdn.net/Gabriel_wei…
blog.csdn.net/Gabriel_wei…

2.数据循环

image.png

image.png
image.png
image.png

3.v-if和v-show
image.png

image.png
v-if来做显示隐藏时，是直接添加和删除标签，从而达到显示与隐藏的效果
v-show来做显示隐藏时，是通过样式的显示与隐藏，标签保留，从而达到显示与隐藏的效果

注意： v-if和v-for的优先级 【重点】
当v-if和v-for同时一起使用，v-for的优先级高于v-if
（1）数据较少时，可以同时使用，但数据过多，尽量不要一起使用，会消耗性能，必要情况下应该替换成computed属性
image.png

（2）根据实际情况来判定使用v-if或者v-show，如果只是做显示与隐藏，就用v-show即可，避开v-if和v-for同时使用

链接：blog.csdn.net/qq_38280242…
www.cnblogs.com/qdwds/p/117…

4.计算属性computed
image.png

image.png

通过computed可以对数据进行对应的加工处理和过滤，后在进行新数据的调用
image.png
image.png
image.png
image.png

5.事件和传参
（1）事件的使用与vue使用方式一样 image.png

image.png
image.png

（2）传参：uni-app传参2种方式：事件传参和自定义属性传参
1.事件传参：就是定义形参，后传实参 【基本传参方式】 image.png image.png

2.自定义属性传参【小程序写法类似】
image.png image.png
image.png image.png
PS:两种传参方式，根据实际情况进行采纳使用

6.组件
（1）定义组件
image.png
（2）引入组件
image.png
（3）注册组件
image.png
（4）使用组件
image.png

注意：定义、引入、注册、使用组件方式和vue一样的
image.png
image.png image.png

组件传参：
image.png
（1）父传子
image.png image.png

（2）子传父
image.png

子组件：
image.png

父组件：
image.png

（3）全局共享数据【非父子组件关系下，也可以进行传输数据】
image.png

1.通过Vue的原型共享数据
在有Vue原型的文件定义即可【也就是有导入Vue那行的文件，在那个文件里定义全局数据即可】
image.png

在需要使用全局数据的页面里进行调用即可
image.png

结果：
image.png

2.通过globalData共享数据
uni-app中的App.vue文件相当于小程序中的App.js

在App.vue中通过globalData定义全局数据
image.png

获取在globalData中定义的全局数据
image.png

结果：
image.png

PS:获取回来的变量数据，是可读，可写的
image.png image.png

组件插槽【与vue用法一样】
image.png

插槽使用：
image.png

结果：
image.png

7.生命周期
image.png

uni-app生命周期分为3种：应用生命周期、页面生命周期、组件生命周期
1.应用生命周期（在App.vue中写的，onLaunch()使用频率较多【应用第一次加载】）
image.png
image.png

2.页面生命周期
image.png

页面生命周期在所需页面内，进行书写即可 image.png

3.组件生命周期
注意：在组件内使用应用、页面生命周期是不会起效果
image.png image.png

应该在组件中写组件生命周期，才能操作数据和写逻辑
image.png
image.png image.png

注意：uni-app中的生命周期几种分类，就是vue和小程序的生命周期一起结合使用而已，组件生命周期就使用vue的生命周期，而应用、页面生命周期则是使用小程序内的生命周期，请注意3种生命周期各自使用哪些和在哪里使用

相应文章链接：www.cnblogs.com/cisum/p/100…
blog.csdn.net/FantasyWeir…

uni-app生命周期文档地址：uniapp.dcloud.io/collocation…
vue生命周期文档地址：cn.vuejs.org/v2/guide/in…
小程序生命周期文档地址：developers.weixin.qq.com/miniprogram…

avatar
文章
阅读
粉丝