小程序知识点梳理

小程序知识点

一、配置

1.配置tap导航

//在app.json页面 "tabBar": { "list": [{ "pagePath": "home/index", //路径 "text": "首页", //名称 "selectedIconPath": "./pages/img/shouye1.png", //点击出现的图片 "iconPath": "./pages/img/shouye.png" //未点击出现的图片 }, { "pagePath": "pages/classify/classify", "text": "分类", "selectedIconPath": "./pages/img/shouye1.png", "iconPath": "./pages/img/shouye.png" }, { "pagePath": "pages/care/care", "text": "购物车", "selectedIconPath": "./pages/img/gouwuche1.png", "iconPath": "./pages/img/gouwuche.png" },{ "pagePath": "pages/user/user", "text": "我的", "selectedIconPath": "./pages/img/wode1.png", "iconPath": "./pages/img/wode.png" } ] },

color：HexColor 必填 导航条的默认颜色 selectedColor：HexColor 必填 文字选中的颜色 backgroundColor：HexColor 必填 背景色 borderStyle:边框颜色 list:tarbar列表 最多5个

list 数组中各项介绍

pagePath:页面路径，必须在 pages 中先定义 text:文本信息 iconPath：图片路径 selectedIconPath：选中中时的图片路径 当 position 为 top 时，不显示 icon。 2、配置页面路径

//在app.json页面 "pages":[ "home/index", //第一条是首页 "pages/index/index", "pages/classify/classify", "pages/login/login", "pages/user/user", "pages/care/care", "home/xiangqing/xiangqing" ],

3、window 配置全局默认的窗口

navigationBarTextStyle：导航栏的标题颜色 navigationBarTitleText:导航栏的文字 navigationBarBackgroundColor：导航栏的背景颜色； backgroundColor:窗口的背景色

二、小程序文件类型 每个页面有4个文件

index.js 文件 用来写一些逻辑处理index.wxml 相当于html文件 用于布局与内容index.wxss 用来写样式index.json 用来添加一些配置 比如说vant引入app.* 是做小程序应用的全局配置、样式和逻辑pages/index/index.* 是做小程序页面的全局配置、样式和逻辑显示

三、小程序的生命周期 和小程序页面的生命周期

小程序的生命周期

onLaunch() { console.log('onLaunch监听小程序初始化'); } onShow() { console.log('onShow监听小程序显示'); } onHide() { console.log('onLaunch监听小程序隐藏'); }

页面的生命周期 页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数。Page(Object) 函数用来注册一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

onLoad(options) { console.log('onLoad监听页面加载'); } onShow() { console.log('onShow监听页面显示'); } onReady() { console.log('onReady监听页面初次渲染完成'); } onHide() { console.log('onHide监听页面隐藏'); } onUnload() { console.log('onUnload监听页面卸载'); }

四、小程序路由跳转分类和路由跳转传参

//Tab 切换 wx.switchTab(Object object) 不能带参数 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.reLaunch(Object object)不能带参数 关闭所有页面，打开到应用内的某个页面 //页面重定向 wx.redirectTo(Object object)能带参数 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 //打开新页面 wx.navigateTo(Object object)能带参数 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层 //页面返回 wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。 参数 Object object EventChannel.emit(string eventName, any args) 触发一个事件 EventChannel.on(string eventName, EventCallback fn) 持续监听一个事件 EventChannel.once(string eventName, EventCallback fn) 监听一个事件一次，触发后失效 EventChannel.off(string eventName, EventCallback fn) 取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数 wx.redirectTo与wx.navigateTo的区别 利用wx.navigateTo跳转到下一个页面的时候（这时候会执行onHide方法），下一个页面头部会有返回按钮* 如果不想有返回按钮，可以用wx.redirectTo进行页面跳转（这时候关闭此页面，会执行onUnload生命周期，这样下一个页面就不会有返回按钮了，因为上一个页面已经被关闭了，没有页面可以返回）

本地储存

本地存储分为异步和同步。 设置： 异步：wx.setStorage 同步：wx.setStorageSync 获取： 异步：wx.getStorage 同步：wx.getStorageSync 移除： 异步：wx.removeStorage 同步：wx.removeStorageSync 清除所有： 异步：wx.clearStorage 同步：wx.clearStorageSync