美文网首页
小程序开发常用知识总结

小程序开发常用知识总结

作者: sisselxie | 来源:发表于2021-03-25 18:54 被阅读0次

1.Tabbar闪烁问题解决思路
用微信官方文档的Tabbar,真机调试,第一次tab切换时会tabbar闪烁。tabbar切换时使用wx.switchTab({url})进行页面切换,第一次切换时微信要打开新的页面,把新页面压人页面栈中,每个新页面要重新渲染tabbar,所以第一次切换时会闪烁。
解决方案:
把整个页面布局封装成组件layout,tabbar 和 navbar 都封装成组件,要切换的页面内容也封装成组件,在layout通过slot控制要显示的组件,tabbar切换只是控制组件的显示,tabbar不需要重新渲染,切换无闪烁。

//layout 组件分为navbar,slot显示activePage, tabbar三部分,通过控制activePage的值控制页面的组件的显示
<view class='layout'>
  <view class='navbar'>
  //customBar有些页面布局需要自定义navbar,由页面定义头部显示。
      <navbar wx:if="{{customBar}}" options="{{navBarOptions}}"
      icon='icon-back' ></navbar> 
  </view>
//计算页面内容显示区域
  <view class='content' style='height:calc(100vh - {{customBarHeight+tabBarHeight}}px );' >
     <slot name="{{activePage}}"></slot>
  </view>
  <view class='footer'>
    <tabBar wx:if="{{customTabbar}}" options="{{tabBarOptions}}"  bindchange="handleTabChange"></tabBar> 
  </view>
</view>
//js控制activePage显示不同组件
 handleTabChange(e,o){
      const context = e.detail;
      let customBar ;
      if(context.page==="mine"){
          customBar = false
      }else{
          customBar =true
      };
      this.setData({
        customBar:customBar,
        activePage:context.page,
        navBarOptions:context.navBarOptions
      })
    }
//slot值控制显示哪个slot
<layout id="page1" customNavBar="{{true}}"  customTabbar="{{true}}" navBarOptions="{{navBarOptions}}" tabBarOptions="{{tabBarOptions}}" >
        <home slot="home"></home>
        <shopCar slot="shopCar"></shopCar> 
        <mine slot="mine"></mine>
</layout>

2.小程序生命周期,Pape生命周期,组件component生命周期
小程序应用生命周期:APP()只能在app.js中调用,只能调用一次
1.onLaunch
小程序初始化完成时触发,全局只触发一次。
2.onShow
小程序启动,或从后台进入前台显示时触发。
3.onHide
小程序从前台进入后台时触发。
4.onError
小程序发生脚本错误或 API 调用报错时触发。
5.onPageNotFound
小程序发生脚本错误或 API 调用报错时触发。
冷启动:第一次打开小程序或者小程序销毁后再次打开,此时小程序需要重新加载启动,即冷启动。会执行onLaunch 、onShow
冷启动:如果用户已经打开过小程序,在一定时间内再次打开,小程序并未销毁,只是从后台状态变为前台状态,称为热启动,执行onShow,不执行onLaunch。
后台: 点击左上角关闭,或者按了设备 Home 键离开微信,并没有直接销毁,而是进入后台状态,小程序还可以再运行一段时间会,执行onHide。
前台:展示给用户就是前台状态,再次打开微信或再次打开小程序,会从后台状态进入前台状态。
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/operating-mechanism.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%AF%E5%8A%A8
Pape生命周期
小程序展示某个页面的生命周期:
1.onLoad
页面加载时触发。一个页面只会调用一次
2.onShow
页面显示/切入前台时触发。
3.onReady
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
4.onHide
页面隐藏/切入后台时触发。
5.onUnload
页面卸载时触发。如wx.redirectTowx.navigateBack到其他页面时
官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
组件component生命周期
1.created
组件实例刚刚被创建好时, created 生命周期被触发
2.attached
在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发
detached
3.在组件离开页面节点树后, detached 生命周期被触发
在组件中也可以在pageLifetimes定义页面生命周期的回调

Component({
  lifetimes: {
    created: function() {
      // 组件实例刚刚被创建好
    },
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
//组件所在页面的生命周期
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
4.组件封装思路
1.小程序开发时,经常需要封装组件,根据需求,找出可以复用的部分封装成组件。
2.根据需求分析,找出需要传入组件的数据(组件需要显示的数据或要控制显示的状态数据),在properties中定义需要接受的数据
3.考虑组件与页面的交互,定义需要触发页面的方法,用triggerEvent调用页面或父组件方法并传参,例如:

<good options="{{item}}"  bind:addCart="addCart" style="width:100%;"></good>

//组件WXML代码
<button bindtap="onAddingToCartTap" ></button>
//组件js代码
properties: {
    options:{
      type:Object
    }
 },
onAddingToCartTap: function (events) {
  //触发父组件方法
   this.triggerEvent('addCart', events)
}
       

5.封装微信小程序的数据请求
小程序使用wx.request发起 HTTPS 网络请求,使用promise封装,在appjs中定义request方法,返回promise对象,这样页面可以通过const app = getApp(); app.request使用

//请求方法
  //params 请求参数 以对象方式传递 必填
  //noShowLoding 为true则代表不要loading(针对某些需要频繁的请求),若需要loading 则不填。
  request(params, noShowLoding) {
    let url = ""; //接口请求地址
    if (!noShowLoding) {
      wx.showLoading({
        title: '加载中',
      })
    }
    return new Promise(function (resolve, reject) {
      wx.request({
        url: url + "?token=" + wx.getStorageSync('token'),
        data: params,
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'content-type': 'application/json'
        }, // 设置请求的 header
        success: function (res) {
          wx.hideLoading()
          if (res.statusCode == 200) {
            let data = res.data;
            if (data.response) {
              resolve(res.data);
            } else {
              console.log(data)
              if (data) {
                wx.showToast({
                  title: data.error.errorInfo,
                  icon: 'none',
                  duration: 2000
                })
              }
            }
          }
        },
        fail: function () {
          wx.hideLoading();
          wx.showToast({
            title: '网络连接失败',
            icon: 'none',
            duration: 2000
          })
        },
        complete: function () {
   
        }
      })
    })

相关文章

  • 小程序开发常用知识总结

    1.Tabbar闪烁问题解决思路用微信官方文档的Tabbar,真机调试,第一次tab切换时会tabbar闪烁。ta...

  • 小程序开发(入门)

    小程序开发总结 入门级别的小程序,主要是熟悉小程序的开发。 较常用的 就是 页面跳转navigat...

  • 小程序开发知识总结

    常识性问题 小程序规定最终上传的包大小 –> 1M 小程序push方式跳转最多能跳转几个页面 -> 5个 小...

  • 关于微信小程序的学习总结

    关于微信小程序的学习总结 引言:微信小程序的开发文档点我 基础知识 小程序的文件类型描述小程序前端样式wxsscs...

  • 2018-07-02

    6月份知识总结 一,微信小程序 .1.安装开发者工具,申请...

  • 小程序常用组件-视图容器

    本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。 共同属性 小程序组件有一些...

  • 钢材信息小程序开发总结(三) ---EggJS

    整体项目代码钢材信息小程序开发总结(一) --- 整体介绍钢材信息小程序开发总结(二) ---uniapp 这次是...

  • 钢材信息小程序开发总结(四) --- 最普通数据大屏

    整体项目代码钢材信息小程序开发总结(一) --- 整体介绍钢材信息小程序开发总结(二) ---uniapp钢材信息...

  • 微信小程序开发-基础了解

    今天准备开始做小程序开发,基本的准备知识看了一遍,涉及小程序开发工具熟悉、几个基本的文件和开发准备等,以下是总结的...

  • 微信小程序日历组件开发

    # 微信小程序日历组件开发 微信小程序基础知识 微信小程序 框架介绍 组件文档 上述是开发小程序的基本知识。 今天...

网友评论

      本文标题:小程序开发常用知识总结

      本文链接:https://www.haomeiwen.com/subject/uhyvcltx.html