Ionic3中literallyCanvas构建iOS时出现LC未定义问题求助

我之前在Ionic 3项目里集成Literally Canvas时，也碰到过一模一样的问题——浏览器和Android端运行都正常，唯独iOS用Xcode构建后就报找不到LC变量的错，折腾了好一阵才找到几个有效的解决方向，分享给你：

1. 优先使用本地脚本资源，替换CDN依赖 #

iOS的WebView对CDN资源的加载稳定性不如浏览器和Android，尤其是离线打包场景下，很可能出现脚本加载延迟或失败的情况。你可以：

• 把React 0.14.7的两个脚本和literallycanvas.js下载到项目的assets/static/js目录下
• 修改index.html里的引用路径为本地路径：

  <script src="assets/static/js/react-with-addons.js"></script>
  <script src="assets/static/js/react-dom.js"></script>
  <script src="assets/static/js/literallycanvas.js"></script>
  

• 检查angular-cli.json（Ionic 3的配置文件）里的assets数组，确认assets/static/js被包含在内，确保构建时这些文件会被复制到iOS包中：

  "assets": [
    "assets",
    "assets/static/js",
    "index.html",
    "favicon.ico"
  ]
  

2. 确保在平台就绪后再调用LC相关代码 #

iOS WebView的脚本加载时机可能比Android和浏览器晚，组件代码可能在LC还未加载完成时就执行了。你可以借助Ionic的Platform.ready()方法，等待所有依赖加载完毕后再操作：

import { Platform } from 'ionic-angular';

constructor(private platform: Platform) {
  this.platform.ready().then(() => {
    // 这里再执行LC相关逻辑
    if (typeof LC !== 'undefined') {
      console.log('LC加载成功:', LC);
      // 初始化Literally Canvas的代码放这里
    } else {
      console.error('LC仍未加载，请检查脚本引用');
    }
  });
}

3. 全局声明LC变量，避免作用域问题 #

虽然你在wbBoard.ts里声明了declare const LC: any;，但组件内的声明可能存在作用域限制。你可以把声明放到全局的类型定义文件里：

• 在项目根目录的src文件夹下创建typings.d.ts文件（如果没有的话）
• 在文件里添加全局声明：

  declare const LC: any;
  

这样整个项目的TypeScript代码都能识别LC这个全局变量，避免局部声明失效的问题。

4. 检查iOS的安全配置 #

如果还是用CDN资源的话，需要确保iOS允许加载外部脚本。修改项目根目录的config.xml，添加以下配置：

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

不过更推荐用本地资源，这样既避免了网络依赖，也能绕过大部分安全限制。

5. 确认版本兼容性 #

你使用的React版本是0.14.7，要确保Literally Canvas的版本和这个React版本兼容。如果版本不匹配，也可能出现全局变量未挂载的情况，可以确认Literally Canvas的官方兼容版本范围。

按照上面的步骤逐一排查，应该能解决iOS端找不到LC变量的问题。

内容的提问来源于stack exchange，提问作者sini jain