小程序开发常用知识总结

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

小程序开发常用知识总结
小程序开发（入门）
小程序开发知识总结
关于微信小程序的学习总结
2018-07-02
小程序常用组件－视图容器
钢材信息小程序开发总结(三) ---EggJS
钢材信息小程序开发总结(四) --- 最普通数据大屏
微信小程序开发-基础了解
微信小程序日历组件开发

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.redirectTo或wx.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 () {
   
        }
      })
    })