Explication détaillée sur l'ajout d'extensions mixin dans le développement d'applets WeChat-Développement de mini-programmes-php.cn

Mixin est une idée qui utilise des interfaces partiellement implémentées pour réaliser la réutilisation du code. Il peut être utilisé pour résoudre le problème de l'héritage multiple et peut être utilisé pour étendre les fonctions. L'article suivant vous présente principalement les informations pertinentes sur l'ajout d'extensions mixin aux mini-programmes WeChat. Les amis qui en ont besoin peuvent s'y référer.

Introduction à Mixin

Le mode Mixin (tissage) ne fait pas partie des résumés des "Design Patterns" de GOF, mais il est utilisé dans diverses langues et les frameworks trouveront une application de ce modèle (ou idée). En termes simples, Mixin est une interface avec une implémentation totale ou partielle, et sa fonction principale est une meilleure réutilisation du code.

Le concept de Mixin est pris en charge dans React et Vue. Il nous permet d'abstraire la logique métier et de réutiliser le code. Cependant, le framework natif du mini-programme ne prend pas directement en charge Mixin. Examinons d'abord une exigence très pratique :

Ajoutez une classe d'environnement d'exécution à toutes les pages du mini-programme pour faciliter certaines astuces de style. Plus précisément, lorsque le mini-programme est exécuté dans différents environnements d'exploitation (Outils de développement | iOS | Android), la valeur de la plate-forme est la valeur de l'environnement d'exploitation correspondante ("ios | android | devtools")

<view class="{{platform}}">
 <!--页面模板-->
</view>

Copier après la connexion

Revue de l'utilisation des mixins dans vue

Les problèmes mentionnés au début de l'article sont très adaptés pour être résolus à l'aide de Mixins. Nous avons converti cette exigence en un problème Vue : ajoutez une classe de style plate-forme à chaque page de routage (même si cela peut ne pas être pratique). L'idée d'implémentation est d'ajouter un data: platform à chaque composant de routage. Le code est implémenté comme suit :

// mixins/platform.js
const getPlatform = () => {
 // 具体实现略，这里mock返回&#39;ios&#39;
 return &#39;ios&#39;;
};

export default {
 data() {
 return {
  platform: getPlatform()
 }
 }
}

Copier après la connexion

// 在路由组件中使用
// views/index.vue
import platform from &#39;mixins/platform&#39;;

export default {
 mixins: [platform],
 // ...
}

Copier après la connexion

// 在路由组件中使用
// views/detail.vue
import platform from &#39;mixins/platform&#39;;
export default {
 mixins: [platform],
 // ...
}

Copier après la connexion

Dans de cette façon, dans index , le viewModel des deux pages de routage de détail possède la plateforme de valeur, qui peut être utilisée directement dans le modèle.

Classification du mixin Vue

mixin de données
mixin de méthode normale
mixin de méthode de cycle de vie

exprimé en code ressemble à :

export default {
 data () {
 return {
  platform: &#39;ios&#39;
 }
 },
 methods: {
 sayHello () {
  console.log(`hello!`)
 }
 },

 created () {
 console.log(`lifecycle3`)
 }
}

Copier après la connexion

Stratégies de fusion et d'exécution de mixin dans Vue

S'il y a des duplications entre mixins, ces mixins auront des stratégies de fusion et d'exécution spécifiques. Comme indiqué ci-dessous :

Comment faire en sorte que l'applet prenne en charge le mixage

Dans le précédent, nous avons examiné vue Connaissance des mixins. Nous devons maintenant faire en sorte que le mini-programme prenne également en charge le mixin et réalise la même fonction mixin dans vue.

Idées de mise en œuvre

Jetons d'abord un coup d'œil à la méthode d'inscription officielle de la page du mini programme :

Page({
 data: {
 text: "This is page data."
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onShow: function() {
 // Do something when page show.
 },
 onHide: function() {
 // Do something when page hide.
 },
 onUnload: function() {
 // Do something when page close.
 },
 customData: {
 hi: &#39;MINA&#39;
 }
})

Copier après la connexion

Si nous ajoutons la configuration mixin, la méthode d'enregistrement officielle ci-dessus deviendra :

Page({
 mixins: [platform],
 data: {
 text: "This is page data."
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onShow: function() {
 // Do something when page show.
 },
 onHide: function() {
 // Do something when page hide.
 },
 onUnload: function() {
 // Do something when page close.
 },
 customData: {
 hi: &#39;MINA&#39;
 }
})

Copier après la connexion

Il y a ici deux points que nous devrions payer spécialement attention à :

Page(configObj) - Configurer les données, la méthode, le cycle de vie, etc. de la page de l'applet via configObj
Méthode onLoad - Entrée principale de la page

Si vous voulez que la définition dans le mixin soit valide, vous devez faire des histoires avant que configObj ne soit officiellement transmis à Page(). En fait, Page(configObj) est un appel de fonction ordinaire. Nous ajoutons une méthode intermédiaire :

Page(createPage(configObj))

Copier après la connexion

Dans la méthode createPage, nous pouvons prétraiter le mixin dans configObj. la configuration dans configObj de la bonne manière, et enfin la remettre à Page() . C’est l’idée d’implémenter des mixins.

Implémentation spécifique

L'implémentation spécifique du code ne sera pas décrite en détail. Vous pouvez voir le code suivant. Pour une implémentation de code plus détaillée, plus d'extensions et de tests, veuillez vous référer à github >1. Cet article explique principalement comment ajouter la prise en charge du mixin aux petits programmes. L'idée d'implémentation est la suivante : prétraiter configObj

/**
 * 为每个页面提供mixin，page invoke桥接
 */

const isArray = v => Array.isArray(v);
const isFunction = v => typeof v === &#39;function&#39;;
const noop = function () {};

// 借鉴redux https://github.com/reactjs/redux
function compose(...funcs) {
 if (funcs.length === 0) {
 return arg => arg;
 }

 if (funcs.length === 1) {
 return funcs[0];
 }

 const last = funcs[funcs.length - 1];
 const rest = funcs.slice(0, -1);
 return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args));
}


// 页面堆栈
const pagesStack = getApp().$pagesStack;

const PAGE_EVENT = [&#39;onLoad&#39;, &#39;onReady&#39;, &#39;onShow&#39;, &#39;onHide&#39;, &#39;onUnload&#39;, &#39;onPullDownRefresh&#39;, &#39;onReachBottom&#39;, &#39;onShareAppMessage&#39;];
const APP_EVENT = [&#39;onLaunch&#39;, &#39;onShow&#39;, &#39;onHide&#39;, &#39;onError&#39;];

const onLoad = function (opts) {
 // 把pageModel放入页面堆栈
 pagesStack.addPage(this);

 this.$invoke = (pagePath, methodName, ...args) => {
 pagesStack.invoke(pagePath, methodName, ...args);
 };

 this.onBeforeLoad(opts);
 this.onNativeLoad(opts);
 this.onAfterLoad(opts);
};

const getMixinData = mixins => {
 let ret = {};

 mixins.forEach(mixin => {
 let { data={} } = mixin;

 Object.keys(data).forEach(key => {
  ret[key] = data[key];
 });
 });

 return ret;
};

const getMixinMethods = mixins => {
 let ret = {};

 mixins.forEach(mixin => {
 let { methods={} } = mixin;

 // 提取methods
 Object.keys(methods).forEach(key => {
  if (isFunction(methods[key])) {
  // mixin中的onLoad方法会被丢弃
  if (key === &#39;onLoad&#39;) return;

  ret[key] = methods[key];
  }
 });

 // 提取lifecycle
 PAGE_EVENT.forEach(key => {
  if (isFunction(mixin[key]) && key !== &#39;onLoad&#39;) {
  if (ret[key]) {
   // 多个mixin有相同lifecycle时，将方法转为数组存储
   ret[key] = ret[key].concat(mixin[key]);
  } else {
   ret[key] = [mixin[key]];
  }
  }
 })
 });

 return ret;
};

/**
 * 重复冲突处理借鉴vue:
 * data, methods会合并，组件自身具有最高优先级，其次mixins中后配置的mixin优先级较高
 * lifecycle不会合并。先顺序执行mixins中的lifecycle，再执行组件自身的lifecycle
 */

const mixData = (minxinData, nativeData) => {
 Object.keys(minxinData).forEach(key => {
 // page中定义的data不会被覆盖
 if (nativeData[key] === undefined) {
  nativeData[key] = minxinData[key];
 }
 });

 return nativeData;
};

const mixMethods = (mixinMethods, pageConf) => {
 Object.keys(mixinMethods).forEach(key => {
 // lifecycle方法
 if (PAGE_EVENT.includes(key)) {
  let methodsList = mixinMethods[key];

  if (isFunction(pageConf[key])) {
  methodsList.push(pageConf[key]);
  }

  pageConf[key] = (function () {
  return function (...args) {
   compose(...methodsList.reverse().map(f => f.bind(this)))(...args);
  };
  })();
 }

 // 普通方法
 else {
  if (pageConf[key] == null) {
  pageConf[key] = mixinMethods[key];
  }
 }
 });

 return pageConf;
};

export default pageConf => {

 let {
 mixins = [],
 onBeforeLoad = noop,
 onAfterLoad = noop
 } = pageConf;

 let onNativeLoad = pageConf.onLoad || noop;
 let nativeData = pageConf.data || {};

 let minxinData = getMixinData(mixins);
 let mixinMethods = getMixinMethods(mixins);

 Object.assign(pageConf, {
 data: mixData(minxinData, nativeData),
 onLoad,
 onBeforeLoad,
 onAfterLoad,
 onNativeLoad,
 });

 pageConf = mixMethods(mixinMethods, pageConf);

 return pageConf;
};

Copier après la connexion

2. Lors du traitement de la duplication de mixin, soyez cohérent avec vue : données, méthodes Quand fusionné, le composant lui-même a la priorité la plus élevée, suivi du mixin configuré plus tard dans les mixins.

les cycles de vie ne seront pas fusionnés. Exécutez d’abord le cycle de vie dans les mixins de manière séquentielle, puis exécutez le cycle de vie du composant lui-même.

Résumé