解决 uni-app 在无法使用本地资源

最新推荐文章于 2024-03-25 16:36:24 发布

原创最新推荐文章于 2024-03-25 16:36:24 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #npm #node.js

在uni-app和微信小程序的最新版本中，尽管官方声明支持本地资源，但在实际操作中，video组件加载本地资源时常出现黑屏问题，影响调试。为了解决这一问题，可以采用Node.js搭建本地服务器来代理访问静态资源。首先安装express框架，然后配置静态文件目录，并监听3000端口。通过访问http://127.0.0.1:3000或http://localhost:3000来获取本地资源，从而实现调试。这种方法适合初学者，能有效解决本地资源访问难题。

在最新版本中无论是 uni-app 还是微信小程序官方表示都支持本地资源，但任然无法使用

这一问题主要体现在 video 组件上，在我们加载本地资源，一直处于黑屏状态，这让我们进行调试就很不方便

解决方法：nodejs

使用 nodejs 搭建简易的本地服务器来访问静态资源

// 安装 express 框架（npm install express）
let express = require("express")
let path = require("path")

let app = express()

app.use("/public/", express.static("/public/"))

// 使用 express 中 static 中间件
app.use(express.static(path.join(__dirname, "public")))

app.listen(3000, function () {
  console.log("running...");
})

搭建完成后可启动本地服务器

// 在那个文件书写代码，就 node 那个 
node app

通过 http://127.0.0.1:3000/xxx(本地资源名称)

或 http://localhost:3000/xxx(本地资源名称) 来访问

本人小白一枚，主要为了方便调试

同时希望能够帮助到其他初学者