@cloudbase/lowcode-builder 1.0.39 → 1.0.40-alpha.0

package/lib/builder/core/index.js

@@ -48,15 +48,15 @@ async function buildWedaApp({ cals, subAppCalsList = [], dependencies = [], appK
                 weapps: apps,
                 projDir: appBuildDir,
                 appId: appKey,
-                domain: domain,
+                domain,
                 materials: dependencies,
                 plugins,
                 isProduction: mode === common_1.WebpackModeType.PRODUCTION,
                 deployMode,
-                extraData,
                 isMixMode,
                 options: {
                     isCrossAccount: resourceAppId !== deployOptions.targetMpAppId,
+                    mpAppId: deployOptions.mpAppId || '',
                     resourceAppId,
                 },
                 buildTypeList,
@@ -86,11 +86,11 @@ async function buildWedaApp({ cals, subAppCalsList = [], dependencies = [], appK
                 // 模板需要占位保证 mp 文件夹存在
                 fs_extra_1.default.removeSync(path_1.default.resolve(outDir, 'miniprogram_npm'));
             }
-            cb === null || cb === void 0 ? void 0 : cb(null, {
+            await (cb === null || cb === void 0 ? void 0 : cb(null, {
                 ...result,
                 outDir,
                 timeElapsed: Date.now() - startTime,
-            });
+            }));
             return outDir;
         }
         else {
@@ -109,10 +109,10 @@ async function buildWedaApp({ cals, subAppCalsList = [], dependencies = [], appK
                 ignoreInstall,
                 domain,
             });
-            cb === null || cb === void 0 ? void 0 : cb(null, {
+            await (cb === null || cb === void 0 ? void 0 : cb(null, {
                 outDir: h5BuildDir,
                 timeElapsed: Date.now() - startTime,
-            });
+            }));
             return h5BuildDir;
         }
     }

package/lib/builder/h5/index.js

@@ -19,11 +19,20 @@ const types_1 = require("../../types");
 const mp_1 = require("../mp");
 const common_2 = require("../../utils/common");
 const config_1 = require("../config");
+const fs_extra_1 = __importDefault(require("fs-extra"));
 async function buildH5App({ appKey, buildDir, dependencies, i18nConfig, extraData, cals, buildTypeList = [common_1.BuildType.WEB], subAppCalsList, mode, devTool, runtime = types_1.RUNTIME.NONE, deployMode = types_1.DEPLOY_MODE.PREVIEW, ignoreInstall = false, domain = '', }) {
-    var _a, _b;
+    var _a, _b, _c;
     try {
         const { materialsDir } = runtime === types_1.RUNTIME.CI ? (0, util_1.getCompileDirs)(appKey) : (0, util_1.getCompileDirs)('app');
         const h5BuildDir = path_1.default.join(buildDir, 'h5');
+        if (buildTypeList.includes(common_1.BuildType.APP) ||
+            buildTypeList.includes(common_1.BuildType.XPAGE_PC) ||
+            buildTypeList.includes(common_1.BuildType.ADMIN_PORTAL)) {
+            if (!cals.extra) {
+                cals.extra = {};
+            }
+            cals.extra.historyType = types_1.HISTORY_TYPE.HASH;
+        }
         const mainAppSerializeData = (0, common_2.processCals2WeappsData)(cals, dependencies);
         const subAppSerializeDataList = (subAppCalsList === null || subAppCalsList === void 0 ? void 0 : subAppCalsList.map((item) => (0, common_2.processCals2WeappsData)(item, dependencies))) || [];
         const buildContext = {
@@ -43,7 +52,7 @@ async function buildH5App({ appKey, buildDir, dependencies, i18nConfig, extraDat
         // 处理应用数据
         const mainAppData = (0, weapps_core_1.deserialize)(mainAppSerializeData);
         if (!mainAppData.extra) {
-            mainAppData.extra = { domain: domain };
+            mainAppData.extra = { domain };
         }
         if (!((_a = mainAppData.extra) === null || _a === void 0 ? void 0 : _a.domain)) {
             mainAppData.extra.domain = domain;
@@ -133,6 +142,10 @@ async function buildH5App({ appKey, buildDir, dependencies, i18nConfig, extraDat
                 }
             });
         });
+        // 普通 web 模式，且非hash模式，根据页面生成多份入口
+        if (!((_c = cals.extra) === null || _c === void 0 ? void 0 : _c.historyType) || cals.extra.historyType === types_1.HISTORY_TYPE.BROWSER) {
+            await Promise.all((cals.items || []).map((page) => fs_extra_1.default.copy(path_1.default.resolve(h5BuildDir, webpack_2.OUTPUT_DIR, 'index.html'), path_1.default.resolve(h5BuildDir, webpack_2.OUTPUT_DIR, page.id, 'index.html'))));
+        }
         return h5BuildDir;
     }
     catch (e) {

package/lib/builder/mp/index.d.ts

@@ -2,7 +2,7 @@ import { IMaterialItem, IWeAppData, IPlugin } from '@cloudbase/lowcode-generator
 import { IBuildContext } from './BuildContext';
 import { DEPLOY_MODE } from '../../types';
 import { BuildType, IAppUsedComp, IUsedComps } from '../types/common';
-export declare function generateWxMp({ weapps, projDir, appId, domain, materials, plugins, isProduction, deployMode, extraData, isMixMode, options, buildTypeList, isBrowserMpBuilder, }: {
+export declare function generateWxMp({ weapps, projDir, appId, domain, materials, plugins, isProduction, deployMode, isMixMode, options, buildTypeList, isBrowserMpBuilder, }: {
     weapps: IWeAppData[];
     projDir: string;
     appId: string;
@@ -11,9 +11,9 @@ export declare function generateWxMp({ weapps, projDir, appId, domain, materials
     plugins: IPlugin[];
     isProduction: boolean;
     deployMode: DEPLOY_MODE;
-    extraData: any;
     isMixMode: boolean;
     options: {
+        mpAppId: string;
         resourceAppId?: string;
         isCrossAccount: boolean;
     };

package/lib/builder/mp/index.js

@@ -54,7 +54,7 @@ const cals_1 = require("@cloudbase/cals");
 const templateDir = `${config_1.appTemplateDir}/mp/`;
 const em = chalk_1.default.blue.bold;
 const error = chalk_1.default.redBright;
-async function generateWxMp({ weapps, projDir, appId, domain, materials, plugins, isProduction, deployMode, extraData, isMixMode, options, buildTypeList, isBrowserMpBuilder = false, }) {
+async function generateWxMp({ weapps, projDir, appId, domain, materials, plugins, isProduction, deployMode, isMixMode, options, buildTypeList, isBrowserMpBuilder = false, }) {
     var _a;
     const operationLabel = em('Wexin MiniProgram Generated');
     console.time(operationLabel);
@@ -72,7 +72,6 @@ async function generateWxMp({ weapps, projDir, appId, domain, materials, plugins
         domain,
         isBrowserMpBuilder,
     };
-    const yyptConfig = await (0, util_3.getYyptConfigInfo)(extraData);
     const { allAppUsedComps } = handleUsedComponents({
         buildContext,
         weapps,
@@ -82,7 +81,7 @@ async function generateWxMp({ weapps, projDir, appId, domain, materials, plugins
     // 安装依赖库，生成 materials 目录
     await (0, materials_1.installMaterials)(projDir, allAppUsedComps, weapps, buildContext);
     const wxmlDataPrefix = (0, mp_1.getWxmlDataPrefix)(!isProduction);
-    const { projConfig, appConfig, pageConfigs } = (0, mp_config_1.generateMpConfig)(weapps, buildContext);
+    const { projConfig, appConfig, pageConfigs } = (0, mp_config_1.generateMpConfig)(weapps, buildContext, { mpAppId: options.mpAppId });
     // #1 generate project files
     if (!mainAppData.mpPkgUrl) {
         const projectFileData = {
@@ -135,7 +134,8 @@ async function generateWxMp({ weapps, projDir, appId, domain, materials, plugins
         };
     }
     if (mainAppData.mpPkgUrl) {
-        // 合并 project 和 app json
+        // 合并 project 和 app json，复写 appId
+        projectConfigJson.appId = projConfig.appId;
         if (!projectConfigJson.setting) {
             projectConfigJson.setting = {};
         }
@@ -315,7 +315,7 @@ async function generatePkg(weapp, appRoot, ctx, pageConfigs) {
                     pageUUID: rootPath ? `${rootPath}/${page.id}` : page.id,
                     pageName: page.id,
                     pageSource: page.data.src || '',
-                    eventHanlders: (0, util_2.createEventHanlders)(page.componentInstances, 'this', ctx),
+                    eventHanlders: (0, util_2.createEventHanlders)(page.componentInstances, 'this', ctx, page),
                     dataBinds: (0, util_2.createDataBinds)(page.componentInstances, ctx),
                     pageAttributes: {
                         ...(((_a = page.data) === null || _a === void 0 ? void 0 : _a.appShareMessage) ? { appShareMessage: page.data.appShareMessage.value } : {}),
@@ -553,3 +553,18 @@ function cleanMaterils(materialsDir, usedComps) {
         });
     }
 }
+function postprocessDeployExtraJson(projectPath, deployOptions) {
+    let { targetMpAppId, mpAppId } = deployOptions;
+    if (targetMpAppId !== mpAppId) {
+        let projectJson = fs.readJsonSync(path_1.default.resolve(projectPath, 'project.config.json'));
+        const miniprogramRoot = (projectJson === null || projectJson === void 0 ? void 0 : projectJson.miniprogramRoot) || './';
+        const extPaht = path_1.default.resolve(projectPath, miniprogramRoot, 'ext.json');
+        const extJson = {
+            ...(fs.existsSync(extPaht) ? fs.readJsonSync(extPaht) : {}),
+            extEnable: true,
+            extAppid: targetMpAppId,
+            directCommit: true,
+        };
+        fs.writeFileSync(extPaht, JSON.stringify(extJson, null, 2));
+    }
+}

package/lib/builder/mp/mp_config.d.ts

@@ -6,7 +6,9 @@ import { IBuildContext } from './BuildContext';
  * @param kboneConfig https://wechat-miniprogram.github.io/kbone/docs/config/
  * @param appConfigs app config from prop edit panel
  */
-export declare function generateMpConfig(weapps: IWeAppData[], ctx: IBuildContext): {
+export declare function generateMpConfig(weapps: IWeAppData[], ctx: IBuildContext, options: {
+    mpAppId?: string;
+}): {
     appConfig: any;
     projConfig: any;
     pageConfigs: {}[];

package/lib/builder/mp/mp_config.js

@@ -40,7 +40,7 @@ const chalk_1 = __importDefault(require("chalk"));
  * @param kboneConfig https://wechat-miniprogram.github.io/kbone/docs/config/
  * @param appConfigs app config from prop edit panel
  */
-function generateMpConfig(weapps, ctx) {
+function generateMpConfig(weapps, ctx, options) {
     var _a;
     const appConfig = {
         useExtendedLib: { weui: true },
@@ -116,6 +116,9 @@ function generateMpConfig(weapps, ctx) {
             });
         }
     });
+    if (options.mpAppId) {
+        projConfig.appId = options.mpAppId;
+    }
     // merge(pageConfigs, extractAllPagesConfig())
     return { appConfig, projConfig, pageConfigs };
 }

package/lib/builder/mp/util.d.ts

@@ -1,4 +1,4 @@
-import { IDynamicValue, IWeAppComponentInstance, ICompositedComponent } from '@cloudbase/lowcode-generator/lib/weapps-core';
+import { IDynamicValue, IWeAppComponentInstance, ICompositedComponent, IWeAppPage } from '@cloudbase/lowcode-generator/lib/weapps-core';
 import { IBuildContext } from './BuildContext';
 export declare function extractWidgetProps(props: Required<IWeAppComponentInstance>['xProps'], compInfo: ICompositedComponent): any;
 export declare function generatedDynamicData(data: {
@@ -7,13 +7,12 @@ export declare function generatedDynamicData(data: {
     staticProps: {};
     boundProps: {};
 };
-export declare function generateDataBind(bind: IDynamicValue): string;
 export declare function createWidgetProps(widgets: {
     [key: string]: IWeAppComponentInstance;
 }, ctx: IBuildContext): {};
 export declare function createEventHanlders(widgets: {
     [key: string]: IWeAppComponentInstance;
-}, componentApi: string, ctx: IBuildContext): {};
+}, componentApi: string, ctx: IBuildContext, page?: IWeAppPage): {};
 export declare function createDataBinds(widgets: {
     [key: string]: IWeAppComponentInstance;
 }, ctx: IBuildContext): {};

package/lib/builder/mp/util.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDataBinds = exports.createEventHanlders = exports.createWidgetProps = exports.generateDataBind = exports.generatedDynamicData = exports.extractWidgetProps = void 0;
+exports.createDataBinds = exports.createEventHanlders = exports.createWidgetProps = exports.generatedDynamicData = exports.extractWidgetProps = void 0;
 const weapps_core_1 = require("@cloudbase/lowcode-generator/lib/weapps-core");
+const lowcode_generator_1 = require("@cloudbase/lowcode-generator");
 const weapp_1 = require("@cloudbase/lowcode-generator/lib/generator/util/weapp");
 const wxml_1 = require("./wxml");
 const mp_1 = require("@cloudbase/lowcode-generator/lib/generator/config/mp");
@@ -47,20 +48,27 @@ function generatedDynamicData(data, compInfo) {
             }
         }
         else {
-            boundProps[key] = generateDataBind(data[key]);
+            setDataBind(boundProps, key, data[key]);
         }
     }
     return { staticProps, boundProps };
 }
 exports.generatedDynamicData = generatedDynamicData;
 // For JS
-function generateDataBind(bind) {
+function generateDataBindMeta(bind) {
     let expr = '';
+    let imports = 'const $for = forItems;'; // 基础 alias
     const { type, value } = bind;
     if (type === weapps_core_1.PropBindType.forItem) {
-        expr = `forItems.${value}`;
+        expr = `$for.${value}`;
     }
     else if (type === weapps_core_1.PropBindType.expression) {
+        try {
+            imports += (0, lowcode_generator_1.generateExpressionAlias)(value);
+        }
+        catch (e) {
+            console.error('parse expression error', value, e);
+        }
         expr = value;
     }
     else if (type === weapps_core_1.PropBindType.prop) {
@@ -98,9 +106,8 @@ function generateDataBind(bind) {
             }
         }
     }
-    return expr;
+    return { imports, expression: expr };
 }
-exports.generateDataBind = generateDataBind;
 function createWidgetProps(widgets, ctx) {
     const widgetProps = {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
@@ -130,8 +137,9 @@ function createWidgetProps(widgets, ctx) {
     return widgetProps;
 }
 exports.createWidgetProps = createWidgetProps;
-function createEventHanlders(widgets, componentApi, ctx) {
-    const eventHanlders = {};
+function createEventHanlders(widgets, componentApi, ctx, page) {
+    let eventHandlers = {};
+    const { listeners: pageListeners = [], id: pageId = '' } = page || {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
         var _a, _b, _c;
         const { xComponent } = widget;
@@ -168,39 +176,11 @@ function createEventHanlders(widgets, componentApi, ctx) {
                 });
             });
         }
-        listeners.forEach((l) => {
-            var _a, _b, _c;
-            const handlerName = (0, wxml_1.getMpEventHanlderName)(id, l.trigger, l);
-            eventHanlders[handlerName] = eventHanlders[handlerName] || [];
-            const params = generatedDynamicData(l.data);
-            let handler = l.handler ? l.handler.name : l.jsCode;
-            switch (l.type) {
-                case weapps_core_1.ActionType.Platform: {
-                    handler = `function({data}){ return app.${(_a = l.handler) === null || _a === void 0 ? void 0 : _a.name}(data)}`;
-                    break;
-                }
-                case weapps_core_1.ActionType.DataSource: {
-                    handler = `function({data}){ return app.cloud.callDataSource(data)}`;
-                    break;
-                }
-                case weapps_core_1.ActionType.PropEvent: {
-                    handler = `function({event, data = {}}){ return ${componentApi}.props.events.${(_b = l.handler) === null || _b === void 0 ? void 0 : _b.name}({...event.detail, ...data}) }`;
-                    break;
-                }
-            }
-            eventHanlders[handlerName].push({
-                key: l.key || '',
-                handler: handler,
-                handlerModule: (_c = l.handler) === null || _c === void 0 ? void 0 : _c.moduleName,
-                data: params.staticProps,
-                boundData: params.boundProps,
-                type: l.type,
-            });
-        });
+        eventHandlers = Object.assign(eventHandlers, getListenersHandlers(listeners, id, componentApi));
         // 如果是数据容器，则生成一个onDataChange事件处理
         if ((_c = compProto === null || compProto === void 0 ? void 0 : compProto.compConfig) === null || _c === void 0 ? void 0 : _c.isDataContainer) {
             const customName = (0, wxml_1.getMpEventHanlderName)(id, 'onDataChange', {});
-            eventHanlders[customName] = [
+            eventHandlers[customName] = [
                 {
                     key: '',
                     handler: `({event})=>{
@@ -213,9 +193,52 @@ function createEventHanlders(widgets, componentApi, ctx) {
             ];
         }
     });
-    return eventHanlders;
+    // 增加页面事件节点 handlers
+    eventHandlers = Object.assign(eventHandlers, getListenersHandlers(pageListeners, pageId, componentApi));
+    return eventHandlers;
 }
 exports.createEventHanlders = createEventHanlders;
+/**
+ * 根据 listeners 创建 handlers
+ * @param listeners {IEventListener[]}
+ * @param id {string}
+ * @param componentApi {string}
+ */
+function getListenersHandlers(listeners, id, componentApi) {
+    if (!id)
+        return {};
+    const eventHandlers = {};
+    listeners.forEach((l) => {
+        var _a, _b, _c;
+        const handlerName = (0, wxml_1.getMpEventHanlderName)(id, l.trigger, l);
+        eventHandlers[handlerName] = eventHandlers[handlerName] || [];
+        const params = generatedDynamicData(l.data);
+        let handler = l.handler ? l.handler.name : l.jsCode;
+        switch (l.type) {
+            case weapps_core_1.ActionType.Platform: {
+                handler = `function({data}){ return app.${(_a = l.handler) === null || _a === void 0 ? void 0 : _a.name}(data)}`;
+                break;
+            }
+            case weapps_core_1.ActionType.DataSource: {
+                handler = `function({data}){ return app.cloud.callDataSource(data)}`;
+                break;
+            }
+            case weapps_core_1.ActionType.PropEvent: {
+                handler = `function({event, data = {}}){ return ${componentApi}.props.events.${(_b = l.handler) === null || _b === void 0 ? void 0 : _b.name}({...event.detail, ...data}) }`;
+                break;
+            }
+        }
+        eventHandlers[handlerName].push({
+            key: l.key || '',
+            handler: handler,
+            handlerModule: (_c = l.handler) === null || _c === void 0 ? void 0 : _c.moduleName,
+            data: params.staticProps,
+            boundData: params.boundProps,
+            type: l.type,
+        });
+    });
+    return eventHandlers;
+}
 function createDataBinds(widgets, ctx) {
     const dataBinds = {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
@@ -255,10 +278,10 @@ function createDataBinds(widgets, ctx) {
 }
 exports.createDataBinds = createDataBinds;
 function setDataBind(target, prop, val) {
-    if (val && val.type && val.type !== 'static') {
-        const jsExpr = generateDataBind(val);
-        if (jsExpr) {
-            target[prop] = jsExpr;
+    if ((val === null || val === void 0 ? void 0 : val.type) && val.type !== 'static') {
+        const meta = generateDataBindMeta(val);
+        if (meta.expression) {
+            target[prop] = meta;
         }
         // Do not generate propBind since it's bound directly in wxml except for _waFor
         // const propsKeepPropBindInJs = ['_waFor', '_waIf']

package/lib/builder/service/webpack.d.ts

@@ -2,6 +2,7 @@ import { IMaterialItem, IWebRuntimeAppData } from '@cloudbase/lowcode-generator/
 import { BuildType, WebpackModeType } from '../types/common';
 import { RUNTIME } from '../../types';
 export declare const PERSISTENT_DEPENDIENCES_MAP: {};
+export declare const OUTPUT_DIR = "preview";
 export interface IMpConfig {
     origin: string;
     entry: string;

package/lib/builder/service/webpack.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.downloadAssets = exports.generateWebpackWebDevServerFile = exports.getMaterialNodeModulesPathList = exports.installDependencies = exports.downloadDependencies = exports.downloadAndInstallDependencies = exports.getAllPageMpEntryPath = exports.getWebpackMpBuildParams = exports.getWebpackWebBuildParams = exports.getMpAllRouterConfig = exports.getPageName = exports.getHomePageInstance = exports.getMainAppDataByList = exports.generateMpJsonConfigFile = exports.generateKboneAppConfig = exports.generateKbonePageConfig = exports.downloadAndWriteTabBarIcon = exports.generateKboneTabBarConfig = exports.generateAppConfig = exports.generateWebpackWebBuildParamsFile = exports.fixAppJson = exports.PERSISTENT_DEPENDIENCES_MAP = void 0;
+exports.downloadAssets = exports.generateWebpackWebDevServerFile = exports.getMaterialNodeModulesPathList = exports.installDependencies = exports.downloadDependencies = exports.downloadAndInstallDependencies = exports.getAllPageMpEntryPath = exports.getWebpackMpBuildParams = exports.getWebpackWebBuildParams = exports.getMpAllRouterConfig = exports.getPageName = exports.getHomePageInstance = exports.getMainAppDataByList = exports.generateMpJsonConfigFile = exports.generateKboneAppConfig = exports.generateKbonePageConfig = exports.downloadAndWriteTabBarIcon = exports.generateKboneTabBarConfig = exports.generateAppConfig = exports.generateWebpackWebBuildParamsFile = exports.fixAppJson = exports.OUTPUT_DIR = exports.PERSISTENT_DEPENDIENCES_MAP = void 0;
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const lodash_1 = require("lodash");
@@ -18,6 +18,7 @@ const common_2 = require("../util/common");
 const types_1 = require("../../types");
 const generateFiles_1 = require("../util/generateFiles");
 exports.PERSISTENT_DEPENDIENCES_MAP = {};
+exports.OUTPUT_DIR = 'preview';
 async function fixAppJson(appBuildDir) {
     const appJsonPath = path_1.default.resolve(appBuildDir, 'dist/mp/app.json');
     if (!fs_extra_1.default.existsSync(appJsonPath)) {
@@ -273,7 +274,7 @@ function getWebpackWebBuildParams(appId, appBuildDir, publicPath = '/', mode = c
         watch: false,
         entry: path_1.default.resolve(appBuildDir, 'src/index.jsx'),
         output: {
-            path: path_1.default.resolve(appBuildDir, './preview'),
+            path: path_1.default.resolve(appBuildDir, exports.OUTPUT_DIR),
             filename: '[name].[contenthash].bundle.js',
             chunkFilename: '[name].[contenthash].chunk.js',
             publicPath: buildTypeList.includes(common_1.BuildType.APP) || buildTypeList.includes(common_1.BuildType.ADMIN_PORTAL) ? '' : publicPath,
@@ -294,8 +295,6 @@ function getWebpackWebBuildParams(appId, appBuildDir, publicPath = '/', mode = c
         resolveModules: [path_1.default.resolve(appBuildDir), 'node_modules'],
         definePlugin: {
             'process.env.buildType': `"${buildTypeList[0]}"`,
-            'process.env.isApp': buildTypeList.includes(common_1.BuildType.APP),
-            'process.env.isAdminPortal': (0, common_1.buildAsAdminPortalByBuildType)(buildTypeList),
             ...extraDefine,
         },
         devtool: ['app-nvzcvt10', 'app-msa2ihs9'].includes(appId)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "1.0.39",
+  "version": "1.0.40-alpha.0",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",

package/template/mp/common/util.js

@@ -28,53 +28,58 @@ export function createComputed(funcs, bindContext = null) {
   return computed
 }
 
+/**
+ *
+ * @param evtListeners
+ * @param context
+ */
 export function createEventHandlers(evtListeners, context) {
-  const evtHandlers = {}
+  const evtHandlers = {};
   for (const name in evtListeners) {
-    const listeners = evtListeners[name]
-    evtHandlers[name] = function (event) {
-      const self = this
-      const owner = this.getWeAppInst()
-      const target = getWidget(owner.widgets, event.target.id)
-      const currentTarget = getWidget(owner.widgets, event.currentTarget.id)
-      event.target = target
-      event.currentTarget = currentTarget
-      const [prefix = ''] = name.split('$')
+    const listeners = evtListeners[name];
+    evtHandlers[name] = function (event = {}) {
+      const self = this;
+      const owner = this.getWeAppInst();
+      const target = !!event?.target?.id ? getWidget(owner.widgets, event.target.id) : undefined;
+      const currentTarget = !!event?.currentTarget?.id ? getWidget(owner.widgets, event.currentTarget.id) : undefined;
+      event.target = target;
+      event.currentTarget = currentTarget;
+      const [prefix = ''] = name.split('$');
       // The page event handler
-      const { lists = [], itemsById = {} } = findForItemsOfWidget(currentTarget) || {}
+      const { lists = [], itemsById = {} } = !!currentTarget && findForItemsOfWidget(currentTarget) || {};
       listeners.forEach(async l => {
-        let { data = {}, boundData = {} } = l
-        data = { ...data }
+        let { data = {}, boundData = {} } = l;
+        data = { ...data };
         try {
           for (const k in boundData) {
-            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, context))
+            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, context));
           }
-          let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data })
-          let eventName = prefix && l.key ? `${prefix}$${l.key}_success` : ''
+          let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data });
+          let eventName = prefix && l.key ? `${prefix}$${l.key}_success` : '';
           self[eventName] && self[eventName]({
             ...event,
             detail: res
-          })
+          });
         } catch (e) {
-          let eventName = l.key ? `${prefix}$${l.key}_fail` : ''
+          let eventName = l.key ? `${prefix}$${l.key}_fail` : '';
           if (self[eventName]) {
-            console.error(`事件响应失败`, e)
+            console.error(`事件响应失败`, e);
             await self[eventName]({
               ...event,
               detail: e
-            })
+            });
           } else {
             app.showToast({
               icon: 'error',
               title: `事件响应失败`
-            })
-            throw e
+            });
+            throw e;
           }
-
         }
       })
     }
   }
+
   return evtHandlers
 }
 
@@ -232,6 +237,7 @@ export function findLoginPage() {
 }
 
 let _AUTH_CONFIG_CACHE = null;
+
 export async function getAuthConfig() {
   const { app } = getApp();
   if (_AUTH_CONFIG_CACHE) {
@@ -261,6 +267,7 @@ export async function getAuthConfig() {
 }
 
 let _AUTH_CACHE_MAP = {}
+
 async function getAccessPermission(app, appId, pageId) {
   const cacheKey = `${appId}-${pageId}`
   if (_AUTH_CACHE_MAP[cacheKey] !== undefined) {
@@ -361,6 +368,7 @@ export function redirectToLogin(currentPage) {
 
 let loading = {};
 export let enumOptions = observable({});
+
 export function formatEnum(path, optionname) {
   // 判断是单选还是多选
   let isSingle = Array.isArray(path);
@@ -378,6 +386,7 @@ export function formatEnum(path, optionname) {
   // 对多选或者单选有不同处理
   return !isSingle ? value : multiTmp?.join(',');
 }
+
 function getEnumOptions(optionName) {
   if (enumOptions[optionName]) {
     return enumOptions[optionName];
@@ -390,6 +399,7 @@ function getEnumOptions(optionName) {
   }
   return '';
 }
+
 async function getGeneralOptions(optionName) {
   const { app } = getApp();
   return app.cloud.callWedaApi({
@@ -401,3 +411,10 @@ async function getGeneralOptions(optionName) {
     },
   });
 }
+
+export function getMpEventHandlerName(widgetId, evtName, modifier = {}) {
+  // Only builtin events have will bubble
+  return `on${widgetId}$${evtName.replace(/\./g, '_')}${modifier.isCapturePhase ? '$cap' : ''}${
+    modifier.noPropagation ? '$cat' : ''
+  }`;
+}

package/template/mp/common/weapp-page.js

@@ -5,6 +5,7 @@ import mergeRenderer from './merge-renderer';
 import { createDataset, EXTRA_API, createStateDataSourceVar, generateParamsParser, setConfig } from '../datasources/index';
 import { runWatchers } from './watch'
 import lodashGet from 'lodash.get';
+import { getMpEventHandlerName } from "./util";
 
 export function createPage(
   id,
@@ -20,26 +21,18 @@ export function createPage(
   handler,
   pageContext = {},
   context,
-  pageAttributes
+  pageAttributes,
 ) {
   const evtHandlers = createEventHandlers(evtListeners, context);
 
-  function extractLifecyles() {
+  function extractLifecycles() {
     const result = {};
     Object.keys(lifecycle).map(name => {
       result[name] = function () {
         return lifecycle[name].apply(this.getWeAppInst(), arguments)
       }
     })
-    // const nameMaps = [
-    //   ['onReady', 'onPageReady'],
-    // ];
-    // nameMaps.forEach(e => {
-    //   if (!result[e[0]] && result[e[1]]) {
-    //     result[e[0]] = result[e[1]];
-    //     delete result[e[1]];
-    //   }
-    // });
+
     result['onShareAppMessage'] = (res) => {
       if (res?.from === 'button' && res?.target?.dataset?.weda_share_info) {
         return res?.target?.dataset?.weda_share_info;
@@ -114,7 +107,7 @@ export function createPage(
     methods: {
       _pageActive: true,
       /** page lifecycles **/
-      ...extractLifecyles(),
+      ...extractLifecycles(),
       ...evtHandlers,
       ...mergeRenderer,
       onLoad(options) {
@@ -129,20 +122,26 @@ export function createPage(
 
         const hook = lifecycle.onLoad || lifecycle.onPageLoad;
         hook && hook.call($page, query);
+
+        this.invokeEventHandler(id, 'load', {detail: {query}});
       },
       onReady() {
-        const $page = this.getWeAppInst()
+        const $page = this.getWeAppInst();
 
-        this._disposers.push(...runWatchers(index, this))
+        this._disposers.push(...runWatchers(index, this));
+
+        const hook = lifecycle.onReady || lifecycle.onPageReady;
+        hook && hook.call($page);
 
-        const hook = lifecycle.onReady || lifecycle.onPageReady
-        hook && hook.call($page)
+        this.invokeEventHandler(id, 'ready');
       },
       onUnload() {
         const $page = this.getWeAppInst()
 
         const hook = lifecycle.onUnload || lifecycle.onPageUnload;
         hook && hook.call($page);
+
+        this.invokeEventHandler(id, 'unload');
       },
       async onShow() {
         const $page = this.getWeAppInst()
@@ -159,14 +158,22 @@ export function createPage(
             weDaHasLogin: true,
           });
         }
+
+        this.invokeEventHandler(id, 'show');
       },
       onHide() {
         const $page = this.getWeAppInst()
         const hook = lifecycle.onHide || lifecycle.onPageHide;
         hook && hook.call($page);
         this._pageActive = false;
-      },
 
+        // 触发页面节点事件
+        this.invokeEventHandler(id, 'hide');
+      },
+      invokeEventHandler(id, triggerName, params = {}) {
+        const keyName = getMpEventHandlerName(id, triggerName);
+        typeof evtHandlers?.[keyName] === 'function' && evtHandlers[keyName].call(this, params);
+      },
       getWeAppInst() {
         let $page = this.$WEAPPS_PAGE
         if ($page) { return $page }

package/template/mp/component/index.js

@@ -11,6 +11,7 @@ import * as constObj from '../libCommonRes/const'
 import * as toolsObj from '../libCommonRes/tools'
 
 const libCode = '<%= materialName %>'
+const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
 const context = observable({});
 
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
@@ -21,8 +22,8 @@ const evtListeners = {<% Object.entries(eventHandlers).map(([handlerName, listen
       key: '<%= l.key %>',
       handler: <% if (l.type == 'rematch') {%> _handler<%= l.handler %> <%} else if (l.type === 'inline') {%> function({event, lists, forItems, $context}, $comp){ <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
       data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, expr])=>{%>'<%= prop %>':($comp, lists, forItems, event, $context) => {const $for=forItems;return (
-        <%= expr === '' ? 'undefined': expr %>
+      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($comp, lists, forItems, event, $context) => {<%= bindMeta.imports %> return (
+        <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
       )},
         <%}) %>}
     },<%})%>
@@ -50,9 +51,9 @@ const handler = {<% handlers.forEach(h => {%>
 }
 
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
-  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    "<%= prop %>": function ($comp, lists, forItems, event, $context) {const $for=forItems; return (
-      <%= expr === '' ? 'undefined': expr %>
+  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
+    "<%= prop %>": function ($comp, lists, forItems, event, $context) {<%= bindMeta.imports %> return (
+      <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
     ); },<% }) %>
   },<%}) %>
 }

package/template/mp/package.json

@@ -3,7 +3,7 @@
 	"version": "1.0.8",
 	"scripts": {},
 	"dependencies": {
-		"@cloudbase/weda-client": "0.2.22",
+		"@cloudbase/weda-client": "0.2.22-alpha.2",
 		"@cloudbase/weda-cloud-sdk": "1.0.19",
 		"@cloudbase/oauth": "0.1.1-alpha.5",
 		"mobx": "^5.15.4",

package/template/mp/page/index.js

@@ -19,20 +19,20 @@ const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listen
       key: '<%= l.key %>',
       handler: <% if (l.type === 'rematch') {%> handlers.<%= l.handler %> <%} else if (l.type == 'material') {%> function(...args) { return require('../../materials/<%= l.handlerModule %>/actions/<%= l.handler %>/index').default(...args) } <%} else if (l.type == 'inline') {%> function({event, lists, forItems, $context}, $page){const $for = forItems; return <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
       data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, expr])=>{%>'<%= prop %>':($page, lists, forItems, event, $context) => {const $for = forItems; return (
-        <%= expr === '' ? 'undefined': expr %>
+      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($page, lists, forItems, event, $context) => {<%= bindMeta.imports %> return (
+        <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
       )},
         <%}) %>}
     },<%})%>
   ],<%})%>
 }
+
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
-  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    "<%= prop %>": function ($page, lists, forItems, event, $context) {const $for = forItems; return (
-      <%= expr === '' ? 'undefined': expr %>
+  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
+    "<%= prop %>": function ($page, lists, forItems, event, $context) {<%= bindMeta.imports %>  return (
+      <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
     ); },<% }) %>
   },<%}) %>
 }
 
-
-createPage('<%= pageName %>', '<%= pageUUID %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page, context, <%= pageAttributes?JSON.stringify(pageAttributes):'{}' %>)
+createPage('<%= pageName %>', '<%= pageUUID %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page, context, <%= pageAttributes?JSON.stringify(pageAttributes):'{}'%>);