微信小程序的知识体系梳理

2024年8月8日 18:17 • 其它 • 阅读 4

1、项目整体架构

app.js 小程序的启动js文件。

app.json 小程序的全局json配置文件。同时也可以进行pages配置、底部tab切换的配置等等。

app.wxss 小程序的全局样式。

pages 小程序的相关页面。在app.json中配置了pages，pages文件夹就会自动出现对应的页面。

2、pages

js:是小程序的逻辑部分。
wxss：小程序的对应page的布局，也就是局部样式。相当于web网页的css。
wxml:页面布局。相当于web网页的html。
json ：小程序的局部页面配置。

3、小程序路由

a.push路由 wx.navigateTo({ url:’/pages/index/index’ });

b.替换路由 wx.redirectTo({ url:”/pages/index/index” });

c.路由回退 wx.navigateBack({ delta: 1 });

d.tab切换 wx.switchTab({ url:’相关页面路径’ });

e.路由清理替换 wx.reLaunch({ url:’新的页面路径’ });

4、小程序路由传参

wx.navigateTo({ url: “/pages/index/index?id=”+inputValue });

这句代码是把inputValue的值传递过去。在相应的界面的onLoad周期函数的options中接收。

5、小程序的界面交互（Toast、Modal）

Toast分三种：
sucess、loading、none；

Modal：
title、content属性是必须要的，它还有一些其他的属性，比如确认按钮的显示。

6、小程序page的生命周期

onLoad 初始化加载一次
onReady 页面初次渲染完成
onShow 监听页面显示
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数
onTabItemTap 当前是tab页时，点击 tab 时触发

其中的onLoad()、onReady()、onShow()、onHide()、onUnload()五个是页面生命周期函数，其分别是页面加载、就绪、渲染、隐藏、卸载时被调用。