Pont在小程序开发的使用

Pont是一个很好的前后端桥，但是有个问题。默认产生的代码，无法支持微信小程序开发。根本原因是因为使用了window给全局的对象注入了API和refs属性，由于小程序没有window属性，当然就无法使用了，解决办法也比较简单。只需要给微信全局对象注入这两个属性就可以了

使用uni-app的解决方案如下：

修改service/index.ts

import * as defs from './baseClass'
import './mods/'
// #ifdef H5
;(window as any).defs = defs // 只在编译期间，因此可以这样用
// #endif
// #ifdef MP-WEIXIN
Object.defineProperty(Object.prototype, 'defs', {
  value: defs,
  configurable: false,
  enumerable: false
})
// #endif

修改service/mods/index.ts

import * as commonApi from './commonApi'
import * as tools from './tools'
import * as userApi from './userApi'
// #ifdef H5
(window as any).API = {
  commonApi,
  tools,
  userApi
}
// #endif
// #ifdef MP-WEIXIN
Object.defineProperty(Object.prototype, 'API', {
  value: {
    commonApi,
    tools,
    userApi
  },
  configurable: false,
  enumerable: false
})
// #endif

这样就可以在小程序开发也享受pont带来的便利了。

-------------------------- [2024-05-31] 新增 -------------------------

按照上面的处理后，还是有一个问题，就是每次生成的时候，接口代码会被重置。导致运行时报错：

TypeError: Cannot set property 'API' of undefined

看来要拿源码来开刀了

找到项目node_modules\pont-engine\lib\compatible\generators\generate.js

找到getIndex()

这个是生成services/index.ts的，修改下，把uni-app的条件编译加上

    /** 获取接口类和基类的总的 index 入口文件代码 */
    getIndex() {
        let conclusion = `
      import * as defs from './baseClass';
      import './mods/';

      // #ifdef H5
      ${this.surrounding === pontConfig_1.Surrounding.typeScript ? '(window as any)' : 'window'}.defs = defs;
      // #endif
	  // #ifdef MP-WEIXIN
      Object.defineProperty(wx, 'defs', {
        value: defs,
        configurable:false,
        enumerable: false
      });
      // #endif
    `;
        // dataSource name means multiple dataSource
        if (this.dataSource.name) {
            conclusion = `
        import { ${this.dataSource.name} as defs } from './baseClass';
        export { ${this.dataSource.name} } from './mods/';
        export { defs };
      `;
        }
        return conclusion;
    }

再找到getModsIndex，这个是生成services/mods/index.ts的

把uni-app的条件编译加上

    /** 获取所有模块的 index 入口文件 */
    getModsIndex() {
        let conclusion = `
      // #ifdef H5
      ${this.surrounding === pontConfig_1.Surrounding.typeScript ? '(window as any)' : 'window'}.API = {
        ${this.dataSource.mods.map((mod) => (0, utils_1.reviseModName)(mod.name)).join(', \n')}
      };
	  // #endif
	  // #ifdef MP-WEIXIN
      Object.defineProperty(Object.prototype, 'API', {
        value: {
          ${this.dataSource.mods.map((mod) => (0, utils_1.reviseModName)(mod.name)).join(', \n')}
		},
        configurable: false,
        enumerable: false
      });
      // #endif
    `;
        // dataSource name means multiple dataSource
        if (this.dataSource.name) {
            conclusion = `
        export const ${this.dataSource.name} = {
          ${this.dataSource.mods.map((mod) => (0, utils_1.reviseModName)(mod.name)).join(', \n')}
        };
      `;
        }
        return `
      ${this.dataSource.mods
            .map((mod) => {
            const modName = (0, utils_1.reviseModName)(mod.name);
            return `import * as ${modName} from './${modName}';`;
        })
            .join('\n')}

      ${conclusion}
    `;
    }

修改完后，记得重启一下VSCode，把services目录删除掉重新生成

按照同样的思路，也可以添加对uniapp的APP-PLUS的支持。这里就不放代码了，有兴趣实验的同学可以试试