foreword

Due to the limitation of WeChat applets, the online code package cannot exceed 2M . If the general business is only for interface display and interaction, this size is actually enough, but when we want to use chart plug-ins such as echarts , the code package is easy. Exceeded. Then we can also consider using the functional component we-script to load external JS resources asynchronously without using subpackage technology .

About we-script

we-script allows WeChat applets to support loading and executing remote JavaScript scripts, breaking through the limitation that applets cannot dynamically execute code, and supports ES5 syntax . For gitee and document portals , it should be noted that this solution is only applicable to WeChat applets. If you want to support other applets, you can consider researching the source code and implementing corresponding functions, or using a better solution. Welcome to communicate with us.

About uniApp to develop WeChat applets

After learning the application of we-script , we will find that it cannot be used directly in uniApp. Then we need special treatment. This solution is a little troublesome, and I hope some friends can provide a better solution. Let's start using it.

combat

Step 1: Download

Save the step of building npm with WeChat developer tools . I compress the package generated after the build and put it in the Quark network disk . Welcome to click to download , and the extraction code is: vryR.

After downloading, put the inside file in the static folder of the uni-app development project (I tried the wxcomponents solution, but it didn't work well), and put it in this file because of all the folders in this folder. file will not be compiled. As shown in the figure below, note that there are 3 folders in miniprogram_npm .
insert image description here

Step 2: Code

1. In the file pages.json , configure the component for the page that needs to reference this component. The code is as follows:

{
    
    
	"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. Use the component sample file siteDetail.vue in the page, the sample function is to introduce echarts and apply it

<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>

In the example, l-echart is an icon component, and friends who are interested will provide a portal here .

Step 3: Compile and run

1. After the function is written, run it to the WeChat applet or publish it to the WeChat applet
insert image description here
2. After the WeChat developer function is running, put the miniprogram_npm folder in the root directory of the WeChat development directory.
Before moving :

After moving :

3. Running results: You can see that js is loaded through network requests, and the charts on the page are also displayed normally.
insert image description here