小程序分包与组件化详解-优快云博客

本文链接：https://blog.youkuaiyun.com/hhhhhhhhhtr/article/details/107554619

分包

拓展小程序 2m限制到16m;延迟加载内容；提高小程序首次显示速度和用户体验
底部栏对应的页面是主包，底部栏对应的页面可以做出分包
通常底部栏对应页面作为主包
对应的二级页面作为分包
子包相互间不能引用
子包可以引用主包app的内容
配置

"subPackages": [{
    "root":"news",
    "pages":[
      "pages/article/article"
    ]
  }
  ],

预加载

 "preloadRule": {
    "pages/vo/vo":{
      "network": "all",
      "packages": ["news"]
    }
  },

解析html

`rich-text`

解析结构简单的

`wxparse`

https://github.com/icindy/wxParse

拷贝文件
导入必要文件
var WxParse = require('../../wxParse/wxParse.js');
@import "/wxParse/wxParse.wxss";
数据绑定

var article = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

模版引用

// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

构造器

Page({})
Component({})

组件

在最外侧新建文件夹
在文件中再建一个文件夹,如:cell
新建组件
在使用的页面的json文件中注册组件，如："usingComponents": { "cell":"/components/cell/cell" },
在页面使用<cell></cell>

插槽

组件间可以嵌套

组件中接收

<view>
  <slot></slot>
  安全组件
</view>

页面中传入插槽

<cell>
  <view >hdl</view>
  <view >h</view>
</cell>

命名插槽

页面中定义

<cell>
  <view slot="hh" >hdl</view>
</cell>
<cell>
  <view slot="hua">hhh</view>
  <view>hdl</view>
</cell>

组件中使用

<view>
  <slot name="hua"></slot>
  <slot name="hh"></slot>
  安全组件
</view>

组件的js文件中配置

Component({
  options:{
    multipleSlots:true
    //多个插槽
  },
})

props传参

页面

<cell 
title="安全设置"
note="手机号/密码"
>
</cell>

组件js

properties: {
    title:{type:String,value:''},
    note:{type:String,value:''}
    //定义title的类型和默认值
  },

组件页面使用

<view class="cell">
    <view class="title">{{title}}</view>
      <view class="note">{{note}}</view>
</view>

小案例

页面

<cell 
title="安全设置"
note="手机号/密码"
>
</cell>
<cell 
title="通用"
>
</cell>
</cell>
<cell 
title="首页"
icon="/images/home.png"
>
</cell>
<cell 
title="我的"
icon="/images/me.png"
>
</cell>

组件js文件

properties: {
    title:{type:String,value:''},
    note:{type:String,value:''}
    //定义title的类型和默认值
  },

组件wxml文件

<view class="cell">
  <view class="icon">
    <image mode="widthFix" wx:if="{{icon!=''}}" src="{{icon}}"/>
  </view>
  <view class="content">
    <view class="title">{{title}}</view>
    <view class="tip">
      <view class="note">{{note}}</view>
      <view class="arrow"></view>
    </view>
  </view>
</view>

组件wxss

/* colorui/components/cell/cell.wxss */
.cell{
  display: flex;
  height: 88rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}
.cell .icon{
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}
.cell .icon image{
  width: 40rpx;
  height: 40rpx;
}
.cell .content{
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-left: 30rpx; */
}
.tip{
  display: flex;
  padding-right: 30rpx;
}
.arrow{
  height: 26rpx;
  width: 26rpx;
  border-top: 1rpx solid #ddd;
  border-right: 1rpx solid #ddd;
  transform: rotate(45deg) translate(0,13rpx);
  margin-left: 30rpx;
}
.note{
  font-size: 28rpx;
  color: #999;

}

样式隔离

在options选项中配置styleIsolation:'isolated',

  // styleIsolation:'isolated',
    //样式隔离
    //isolated
    //apply-shared页面样式可分享到组件
    //shared双向共享

外部类

定义外部类：

   externalClasses:["cell-Class"]
     /**
     * 1.定义外部类
     * 2.组件中使用外部类
     * 3.页面中传入外部类
     * 4.定义外部了样式
     */
    //可以定义外部组件，class在组件内使用

组件中使用外部类：

<view class="cell cell-class"></view>

页面中传入外部类:

<cell cell-class="mycell"></cell>

定义外部了样式:

.mycell{ height: 100rpx !important;}

事件

在wxml页面

<cell 
url="/news/pages/article/article"
title="首页"
icon="/images/home.png"
>
</cell>

组件js

properties: {
    url:{type:String,value:''}
    //定义title的类型和默认值
  },

组件页面

<view class="cell cell-Class" bindtap="changeHd">
</view>

组件js

 methods: {
    changeHd(){
      console.log(this.data.url)
      if(this.data.url){//如果不为空就跳转到对应页面
        wx.navigateTo({
          url:this.data.url,
        })
      }
    }
  }

组件通信

页面：

<cell 
title="听筒模式"
toggle="{{true}}"
bindchang="chang"
>
</cell>

组件js中注册

 properties: {
    toggle:{type:Boolean,value:false}
    //定义title的类型和默认值
  },

组件页面

 <view wx:if="{{toggle}}" class="toggle">
        <switch bindchange="toggleChange"></switch>
  </view>

在这里插入图片描述
传递参数

methods: {
    toggleChange(e){
      console.log(e)
      this.triggerEvent("chang",{value:e.detail.value})
      //发送事件名称chang值为e.detail.value
    }
  }

在这里插入图片描述

页面接收绑定事件

<cell 
title="听筒模式"
toggle="{{true}}"
bindchang="chang"
<!-- bind后跟发送的事件名 -->
>

页面js文件

chang(e){
    console.log(e,"11111")
  },

在这里插入图片描述

组件生命周期

pageLifetimes页面生命周期
lifetimes组件生命周期

Component({
  pageLifetimes:{
    show(){
      console.log("组件中页面切换进前台")
    },
    hide(){
      console.log("组件中页面切换进后台")
    }
  },
  lifetimes:{
    created(){
      console.log("组件被创建")
    },
    attached(){
      //组件实例进入页面
      console.log("组件进入页面")
    },
    ready(){},//渲染完毕
    move(){},//移除
    error(){},//错误
    detached(){
      //组件实例被页面移除
      console.log()
    }
  },
   
})

监听

observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  },//监听

纯数据字段

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },
  methods: {
    myMethod() {
      this.data._b // 纯数据字段可以在 this.data 中获取
      this.setData({
        c: true, // 普通数据字段
        _d: true, // 纯数据字段
      })
    }
  }
})