小程序原生(后续)

86 阅读2分钟

这次紧接着上次使用过的一些小程序里面的一些语法继续更新一下

常见的一些内置组件

1.view,独占一行的块级元素标签,类比div

image.png

2.text,行内元素,类比以前的span标签

image.png

有一个可注意的属性:user-select(表示文本是否可选)

3.image图片标签

有以下特点:

1 默认大小为 320 * 240

2 支持懒加载

3 通过mode属性控制渲染效果

image.png

mode属性渲染效果是内置的,根据图片的需要可进行调整

image.png

4.swiper轮播图

属实是方便了,不用去找组件,直接用它不香?

特点: 默认宽度 和 高度 为 100% * 150px

image.png

属性:

image.png

题外话:因为swiper和image都是有默认的高度,需要我们去手动进行调节!

5.navigator导航标签(可类比以前web上的a标签)

特点:

1.块级元素

2.通过** url **来指定跳转的页面

3.还可以跳到其他小程序

区别:

1.跳转页面是当前小程序的时候

image.png

2.当想要跳转到其他的小程序页面时

1 设置 target =“miniProgram”

2 填写 属性 short-link = “链接”

(链接可以通过【小程序菜单】->【复制链接】获取)

6.button按钮

微信小程序里的按钮不是一般的按钮,它的open-type属性↓可以让他变得十分厉害

image.png

6.rich-text富文本标签

类比以前的v-html即可,只是这里要通过传入 nodes 属性来使用

image.png

自定义组件

有内置组件,那肯定也有满足个别需求的一些自定义组件

使用方式:依旧是3部曲--创建,注册,使用

创建

1.根目录下创建一个名为component的文件夹

2.在该文件夹下创建和组件名同名的文件夹

3.在wxml里面创建组件

image.png

注册

哪个页面需要就在页面.json那进行设置注册

image.png

也可以全局注册(APP.JSON)

image.png

组件传参

不管是在vue里面还是小程序里面,都存在组件之间互相传值

父传子(属性)

父组件传值(title)

image.png

子组件接收(properties)并且修改 image.png

子传父(事件)

子组件拿到值传(triggerEvent) image.png

传给父组件接收 image.png

生命周期

在特定时期触发的事件,有点像vue的created,mounted,updataed,destroyed(从出生到销毁)

小程序同时也分成了三大板块的生命周期:

1.应用生命周期

2.页面生命周期

3.组件生命周期

应用生命周期

代表一整个小程序

image.png

页面生命周期

代表一整个页面

image.png

组件生命周期

image.png