前言

由于微信小程序的限制，上線代碼包不能超過2M，一般業(yè)務(wù)只是做界面展示與交互的話，這個(gè)大小其實(shí)完全夠用的，但是當(dāng)我們想要使用echarts這樣的圖表插件時(shí)，代碼包很容易就超了。那么我們?cè)诓皇褂梅职夹g(shù)的情況下，也可以考慮使用we-script這個(gè)功能組件來實(shí)現(xiàn)異步加載外部JS資源。

關(guān)于we-script

we-script 讓微信小程序支持加載執(zhí)行遠(yuǎn)程 JavaScript 腳本，突破小程序無法動(dòng)態(tài)執(zhí)行代碼的限制，支持 ES5 語法。gitee及文檔傳送門，需注意的是，這個(gè)方案只適用與微信小程序，如果希望支持其他小程序的話，可以考慮研究源碼并實(shí)現(xiàn)相對(duì)應(yīng)的功能，或者使用更好的方案，歡迎一起交流。

關(guān)于uniApp開發(fā)微信小程序

學(xué)習(xí)了we-script的應(yīng)用之后，我們會(huì)發(fā)現(xiàn)其并不能直接在uniApp中使用。那么我們需要特殊處理一下。這個(gè)方案稍微的有一些麻煩，希望有朋友可以提供更好的解決方案。下面我們開始使用。

實(shí)戰(zhàn)

步驟1：下載

省去微信開發(fā)者工具 構(gòu)建 npm 這個(gè)步驟，我把構(gòu)建之后生成的包壓縮放在夸克網(wǎng)盤中，歡迎點(diǎn)擊下載，提取碼：vryR。

下載之后，將里面文件放在uni-app開發(fā)項(xiàng)目的 static 文件夾中（wxcomponents 那個(gè)方案我嘗試過了，并不好用），放在這個(gè)文件中是因?yàn)檫@個(gè)文件夾中的所有文件夾中的文件不會(huì)被編譯。如下圖所示，注意miniprogram_npm中一共有3個(gè)文件夾。

步驟2：代碼

1、在文件 pages.json 中，給需要引用這個(gè)組件的頁面配置組件，代碼如下：

{
	"pages": [
		//pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：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 并應(yīng)用

<template name="siteDetail"> 
  <view class="page">
  	<!--調(diào)用組件，傳入資源鏈接，并綁定事件-->
    <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' // 最開始時(shí)從項(xiàng)目中引入的
  
  export default {
    data() {
      return {
        chartsData: [],
      }
    },
    onLoad(option) { },
    methods: {
      // JS加載完成后執(zhí)行
      loadScript(e) {
        // console.log(e)
        // 最開始的時(shí)候，init方法的第一個(gè)參數(shù)是echarts ，現(xiàn)在是 e.detail.context.echarts
        this.$refs.chart.init(e.detail.context.echarts, chart => {
          this.getChartsData(); // 初始化后獲取數(shù)據(jù)
        });
      },
      // 渲染圖表
      setCharts() {
        let option = {
		  // echarts 配置項(xiàng)
        }
        this.$refs.chart.clear()
        this.$refs.chart.setOption(option)
      },
      // 獲得圖標(biāo)的數(shù)據(jù)
      getChartsData() {
        api.getChartsData().then(({ success, result }) => {
          if (success) { 
            this.chartsData = result || []
            this.setCharts()
          }
        })
      },
    },
  }
</script>

<style></style>

示例中 l-echart 是個(gè)圖標(biāo)組件，有興趣的朋友這里提供一個(gè) 傳送門 。

步驟3：編譯運(yùn)行

1、功能寫好后，運(yùn)行到微信小程序 或 發(fā)行到微信小程序

2、微信開發(fā)者功能運(yùn)行起來之后，要把 miniprogram_npm 這個(gè)文件夾放到微信開發(fā)目錄的根目錄中。
移動(dòng)前：

移動(dòng)后：

3、運(yùn)行結(jié)果：可以看到j(luò)s通過網(wǎng)絡(luò)請(qǐng)求的方式加載了，并且頁面的圖表也正常展示了。

結(jié)語

開發(fā)學(xué)習(xí)無止境，小小功能要老命。歡迎交流?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-537906.html

到了這里，關(guān)于uniApp開發(fā)微信小程序 異步加載外部JS應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！