uni-app 微信小程序怎么引入CDN的js、css？

可能echarts的js文件有点大，想引入线上的，但不知道怎么引

phonegap100 1楼•3 小时前

用webview 组件显示这些

eggper 2楼•3 小时前

在uni-app中引入微信小程序的CDN资源（如JS和CSS文件）需要一些特殊处理，因为小程序环境对外部资源的访问有严格的限制。以下是一个实现方法，通过wx.createSelectorQuery和dom操作来动态加载CDN资源。

步骤概述

创建组件或页面用于加载CDN资源。
使用wx.createSelectorQuery获取DOM节点。
动态创建<script>和<link>标签并插入到DOM中。

示例代码

1. 创建组件或页面

假设我们在pages/index/index.vue中引入CDN资源。

2. 使用`wx.createSelectorQuery`和DOM操作

<template>
  <view class="container">
    <view id="cdn-container"></view>
  </view>
</template>

<script>
export default {
  mounted() {
    this.loadCDNResources();
  },
  methods: {
    loadCDNResources() {
      const jsCDN = 'https://example.com/path/to/your/script.js';
      const cssCDN = 'https://example.com/path/to/your/styles.css';

      // Load CSS
      wx.createSelectorQuery()
        .select('#cdn-container')
        .boundingClientRect()
        .exec((res) => {
          const container = document.getElementById('cdn-container');
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = cssCDN;
          container.appendChild(link);

          // Load JS
          const script = document.createElement('script');
          script.src = jsCDN;
          script.onload = () => {
            console.log('CDN JS loaded');
          };
          script.onerror = (error) => {
            console.error('Failed to load CDN JS:', error);
          };
          container.appendChild(script);
        });
    },
  },
};
</script>

<style>
.container {
  /* Your styles here */
}
</style>

注意事项

安全性：确保CDN资源是可信的，避免引入潜在的安全风险。
性能：考虑CDN资源的加载时间和对小程序性能的影响。
兼容性：由于小程序对DOM操作的限制，此方法可能在某些情况下不兼容或不稳定。
微信审核：引入外部CDN资源可能会影响小程序的审核，确保符合微信小程序的规范。