feat: release 1.0

Author: UZIhuhuhu

README.md

@@ -0,0 +1,22 @@
+## miniprgram-mixin
+
+As we know, in the miniprogram, `Component` has [`behaviors`](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) to reuse the same logics.But if we want to reuse these logics in `Page`, there is no solution.
+
+`miniprogram-mixin` works.
+
+
+### install
+
+```bash
+yarn add miniprogram-mixin
+```
+
+### demo usage
+
+- in the `/test/demo` directory
+
+- You can also open the [code snippet link](https://developers.weixin.qq.com/s/BtaZPYmQ7Fbu) in wechat devtools.
+
+#### LICENSE
+
+[MIT](./LICENSE)

package.json

@@ -0,0 +1,8 @@
+{
+  "name": "miniprogram-mixin",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/UZIhuhuhu/mini-program-mixin.git",
+  "author": "tinyhuang <[email protected]>",
+  "license": "MIT"
+}

src/index.js

@@ -0,0 +1,69 @@
+/*
+ * // 1. 在 app.js 中引入此文件
+ * require('mixin.js')
+ *
+ * // 2. 撰写一个 testMixin.js
+ * module.exports = {
+ *   data: { someData: 'testMixin' },
+ *   onShow () { console.log('Log from mixin!') }
+ * }
+ *
+ * // 3. 在页面 page/index/index.js 引入
+ * const testMixin = require('testMixin.js')
+ * Page({
+ *   mixins: [testMixin]
+ * })
+ */
+
+const originPage = Page;
+const originComponent = Component;
+
+const originProperties = ['data', 'properties', 'options'];
+const originMethods = [
+  'onLoad',
+  'onReady',
+  'onShow',
+  'onHide',
+  'onUnload',
+  'onPullDownRefresh',
+  'onReachBottom',
+  'onShareAppMessage',
+  'onPageScroll',
+  'onTabItemTap'
+];
+
+function merge(mixins, config) {
+  if (!Array.isArray(mixins)) return;
+  mixins.forEach(mixinItem => {
+    if (Object.prototype.toString.call(mixinItem) !== '[object Object]') {
+      throw new Error(`mixin type must be Object`);
+    }
+    for (let [key, value] of Object.entries(mixinItem)) {
+      if (originProperties.includes(key)) {
+        config[key] = { ...value, ...config[key] };
+      } else if (originMethods.includes(key)) {
+        const originFunction = config[key];
+        config[key] = function(...args) {
+          value.call(this, ...args);
+          return originFunction && originFunction.call(this, ...args);
+        };
+      } else {
+        config = { ...config, ...mixinItem };
+      }
+    }
+  });
+}
+
+Page = config => {
+  if (Array.isArray(config.mixins)) {
+    config = merge(config, config.mixins);
+  }
+  originPage(config);
+};
+
+Component = config => {
+  if (Array.isArray(config.mixins)) {
+    config = merge(config, config.mixins);
+  }
+  originComponent(config);
+};

test/demo/app.js

@@ -0,0 +1,7 @@
+require('./mixin')
+
+App({
+  onLaunch: function () {
+
+  }
+})

test/demo/app.json

@@ -0,0 +1,12 @@
+{
+  "pages": [
+    "index/index"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json"
+}

test/demo/app.wxss

@@ -0,0 +1,12 @@
+const app = getApp()
+const mixinA = require('../mixins/mixin')
+Page({
+  data: {
+
+  },
+  mixins: [mixinA],
+  onLoad: function () {
+    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
+    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
+  },
+})

test/demo/index/index.js

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

test/demo/index/index.json

@@ -0,0 +1 @@
+<view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>

test/demo/index/index.wxml

@@ -0,0 +1,4 @@
+.intro {
+  margin: 30px;
+  text-align: center;
+}