image 微信小程序flex_微信小程序开发注意事项

前言

久闻微信小程序是个对开发者不大友好的应用程序，结果名不虚传，一旦开发起来就会遇到一些奇形怪状的问怪，细数一下我开发微信小程序遇过到坑。

---

常见问题

• UI组件过度封装

微信小程序的组件是模仿react.js或vue.js的web组件设计的，并且封装了weui.css样式。

延伸：

实现自定义多选或多选。

wxml

      
          
          A
      
      
          
          B
      
      
         
         C
      

wxss

.checkbox-group {
      
  display: flex;
  flex-wrap: wrap;
}

.checkbox-label {
      
  width: 33.333%;
}

.checkbox-text {
      
  background: #fff;
  position: relative;
  text-align: center;
  border: 1px solid #000;
}

checkbox {
      
  display: none;
}

checkbox[checked]+.checkbox-text {
      
  color: #fff;
  background: red;
  border: 1px solid #000;
}

• 语法糖是各种前端框架的大杂烩

封装组件标签

wxml

Sroot

类Vue.js数据绑定

wxml

 {
      { message }} 

类React.js数据状态

wxs

this.setData({ message : "Hello World" })

类Vue.js或React.js的组件生命周期。

//app
App({
      
  onLaunch(options) {
      
    // 生命周期回调——监听小程序初始化。
  },
  onShow(options) {
      
    // 生命周期回调——监听小程序启动或切前台。
  },
  onHide() {
      
    // 生命周期回调——监听小程序切后台。
  }
})

//page
Page({
      
  onLoad: function(options) {
      
    // 生命周期回调—监听页面加载。
  },
  onShow: function() {
      
    // 生命周期回调—监听页面显示。
  },
  onReady: function() {
      
    // 生命周期回调—监听页面初次渲染完成。
  },
  onHide: function() {
      
    // 生命周期回调—监听页面隐藏。
  },
  onUnload: function() {
      
    // 生命周期回调—监听页面卸载。
  }
})

//Component 新版写法
Component({
      
  lifetimes: {
      
    created: function() {
      
      //在组件实例刚刚被创建时执行。
    },
    attached: function() {
      
      //在组件实例进入页面节点树时执行。
    },
    ready: function() {
      
      //在组件在视图层布局完成后执行。
    },
    moved: function() {
      
      //在组件实例被移动到节点树另一个位置时执行。
    },
    detached: function() {
      
      //在组件实例被从页面节点树移除时执行。
    }
  }
})

类Vue.js或React.js组件模板。

wxml组件模板定义

wxml组件模板