Tutoriel de développement de programme WeChat Mini : ajout d'extensions Mixin

Cet article présente principalement le didacticiel de développement d'applets WeChat sur l'ajout d'extensions mixin. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Mixin est une sorte de pensée. Utilisez 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>

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返回'ios'
 return 'ios';
};

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

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

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

// 在路由组件中使用
// views/detail.vue
import platform from 'mixins/platform';

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

De cette façon, le viewModel des pages d'index et 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: 'ios'
 }
 },

 methods: {
 sayHello () {
  console.log(`hello!`)
 }
 },

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

Fusion de mixin et stratégies d'exécution 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 d'implémentation

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: 'MINA'
 }
})

Si nous ajoutons la configuration mixin, l'officiel ci-dessus La méthode d'inscription 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: 'MINA'
 }
})

Il y a ici deux points auxquels nous devons prêter une attention particulière :

• Page(configObj) - Configurer les données, la méthode, le cycle de vie, etc. de la page du mini programme via configObj

• méthode onLoad - l'entrée principale de la page

Si vous voulez Si la définition dans le mixin est valide, cela doit être fait avant que configObj soit officiellement passé à Page(). En fait, Page(configObj) est un appel de fonction ordinaire. Nous ajoutons une méthode intermédiaire :

Page(createPage(configObj))

Dans la méthode createPage, nous pouvons prétraiter le mixin dans configObj et fusionner les configurations de la bonne manière. configObj et enfin le 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 à la prise en charge du mixin github. 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 === 'function';
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 = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage'];
const APP_EVENT = ['onLaunch', 'onShow', 'onHide', 'onError'];

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 === 'onLoad') return;

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

 // 提取lifecycle
 PAGE_EVENT.forEach(key => {
  if (isFunction(mixin[key]) && key !== 'onLoad') {
  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;
};

2. Lors de la duplication de mixin, soyez cohérent avec vue : données, les méthodes seront fusionnées, le composant lui-même a la priorité la plus élevée, suivi des mixins Le mixin configuré au milieu et à l'arrière a une priorité plus élevée.

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.

Page(createPage(configObj))

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Deux façons d'accéder aux pages dans les mini-programmes WeChat

Implémentation JS des onglets dans WeChat Effet d'onglet de développement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!