uni-app开发微信小程序学习总结

花颜yyds
177 阅读6分钟

1、全局配置文件及常用的配置项

image.png

小程序窗口的组成部分

image.png

1.1 window 节点常用的配置项

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black / white
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px

image.png

1.2 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。 注意：

  • tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  • 当渲染顶部 tabBar 时，不显示 icon，只显示文本

image.png image.png

1.2.1 tabBar 的 6 个组成部分

  1. backgroundColor：tabBar 的背景色
  2. selectedIconPath：选中时的图片路径
  3. borderStyle：tabBar 上边框的颜色
  4. iconPath：未选中时的图片路径
  5. selectedColor：tab 上的文字选中时的颜色
  6. color：tab 上文字的默认（未选中）颜色

image.png

1.2.2 tabBar 节点的配置项

属性类型必填默认值描述
positionString否bottomtabBar 的位置，仅支持 bottom/top
borderStyleString否blacktabBar 上边框的颜色，仅支持 black/white
colorHexColor否tab 上文字的默认（未选中）颜色
selectedColorHexColor否tab 上的文字选中时的颜色
backgroundColorHexColor否tabBar 的背景色
listArray是tab 页签的列表，最少 2 个、最多 5 个 tab

1.2.3 每个 tab 项的配置选项

属性类型必填描述
pagePathString是页面路径，页面必须在 pages 中预先定义
textString是tab 上显示的文字
iconPathString否未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPathString否选中时的图标路径；当 postion 为 top 时，不显示 icon

1.2.4 page.json中代码配置tabBar

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/classify/classify",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/shop/shop",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png",
        "text": "我的"
      }
    ]
  }

2、分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

2.1 分包的加载规则

  • 在小程序启动时，默认会下载主包并启动主包内页面，abBar 页面需要放到主包中

  • 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示， tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

2.2 分包的体积限制

目前，小程序分包的大小有以下两个限制：

  • 整个小程序所有分包大小不超过 16M（主包 + 所有分包）
  • 单个分包/主包大小不能超过 2M

2.3 uni-app中创建分包

  1. 在项目根目录中，创建分包的根目录，命名为 subpkg

image.png

  1. 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {}
    },
    {
      "path": "pages/cate/cate",
      "style": {}
    }
  ],
  "subPackages": [
    {
      "root": "subpkg",
      "pages": []
    }
  ]
}

3、在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：

image.png

4、pages.json中会自动注册新增的分包页面

 ...
 "subPackages": [
    {
      "root": "subpkg",
      "pages": [
                {
                    "path" : "goods_list/goods_list",
                    "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
                }
            ]
    }
  ]

3、生命周期

页面生命周期

函数名说明
onInit监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage用户点击右上角分享
onPageScroll监听页面滚动，参数为Object
onNavigationBarButtonTap监听原生标题栏按钮点击事件，参数为Object
onBackPress监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 (opens new window)。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
onShareTimeline监听用户点击右上角转发到朋友圈
onAddToFavorites监听用户点击右上角收藏

4、页面通讯

4.1、uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

代码示例

	uni.$emit('update',{msg:'页面更新'})

4.2、uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

代码示例

	uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

4.3、uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

代码示例

	uni.$once('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

4.4、uni.$off([eventName, callback])

移除全局自定义事件监听器。

5、路由

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API   uni.navigateTo  、使用组件  <navigator open-type="navigate"/>
页面重定向当前页面出栈，新页面入栈调用 API   uni.redirectTo  、使用组件  <navigator open-type="redirectTo"/>
页面返回页面不断出栈，直到目标返回页调用 API  uni.navigateBack   、使用组件 <navigator open-type="navigateBack"/>、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈，只留下新的 Tab 页面调用 API  uni.switchTab  、使用组件  <navigator open-type="switchTab"/>  、用户切换 Tab
重加载页面全部出栈，只留下新的页面调用 API  uni.reLaunch  、使用组件  <navigator open-type="reLaunch"/>

5.1、使用navigator组件跳转

页面1跳转

   <navigator  url="/subpkg/goods_detail/goods_detail?id=001"></navigator>

页面2在onload生命周期中接收参数

 onLoad (options) {
    const id = options.id
    console.log(id)
  }

5.2、编程式跳转

跳转页面

uni.navigateTo({
	url: 'test?id=1&name=uniapp'
})

接受参数

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
avatar
文章
阅读
粉丝