微信小程序引入lodash

文章介绍了在微信小程序环境中,由于lodash包较大,不适合通过npm安装,因此建议直接从GitHub下载lodash.min.js并放入utils/lib文件夹。同时,为了解决运行时错误,需要创建一个lodash-fix.js文件,全局挂载必要对象,以修复lodash在小程序中的运行环境。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

npm 安装

不适用此方法,因为整个包占比比较大

下载lodash.min.js(72k)

直接引入lodash会报错,需要引入一个修复包lodash-fix.js,内容如下:

/**
 * lodash-fix.js
 * 修复 微信小程序中lodash 的运行环境
 */
global.Object = Object;
global.Array = Array;
// global.Buffer = Buffer
global.DataView = DataView;
global.Date = Date;
global.Error = Error;
global.Float32Array = Float32Array;
global.Float64Array = Float64Array;
global.Function = Function;
global.Int8Array = Int8Array;
global.Int16Array = Int16Array;
global.Int32Array = Int32Array;
global.Map = Map;
global.Math = Math;
global.Promise = Promise;
global.RegExp = RegExp;
global.Set = Set;
global.String = String;
global.Symbol = Symbol;
global.TypeError = TypeError;
global.Uint8Array = Uint8Array;
global.Uint8ClampedArray = Uint8ClampedArray;
global.Uint16Array = Uint16Array;
global.Uint32Array = Uint32Array;
global.WeakMap = WeakMap;
global.clearTimeout = clearTimeout;
global.isFinite = isFinite;
global.parseInt = parseInt;
global.setTimeout = setTimeout;

将这个包一样放到utils/lib下

  • 3、全局挂载lodash
    在这里插入图片描述
在 UniApp 微信小程序项目中引入 CDN 资源,通常是指通过外部链接加载静态资源文件(如 JavaScript、CSS 或字体文件)。由于微信小程序的运行环境限制,无法直接使用 `<script>` 或 `<link>` 标签引入远程脚本或样式表。不过可以通过以下几种方式实现 CDN 资源的引入: ### 1. 使用 `web-view` 组件加载外部资源 微信小程序支持通过 `web-view` 组件加载网页内容,因此可以将需要引入的 CDN 资源嵌入到一个 HTML 页面中,并通过该组件展示。 例如,在页面中添加如下代码: ```html <template> <view> <web-view :src="webViewUrl"></web-view> </view> </template> <script> export default { data() { return { webViewUrl: 'https://example.com/your-cdn-page.html' }; } }; </script> ``` 这种方式适用于需要完整加载网页内容的情况,但需要注意的是,`web-view` 的性能和交互体验不如原生组件[^2]。 --- ### 2. 手动下载并本地引用 CDN 资源 对于一些通用库(如 jQuery、Lodash 等)或字体文件,可以通过手动下载后将其放入项目目录中,再通过相对路径进行引用。 以引入一个 JS 库为例: 1. 下载所需资源(如 `lodash.js`)。 2. 将其放置于项目目录中的合适位置,例如 `/static/js/lodash.js`。 3. 在页面或组件中通过 `require` 引入: ```javascript const _ = require('@/static/js/lodash.js'); ``` 对于 CSS 文件,也可以通过 `@import` 方式引入: ```css @import url('@/static/css/your-style.css'); ``` 这种方式避免了对网络请求的依赖,提高了小程序的稳定性和加载速度。 --- ### 3. 使用 `uni.loadFontFace` 加载远程字体 如果需要引入远程字体文件(如从 CDN 获取),可以使用 `uni.loadFontFace` API 动态加载字体资源。 示例代码如下: ```javascript uni.loadFontFace({ global: true, family: 'CustomFont', source: 'url("https://cdn.example.com/fonts/custom-font.woff")', success(res) { console.log('字体加载成功', res); }, fail(err) { console.error('字体加载失败', err); } }); ``` 该方法适用于加载自定义字体,并可在页面中通过 CSS 使用该字体名称进行渲染。 --- ### 4. 使用插件或第三方 SDK 提供的 CDN 集成方式 部分第三方服务(如地图、支付、统计等)可能提供专门针对小程序优化的 SDK。这些 SDK 通常已经封装好了 CDN 资源的加载逻辑,开发者只需按照文档说明进行集成即可。 --- ### 注意事项 - **安全性**:使用 CDN 资源时应确保来源可信,防止引入恶意代码。 - **性能优化**:建议优先考虑将关键资源本地化,以减少网络延迟带来的影响。 - **平台限制**:不同平台对 CDN 资源的支持程度不一,需参考对应平台的官方文档。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值