百度小程序

整体框架

百度小程序的开发api，架构设计和微信小程序基本一致

为了提升整体性能，充分利用手机的多CPU性能： 1. 把逻辑层与渲染层分离，分别位于不同的运行容器 2. 异步请求都由native来执行

baidu_mini_pro架构

• 逻辑层

  1. 逻辑层就是对开发者所暴露的api，有APP， Page，布局文件，其中的App。Page都是两个函数

  2. App()函数的处理： 直接创建App对象，全局唯一对象

  3. Page()函数的处理： 保存到Map中，不会马上构建Page对象，当导航到页面时，才会真正创建Page对象

• 渲染层

  1. 使用MVVM框架san来渲染界面

  2. 在编译期间把小程序标签转化为san框架所支持的标签

  3. 为每个小程序页面，创建对应的san框架下Page组件，PageComponent的template就是swan.xml转译后的内容

• 渲染层与逻辑层交互

  1. 渲染层接收用户的交互事件，由统一的函数处理后，通过消息总线传递到逻辑层的Page对象，再调用对应的函数

  2. 逻辑层依据用户操作，执行业务操作，修改data数据，通过消息总线传递到渲染层的组件里，San.Page组件会自动更新界面

开发流程

编译

1. 目录结构

   
2. app.js的源码

   App({
    onLaunch(event) {
        console.log('onLaunch');
    },
    onShow(event) {
        console.log('onShow');
    },
    globalData: {
        userInfo: 'user'
    }
   });

3. index.js的源码

   var p = [];
   Page({
    data: {
        text: "这是一段文字."
    },
    add: function(e) {
        p.push("其他文字");
        this.setData({
            text: "这是一段文字." + p.join(",")
        })
    },
    remove: function(e) {
        if(p.length > 0){
            p.pop();
            this.setData({
                text: "这是一段文字." + p.join(",")
            });
        }
    }
   });

4. index.swan的源码

   <view>
    <view class="text-px text-{{text}}">{{text}}</view>
    <button class="btn" type="primary" bind:tap="add">add text</button>
    <button class="btn" type="primary" bind:tap="remove">remove text</button>
   </view>

   编译之后

5. 目录结构
6. app.js的源码

   window.define("138",
    function(t, e, n, o, a, i, s, c, r, u, d, l, g, w, f, h) {
        var p = [];
        Page({
            data: {
                text: "这是一段文字."
            },
            add: function(t) {
                p.push("其他文字");
                this.setData({
                    text: "这是一段文字." + p.join(",")
                })
            },
            remove: function(t) {
                p.length > 0 && (p.pop(), this.setData({
                    text: "这是一段文字." + p.join(",")
                }))
            }
        })
   });
   window.define("193",
    function(t, e, n, o, a, i, s, c, r, u, d, l, g, w, f, h) {
        App({
            onLaunch: function(t) {
                console.log("Lifecycle App onLaunch")
            },
            onShow: function(t) {
                console.log("Lifecycle App onShow")
            },
            globalData: {
                userInfo: 'user'
            }
        })
   });
   window.__swanRoute = "app";
   window.usingComponents = [];
   require("193");
   window.__swanRoute = "pages/text/text";
   window.usingComponents = [];
   require("138");

7. index.swan.js的源码

   // 注意，做了一些简化
   ((global)=>{
    global.errorMsg = [];
    var templateComponents = Object.assign({}, {});
    var param = {};
    var filterArr = JSON.parse("[]");
    try {
        filterArr && filterArr.forEach(function (item) {
            param[item.module] = eval(item.module)
        });
        var pageContent = `
            <view>
                <view>{{text}}</view>
                <button class=\"btn\" type=\"primary\" on-bindtap=\"eventHappen('tap', $event, 'add', '', 'bind')\">
                    add text
                </button>
                <button class=\"btn\" type=\"primary\" on-bindtap=\"eventHappen('tap', $event, 'remove', '', 'bind')\">
                    remove text
                </button>
            </view>`;
        var renderPage = function (filters, modules) {
            // 路径与该组件映射
            // var customAbsolutePathMap = (global.componentFactory.getAllComponents(), {});
            // 当前页面使用的自定义组件
            // const pageUsingComponentMap = JSON.parse("{}");
            // 生成该页面引用的自定义组件
            // const customComponents = Object.keys(pageUsingComponentMap).reduce((customComponents, customName) => {
            //     customComponents[customName] = customAbsolutePathMap[pageUsingComponentMap[customName]];
            //     return customComponents;
            // }, {});
            global.pageRender(pageContent, templateComponents)
        };
        renderPage(filterArr, param);
    } catch (e) {
        global.errorMsg['execError'] = e;
        throw e;
    }
   })(window);

编译总结：

1. 对template进行转换：

   • 标签转换：bind:tap ===> on-bindtap

   • 事件包装：eventHappen(‘tap’, $event, ‘add’, ‘’, ‘bind’)

2. 对App.js进行包装，提升效率，减少逐一加载流程

3. 通过渲染模板，生成index.swan.js文件，提升渲染效率

加载、启动、渲染

用户点击跳转到小程序后：

1. Native的任务：

   • 下载小程序.zip文件

   • 启动两个web运行容器：

     • 渲染层webview加载slaves.html

     • 逻辑层jscore加载master.html

   • 解析小程序app.json，发送’AppReady’事件

2. 逻辑层master.js

   • 监听’AppReady’事件，执行小程序的调起逻辑

     ```javascript

     /**

3. 监听客户端的调起逻辑 */ listenAppReady() { this.swaninterface.bind('AppReady', event => { console.log('master listener AppReady ', event); swanEvents('masterActiveStart'); // 给三方用的，并非给框架用，请保留 this.context.appConfig = event.appConfig; // 初始化master的入口逻辑 this.initRender(event); // this.preLoadSubPackage(); }); }

   - 初始化master的入口逻辑，小程序的每个界面，对应一个Slave对象（与渲染层的slave.js不一样），依据用户打开多个页面，构建一个导航栈，保存在navigator对象里
   ```javascript
   /**
   * 初始化渲染
   *
   * @param {Object} initEvent - 客户端传递的初始化事件对象
   * @param {string} initEvent.appConfig - 客户端将app.json的内容（json字符串）给前端用于处理
   * @param {string} initEvent.appPath - app在手机上的磁盘位置
   * @param {string} initEvent.wvID - 第一个slave的id
   * @param {string} initEvent.pageUrl - 第一个slave的url
   */
   initRender(initEvent) {
     // 设置appConfig
     this.navigator.setAppConfig({
         ...JSON.parse(initEvent.appConfig),
         ...{
             appRootPath: initEvent.appPath
         }
     });
     swanEvents('masterActiveInitRender');
     // 压入initSlave
     this.navigator.pushInitSlave({
         pageUrl: initEvent.pageUrl,
         slaveId: +initEvent.wvID,
         root: initEvent.root,
         preventAppLoad: initEvent.preventAppLoad
     });
     this.appPath = initEvent.appPath;
     swanEvents('masterActivePushInitslave');
   }

   • 创建初始化页面的slave后，如果没有预加载，就加载小程序里的app.js文件（注意：是编译后的app.js文件），并发送’slaveLoaded’事件，通知渲染层开始渲染

     ```javascript

     /**

   • 初始化第一个slave

   • @param {Object} [initParams] - 初始化的参数

     */

     pushInitSlave(initParams) {

     ....

     // 创建初始化slave

     this.initSlave = this.createInitSlave(initParams.pageUrl, this.appConfig);

     // slave的init调用

     this.initSlave

     .init(initParams)
     .then(initRes => {
         swanEvents('masterActiveCreateInitslaveEnd');
         // 入栈
         this.history.pushHistory(this.initSlave);
         swanEvents('masterActivePushInitslaveEnd');
         // 调用slave的onEnqueue生命周期函数
         this.initSlave.onEnqueue();
         swanEvents('masterActiveOnqueueInitslave');
     });

     }

     /**

   • 初始化为第一个页面

     *

   • @param {Object} initParams 初始化的配置参数

   • @return {Promise} 返回初始化之后的Promise流 */ Slave.init(initParams) { this.isFirstPage = true; return Promise .resolve(initParams) .then(initParams => { swanEvents('masterActiveInitAction'); if (!!initParams.preventAppLoad) { return initParams; } // const loadCommonJs = this.appConfig.splitAppJs // && !this.appConfig.subPackages // ? 'common.js' : 'app.js'; const loadCommonJs = 'app.js'; return loader .loadjs(${this.appRootPath}/${loadCommonJs}, 'masterActiveAppJsLoaded') .then(() => { return this.loadJs.call(this, initParams); }); }) .then(initParams => { this.uri = initParams.pageUrl.split('?')[0]; this.accessUri = initParams.pageUrl; this.slaveId = initParams.slaveId; // init的事件为客户端处理，确保是在slave加载完成之后，所以可以直接派发 this.swaninterface.communicator.fireMessage({ type: slaveLoaded${this.slaveId}, message: {slaveId: this.slaveId} }); return initParams; }); }

     ```

   • 执行slave入栈后的生命周期函数this.initSlave.onEnqueue(); 在此函数里，会真正Page Instance，同时监听到渲染层准备好后，发送’initData’事件

     ```javascript /**

   • 入栈之后的生命周期方法

     *

   • @return {Object} 入栈之后，创建的本slave的页面实例对象

     */

     onEnqueue() {

     return this.createPageInstance();

     }

     /**

   • 创建页面实例，并且，当slave加载完成之后，向slave传递初始化data

     *

   • @return {Promise} 创建完成的事件流

     */

     createPageInstance() {

     if (this.isCreated()) {

     return Promise.resolve();

     }

     swanEvents('masterActiveCreatePageFlowStart', {

     uri: this.uri

     });

     const userPageInstance = createPageInstance(this.accessUri, this.slaveId, this.appConfig);

     const query = userPageInstance.privateProperties.accessUri.split('?')[1];

     this.setUserPageInstance(userPageInstance);

     try {

     swanEvents('masterPageOnLoadHookStart');
     userPageInstance._onLoad(getParams(query));
     swanEvents('masterPageOnLoadHookEnd');

     }

     catch (e) {

     // avoid empty state

     }

     this.status = STATUS_MAP.CREATED;

     console.log(Master 监听 slaveLoaded 事件，slaveId=${this.slaveId});

     return this.swaninterface.invoke('loadJs', {

     uri: this.uri,
     eventObj: {
         wvID: this.slaveId
     },
     success: params => {
         swanEvents('masterActiveCreatePageFlowEnd');
         swanEvents('masterActiveSendInitdataStart');
         userPageInstance.privateMethod
             .sendInitData.call(userPageInstance, this.appConfig);
         swanEvents('masterActiveSendInitdataEnd');
     }

     });

     }

     ```

4. 渲染层slave.js

   • 监听’PageReady’事件，加载对应页面的文件：app.css，index.css，index.swan.js文件

     ```javascript

     /**

   • 监听pageReady，触发整个入口的调起

   • @param {Object} [global] 全局对象

     */

     listenPageReady(global) {

     swanEvents('slavePreloadListened');

     // 控制是否开启预取initData的开关

     let advancedInitDataSwitch = false;

     this.swaninterface.bind('PageReady', event => {

     swanEvents('slaveActiveStart', {

        pageInitRenderStart: Date.now() + ''

     });

     ...

     const appPath = event.appPath;

     const pagePath = event.pagePath.split('?')[0];

     const onReachBottomDistance = event.onReachBottomDistance;

     ...

     let loadUserRes = () => {

        // 设置页面的基础路径为当前页面本应所在的路径
        // 行内样式等使用相对路径变成此值
        // setPageBasePath(`${appPath}/${pagePath}`);
        swanEvents('slaveActivePageLoadStart');
        // 加载用户的资源
        Promise.all([
            loader.loadcss(`${appPath}/app.css`, 'slaveActiveAppCssLoaded'),
            loader.loadcss(`${appPath}/${pagePath}.css`, 'slaveActivePageCssLoaded')
        ])
            .catch(() => {
                console.warn('加载css资源出现问题，请检查css文件');
            })
            .then(() => {
                // todo: 兼容天幕，第一个等天幕同步后，干掉
                swanEvents('slaveActiveCssLoaded');
                swanEvents('slaveActiveSwanJsStart');
                loader.loadjs(`${appPath}/${pagePath}.swan.js`, 'slaveActiveSwanJsLoaded');
            });

     };

     // (event.devhook === 'true' ? loadHook().then(loadUserRes).catch(loadUserRes) : loadUserRes());

     loadUserRes();

     });

     }

     ```

   • 在每个页面编译后的xxx.swan.js文件里，会执行pageRender()函数，进行界面渲染，如此demo里的index.swan.js文件

     ((global)=>{
     global.errorMsg = [];
     var templateComponents = Object.assign({}, {});
     var param = {};
     var filterArr = JSON.parse("[]");
     try {
        filterArr && filterArr.forEach(function (item) {
            param[item.module] = eval(item.module)
        });
        var pageContent = `
            <div class=\"wrap\">
                <div>{{text}}</div>
                <button class=\"btn\" type=\"primary\" v-on:click=\"eventHappen('tap', $event, 'add', '', 'bind')\">
                    add text
                </button>
                <button class=\"btn\" type=\"primary\" v-on:click=\"eventHappen('tap', $event, 'remove', '', 'bind')\">
                    remove text
                </button>
            </div>`;
        var renderPage = function (filters, modules) {
            ...
            global.pageRender(pageContent, templateComponents)
        };
        renderPage(filterArr, param);
     } catch (e) {
        global.errorMsg['execError'] = e;
        throw e;
     }
     })(window);

   • global.pageRender()函数是在slave.js文件里定义的方法，其内部的逻辑就是创建对应的san框架里的Page组件，等待初始化数据过来后，再绑定到界面上

     ```javascript

     /**

   • 注册所有components(也包括顶层components -- page)

     */

     registerComponents() {

     ...

     global.pageRender = (pageTemplate, templateComponents, customComponents, filters, modules) => {

     ...

     // 定义当前页面的组件

     componentFactory.componentDefine(

        'page',
        {
            template: `<swan-page tabindex="-1">${pageTemplate}</swan-page>`,
            superComponent: 'super-page'
        },
        {
            classProperties: {
                components: {...componentFactory.getComponents(), ...templateComponents, ...customComponents},
                filters: {
                    ...filtersObj
                }
            }
        }

     );

     swanEvents('slaveActiveDefineComponentPage');

     // 获取page的组件类

     const Page = global.componentFactory.getComponents('page');

     // 初始化页面对象

     const page = new Page();

     swanEvents('slaveActiveConstructUserPage');

     // 调用页面对象的加载完成通知

     page.slaveLoaded();

     swanEvents('slaveActiveUserPageSlaveloaded');

     // 用于记录用户模板代码在开始执行到监听initData事件之前的耗时

     global.FeSlaveSwanJsInitEnd = Date.now();

     // 监听等待initData，进行渲染

     page.communicator.onMessage('initData', params => {

        swanEvents('slaveActiveReceiveInitData');
        try {
            // 根据master传递的data，设定初始数据，并进行渲染
            page.setInitData(params);
            swanEvents('slaveActiveRenderStart');
            // 真正的页面渲染，发生在initData之后
            // 此处让页面真正挂载处于自定义组件成功引用其他自定义组件之后,
            // 引用其它自定义组件是在同一时序promise.resolve().then里执行, 故此处attach时, 自定义组件已引用完成
            setTimeout(() => {
                page.attach(document.body);
                // 通知master加载首屏之后的逻辑
                page.communicator.sendMessage(
                    'master', {
                        type: 'slaveAttached',
                        slaveId: page.slaveId
                    }
                );
                swanEvents('slaveActivePageAttached');
            }, 0);
        }
        catch (e) {
            console.log(e);
            global.errorMsg['renderError'] = e;
        }

     }, {listenPreviousEvent: true});

     ...

     };

     ...

     }

     ```

   • 当界面渲染后，发送’slaveAttached’事件，逻辑层执行onShow()生命周期函数

reference

• 百度小程序源码解读