小程序基础

heroes
152 阅读7分钟

1.小程序里面实现页面导航的两种方式

声明式导航 tabbar页面
在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性
        url表示要跳转的页面地址，必须以/开头
        open-type 表示跳转方式 必须为switchTab (如果是指定的tabbar页面时)

声明式导航 非tabbar页面
        url表示要跳转的页面地址，必须以/开头
        open-type 表示跳转方式 必须为navigate 
        (在导航非tabbar页面时open-type='navigate'可以省略 )

后退导航
如果要后退上一页面或者多级页面 则需要指定open-type属性和delta属性 其中：
open-type的值必须是 navigateBack，表示要进行后退导航
delta的值必须是数字，表示要后退的层级 
<navigator url="/pages/swiper/swiper" open-type="navigateBack" delta="1">后退导航</navigator>  

编程式导航 tabbar页面
调用wx.switchTab(object object)可以跳转到tabbar页面

image.png

编程式导航 非tabbar页面
调用 wx.navigateTo(object object)方法，可以跳转非tabbar的页面。其中object的属性如下

image.png

使用编程式导航进行后退
调用 wx.navigateBack(object object)方法，可以返回上一级页面或多级页面。属性如下

image.png

1.导航传参的方式

1.声明式导航传参 navigation组件的url属性用来指定将要跳转的页面路径，路径的后面还可以携带参数
参数与路径之间使用?分隔
参数键与参数值用=相连
不同的参数&分隔
<navigator url="/pages/swiper/swiper?name=zs&age=20 ">导航</navigator>  

2.编程式导航传参 调用wx.navigateTo()方法跳转页面时 可以携带参数
wx.navigateTo({
    url:'/pages/info/info?name=zs&age=20'
}) 

在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以在onLoad事件中直接 获取到

image.png

小程序中的生命周期

1.应用生命周期
特指小程序中从 启动->运行->销毁的过程
应用生命周期函数是在 app.js中进行声明
onLaunch 当uni-app 初始化完成触发 全局只触发一次
onShow 当uni-app启动，或从后台进去前台显示
onHide 当uni-app 从前台进入后台
onError 当uni-app 报错时触发
页面中的生命周期函数（组件中script中）
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object (昂楼的)
onShow 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面返回当前页面
onReady 监听页面初次渲染完成，昂瑞滴
onHide 监听页面隐藏
onUnload 监听页面卸载 昂狼肉
新建components文件里面的vue文件 声明周期跟vue是一样的
2.页面生命周期
特指小程序中，每个页面的 加载->渲染->销毁的过程

创建自定义组件

    1.在小程序中 右键新建文件夹component
    2.在新建文件夹 test 在新建component 就创建好了自定义组件

局部引用和全局引用

在页面的.json配置中引用的方式叫做'局部引用'

image.png

全局引用的方式

在app.json全局配置文件引用的方式叫做'全局引用'

image.png image.png

组件和页面的区别

image.png

组件样式隔离

组件样式隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响组件之外的ui结构

image.png

样式隔离的注意点
    app.wxss中全局样式对组件无效
    z只有class选择器会有样式隔离效果,id选择器，属性选择器,标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用class选择器，不要使用id 属性 标签选择器

修改组件的样式隔离选项
    默认情况下，自定义组件的样式隔离特性能够防止组件内部样式互相干扰的问题 。但有时我们希望在外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项

image.png image.png

自定义组件中-数据，方法和属性

1.data数据 用于组件模板渲染的私有数据，需要定义到data节点中
2.事件处理函数和自定义方法需要定义到methouds节点中

image.png

在小程序中，properties是组件的对外属性，用来接收外界传递到组件中的数据

image.png

data和properties的区别
    在小程序的组件中，properties属性和data数据的用法相同，他们都是可读可写的，只不过
    data更倾向于存储组件的私有数据
    properties更倾向于存储外界传递到组件中的数据

image.png

组件的生命周期函数

image.png

image.png

image.png

组件所在页面的生命周期函数
有时候自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期函数

image.png

组件插槽

什么是插槽可以提供一个<slot>节点（插槽）
    单个插槽
    在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位 这个叫做单个插槽

image.png

多个插槽

image.png

image.png

父子组件之间的通信3中方式

image.png

属性绑定
    属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件示例代码

image.png

父子组件之间的通信
    事件绑定

image.png

image.png

image.png

image.png

全局数据共享

image.png

image.png

在项目中创建一个store的文件里面创建一个store.js的文件

image.png image.png

页面中使用全局数据共享

image.png

分包的基础概念

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载
分包的好处
    可以优化小程序首次 启动的下载时间
    在多团队共同开发时可以更好的解耦工作
分包之前项目的构成
        分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序 收起启动的下载时间

主包：一般包含项目的启动页面或tabBar页面，以及所有分包都需要用到的一些公共资源
分包：只包含当前分包有关的页面和私有资源

分包的加载规则

在小程序启动时，默认会下载主包并启动主包内页面
tabBar页面需要放到主包中
2.当用户进入到分包内某个页面时，客户端会把对应分包下载下来，下载完成之后在进行展示
   非tabBar页面可以按照功能的不同，划分不同的分包之后，进行按需下载 

分包的体积限制
    整个小程序所有分包大小不超过16M(主包+所有分包)
    单个分包/主包大小 不能超过2M

配置方法

image.png

image.png

在app.json中，和pages平级的位置配置subpackages 里面配置root属性

image.png

分包的打包原则

image.png

分包的引用原则

 1.主包无法引用分包内的私有资源
 2.分包之间不能 相互引用私有资源
 3.分包可以引用主包内的公共资源

 什么是独立分包
  独立分包本质上也是分包，只不过他比较特殊，可以独立于主包和其他分包而单独运行
  独立分包和普通分包之间的区别
  最主要的其区别:是否依赖于主包才能运行
  1.普通分包必须依赖主包才能运行
  独立分包可以在不下载主包的情况下，独立运行

image.png

独立分包的配置方法

最主要的区别就是有没有independent:'true'

image.png image.png

独立分包的引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源

image.png

分包预下载

分包预下载指的是 ：在进入小程序某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包的启动速度

配置分包的预下载
    预下载分包的行为，会在进入指定的页面时触发。在app.jaon中，使用preloadRule节点定义分包的预下载规则，示例如下

image.png

image.png

image.png

avatar
文章
阅读
粉丝