小程序积累

深藏阁楼爱情的钟 2023-07-16 03:41 7阅读 0赞

获取页面页面的路由  
**1/ wx.getCurrentPages()获取当前页面栈**  
**2/ 小程序路由跳转的5种方式**

1.wx.navigateTo() //打开新页面  
2.wx.redirectTo() //页面重定向  
3.wx.navigateBack(\{delta:1\}) // 页面返回  
4.wx.switchTab() //Tab页面的切换  
5.wx.reLaunch() //页面重启动  
注意  
1.navigateTo, redirectTo 这只能打开非TabBar页面  
2.switchTab 只能打开tabBar页面  
3.reLaunch 可以打开任意页面  
4.页面底部的tabBar由页面决定，即只要是定义为tabBar的页面,底部都有tabBar  
5.调用页面路由带的参数可以在目标的onLoad种获取  
**3/同步**  
以 Sync 结尾的API都是同步API,如wx.setStorageSync,wx.getSystemInfoSync  
**4/选择器**

*  ::after 在view组件后边插入内容
 *  ::before 在view组件前面插入内容

**UNI-app页面的生命周期**（最常用的）

*  **onLoad** 监听页面加载，其参数是上个页面传递的数据，参数类型为Object（用于页面传参）
 *  **onShow** 监听页面显示。页面每次出现在屏幕上都触发，一般请求要放到这里边。不然页面会导致有undefined等
 *  **onReady** 监听页面初次渲染完成，注意如果渲染速度块，会在页面进入动画完成前触发
 *  **onHide** 监听页面隐藏
 *  **onUnIoad** 监听页面卸载
 *  **onResize** 监听窗口尺寸的变化
 *  **onPullDownRefresh** 监听用户下拉动作，一般用于下拉刷新 [示例][Link 1]
 *  **onReachBottom** 页面上拉触底事件的处理函数
 *  **onTabItemTap** 点击tab时触发
 *  **onShareAppMessage** 用户点击右上角分享
 *  **onPageScroll** 监听页面滚动，参数为Object
 *  **onNavigationBarButton Tap** 监听原生标题栏按钮点击事件，参数为Object

**小程序外迁链接**

<web-view :webview-styles="webviewStyles" src="https://z.cib.com.cn/public/fund/index"></web-view>

**标签**

*视图容器*

*  view 相当于dev
 *  scroll-view 可滚动视图的区域
 *  swiper 滑块视图容器
 *  movavle-area mavable-view的可移动区域
 *  movable-view 在可移动的视图容器，在页面中可以拖拽滑动
 *  cover-view 覆盖在原生组件上的文本视图
 *  cover-image 覆盖在原生组件上的图片视图

*基础内容*

*  icon 图标 text 文本 rich-text 富文本 progress 进度条

*表单组件*

*  button 按钮 checkbox 多项选择器 editor 富文本编辑器 form 表单 input 输入框
 *  label 用来改进表单组件的可用性，使用for属性找到对应的id
 *  picker 从底部谈起的滚动选择器
 *  picker-view 嵌入页面的滚动选择器
 *  radio-group 单项选择器，内部由多个 组成
 *  slider 滑动选择器 switch 开关选择器 textarea 多行输入框  
    *导航*  
    \-navigator 页面链接

**页面交互（经常使用）**

1.消息提示框
      uni.showToast({ 
    		title:'内容',
    		icon:'success/loading/none'	,
    		mask:true, //显示透明蒙层，防止触摸传统
    		duration:1500,//提示的延迟时间
    	})
     2. 隐藏消息提示框
      uni.hideToast()  
     3. 显示loading提示框
      uni.showLoading({ 
    		title:'内容',
    		mask:true,  //是否显示透明蒙层，防止触摸穿透
        })
     4. 隐藏loading提示框
       uni.hideLoading()
     5. 显示模态弹框

[Link 1]: https://uniapp.dcloud.io/api/ui/pulldown