序文

WeChat アプレットの制限により、オンラインコードパッケージは2Mを超えることはできません。一般的なビジネスがインターフェイスの表示と対話のみであれば、実際にはこのサイズで十分です。ただし、 echartsのようなチャートプラグインを使用したい場合は、コードパッケージは簡単です。次に、サブパッケージ技術を使用せずに、機能コンポーネントwe-script を使用して外部 JS リソースを非同期にロードすることも検討できます。

we-scriptについて

we-script を使用すると、WeChat アプレットがリモート JavaScript スクリプトのロードと実行をサポートできるようになり、アプレットがコードを動的に実行できないという制限を突破し、ES5 構文をサポートします。gitee およびドキュメントポータルの場合、このソリューションは WeChat アプレットにのみ適用できることに注意してください。他のアプレットをサポートしたい場合は、ソースコードを調査して対応する機能を実装するか、より良いソリューションを使用することを検討してください。私たち。

WeChat アプレットを開発する uniApp について

we-scriptのアプリケーションを学習すると、これを uniApp で直接使用できないことがわかります。それから特別な治療が必要です。この解決策は少し面倒なので、友人がより良い解決策を提供してくれることを願っています。使ってみましょう。

戦闘

ステップ 1: ダウンロード

WeChat 開発者ツールを使用して npm をビルドする手順を保存します。ビルド後に生成されたパッケージを圧縮し、Quark ネットワークディスクに置きます。クリックしてダウンロードへようこそ。抽出コードは vryR です。

ダウンロード後、内部ファイルをユニアプリ開発プロジェクトの静的フォルダーに配置し（wxcomponents ソリューションを試しましたが、うまく機能しませんでした）、このフォルダー内のすべてのフォルダーがファイルに含まれるため、このファイルに配置します。コンパイルされません。以下の図に示すように、miniprogram_npmには 3 つのフォルダーがあることに注意してください。
ここに画像の説明を挿入

ステップ 2: コードを作成する

1. ファイルpages.jsonで、このコンポーネントを参照する必要があるページのコンポーネントを構成します。コードは次のとおりです。

{
    
    
	"pages": [
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/index/index", 
			"style": {
    
    }
		}, 
	    {
    
    
	      "path": "pages/index/siteDetail",
		  "style": {
    
    
	        // #ifdef MP-WEIXIN || MP-QQ
	        "usingComponents": {
    
    
	          "we-script": "we-script" // 组件引入！！！！！
	        }
	        // #endif
	      }
	    }
	],
	"usingComponts": true
	// 其他属性
	// ......
}

2. ページ内のコンポーネントサンプルファイル siteDetail.vue を使用します。サンプル機能は、echarts を導入して適用することです。

<template name="siteDetail"> 
  <view class="page">
  	<!--调用组件，传入资源链接，并绑定事件-->
    <we-script @onLoad="loadScript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></we-script>
    <view style="width: 100%; height:300rpx">
      <l-echart ref="chart"></l-echart>
    </view>
  </view>
</template>

<script>
  import {
    
     mapGetters } from 'vuex';
  import api from './api.js'
  // import * as echarts from '@/uni_modules/lime-echart/static/echarts.min' // 最开始时从项目中引入的
  
  export default {
    
    
    data() {
    
    
      return {
    
    
        chartsData: [],
      }
    },
    onLoad(option) {
    
     },
    methods: {
    
    
      // JS加载完成后执行
      loadScript(e) {
    
    
        // console.log(e)
        // 最开始的时候，init方法的第一个参数是echarts ，现在是 e.detail.context.echarts
        this.$refs.chart.init(e.detail.context.echarts, chart => {
    
    
          this.getChartsData(); // 初始化后获取数据
        });
      },
      // 渲染图表
      setCharts() {
    
    
        let option = {
    
    
		  // echarts 配置项
        }
        this.$refs.chart.clear()
        this.$refs.chart.setOption(option)
      },
      // 获得图标的数据
      getChartsData() {
    
    
        api.getChartsData().then(({
     
      success, result }) => {
    
    
          if (success) {
    
     
            this.chartsData = result || []
            this.setCharts()
          }
        })
      },
    },
  }
</script>

<style></style>

この例では、l-echart はアイコンコンポーネントであり、興味のある友人がここにポータルを提供します。

ステップ 3: コンパイルして実行する

1. 関数を作成した後、それをWeChat アプレットに対して実行するか、 WeChat アプレットに公開します
ここに画像の説明を挿入
。 2. WeChat 開発者関数の実行後、miniprogram_npmフォルダーを WeChat 開発ディレクトリのルートディレクトリに置きます。
移動前：

移動後：

3. 実行結果：ネットワークリクエストを通じてjsが読み込まれ、ページ上のチャートも正常に表示されていることがわかります。
ここに画像の説明を挿入