uniApp开发微信小程序 异步加载外部JS应用

这篇具有很好参考价值的文章主要介绍了uniApp开发微信小程序 异步加载外部JS应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

由于微信小程序的限制,上线代码包不能超过2M,一般业务只是做界面展示与交互的话,这个大小其实完全够用的,但是当我们想要使用echarts这样的图表插件时,代码包很容易就超了。那么我们在不使用分包技术的情况下,也可以考虑使用we-script这个功能组件来实现异步加载外部JS资源。

关于we-script

we-script 让微信小程序支持加载执行远程 JavaScript 脚本,突破小程序无法动态执行代码的限制,支持 ES5 语法。gitee及文档传送门,需注意的是,这个方案只适用与微信小程序,如果希望支持其他小程序的话,可以考虑研究源码并实现相对应的功能,或者使用更好的方案,欢迎一起交流。

关于uniApp开发微信小程序

学习了we-script的应用之后,我们会发现其并不能直接在uniApp中使用。那么我们需要特殊处理一下。这个方案稍微的有一些麻烦,希望有朋友可以提供更好的解决方案。下面我们开始使用。

实战

步骤1:下载

省去微信开发者工具 构建 npm 这个步骤,我把构建之后生成的包压缩放在夸克网盘中,欢迎点击下载,提取码:vryR。

下载之后,将里面文件放在uni-app开发项目的 static 文件夹中(wxcomponents 那个方案我尝试过了,并不好用),放在这个文件中是因为这个文件夹中的所有文件夹中的文件不会被编译。如下图所示,注意miniprogram_npm中一共有3个文件夹。
uniapp 小程序引入外部js,uni-app,微信小程序,小程序

步骤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、功能写好后,运行到微信小程序 或 发行到微信小程序
uniapp 小程序引入外部js,uni-app,微信小程序,小程序uniapp 小程序引入外部js,uni-app,微信小程序,小程序
2、微信开发者功能运行起来之后,要把 miniprogram_npm 这个文件夹放到微信开发目录的根目录中。
移动前
uniapp 小程序引入外部js,uni-app,微信小程序,小程序
移动后
uniapp 小程序引入外部js,uni-app,微信小程序,小程序
3、运行结果:可以看到js通过网络请求的方式加载了,并且页面的图表也正常展示了。
uniapp 小程序引入外部js,uni-app,微信小程序,小程序

结语

开发学习无止境,小小功能要老命。欢迎交流!!!文章来源地址https://www.toymoban.com/news/detail-537906.html

到了这里,关于uniApp开发微信小程序 异步加载外部JS应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp开发微信小程序之登录

    最近开发了一个关于订餐的小程序,记录一下开发过程中运到的问题。 小程序登录实现流程: (1)调用微信登录方法获取code (2)后端接口根据code查询该用户是否手机号授权,已绑定openID (3)若绑定过,则直接跳入页面;若没有,则进入授权页面,进行手机号授权 (4)

    2024年02月15日
    浏览(58)
  • uniapp 开发微信小程序 头部适配

    在 UniApp 中,在微信小程序开发中,头部适配可以通过修改 pages.json 中的 navigationStyle 配置项来实现,具体操作步骤如下: 进入 pages.json 文件 在 UniApp 项目的根目录中找到 pages.json 文件,打开该文件。 修改 navigationStyle 配置项 在 pages.json 文件中,可以为每一个页面单独设置导

    2024年02月14日
    浏览(40)
  • uniapp开发微信小程序-2.页面制作

    往期文章: uniapp开发微信小程序-1.工具和本地环境 uniapp开发微信小程序-2.页面制作 一、项目配置 开发层级结构: 左侧是基础开发,右侧是uniapp开发。经过对比,我们只需要掌握了vue框架就可以直接开发,通过uniapp运行到微信开发者工具即可自动编译成微信小程序基础开发

    2024年02月09日
    浏览(41)
  • uniapp开发微信小程序使用高德地图

    uniapp  官方文档 地图组件控制  地图组件 高德地图key需要公司去申请,之后自己在下载高德地图微信小程序插件 下好的js文件放在项目中,之后在vue项目中的main.js文件中全局注入 页面引入并使用

    2024年02月15日
    浏览(100)
  • uniapp开发微信小程序分包处理实录

            uniapp开发微信小程序上传代码时可能会遇到项目过大问题,今天就结合自己的实际操作简单记录下如何处理项目代码超出限制问题。         常用的操作就是将项目中的图片访问由本地访问修改为网络访问,微信开发者工具上传代码时勾选相关的压缩文件选项

    2024年02月03日
    浏览(50)
  • uniapp开发微信小程序阻止事件冒泡

        最近在使用uniapp去开发微信小程序     其中不乏遇到一些问题,我都会发出来。     万一自己别的时候忘记,但是需要用了。   uniapp中开发微信小程序,当使用  @click.stop     去阻止事件冒泡的时候 会发现, @click.stop  并没有生效,就很神奇 问题如图: 解决问题方案

    2024年02月12日
    浏览(53)
  • uniapp 开发微信小程序 样式穿透问题解决

    微信文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB 问题:父组件中修改子组件 /deep/ H5中生效,但是在微信小程序不生效。 解决:在script中添加styleIsolation: ‘shared’,即可解决 如图:

    2024年02月12日
    浏览(51)
  • uniapp 开发微信小程序之新版隐私协议

    自从微信小程序官方更新隐私协议,用户必须同意之后,才能获取个人信息,这就导致在获取用户信息之前,需要有个隐私协议弹窗 大致如下图: 微信小程序官方提供的API和 uniapp 开发的稍微有点区别,这里只记录 uniapp 开发的,如果需要微信原生的,请自行官网查看。 首先

    2024年02月09日
    浏览(46)
  • uniapp实战 —— 开发微信小程序的调试技巧

    开发版和体验版的小程序,域名没有备案时想调试接口访问效果,可以按下述方式操作: 在手机上点右上方三个点,点击“开发调试”,开启调试模式,即可真机访问接口(跳过域名校验) 重新进入小程序,看到下图所示的绿色浮标,即进入了调试模式 在微信开发者工具中

    2024年02月03日
    浏览(37)
  • uniapp开发微信小程序自定义tabbar

    第一步:在pages.json里定义自己tabbar路径,定义的时候只需要写上页面路径即可  第二步:自定义tabbar页面,为了实现点击动作的动态效果,需要用到watch监听父组件传来的值的改变  自定义tabbar页面全部代码 注:该页面可以直接用组件的方式来放,因为uniapp支持easycom模式,

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包