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的支持。这里就不放代码了,有兴趣实验的同学可以试试