uniapp使用vue3打包H5,android或ios加载白屏

前景介绍

        按照uniapp官方文档介绍,根据步骤创建了使用Vue3的项目;执行命令npm run build:h5,

本地安装了http-server,打包之后的dist文件夹,执行http-server后,可以访问;

       但是使用Android或者ios进行本地加载白屏;以Android为例子,将打包后的文件夹存放到asset文件夹下,使用webview的loadUrl加载;

 val webView = findViewById<WebView>(R.id.webview)
 val webSettings = webView.settings
 webSettings.javaScriptEnabled = true
 webSettings.allowFileAccess = true
 webSettings.allowContentAccess = true
 webSettings.domStorageEnabled = true
 // 加载本地 HTML 文件
 val htmlFile = "file:///android_asset/plugin_m1010_01/index.html#pages/index/index" 
// 确保 HTML 文件在 assets 文件夹中
 webView.loadUrl(htmlFile)

但是调试发现,白屏;查看android-studio发现了如下问题

uniapp  Access to script at 'file:///android_asset/assets/index-WZlAV6YJ.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol 。。。。。。

大致意思就是跨域了;按照网上的教程加了一行代码

webSettings.setAllowUniversalAccessFromFileURLs(true);

重新debug调试,可以正常打开了;

PS:亲测了一下,使用vue2的项目打包成h5,是没有这个问题的;应该是vue3的打包改动引起的;

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
UniApp中,可以使用uni-scroll-view组件实现上拉加载和下拉刷新的功能。 首先,在页面中引入uni-scroll-view组件: ```vue <template> <uni-scroll-view class="scroll-view" :enable-back-to-top="true" :scroll-y="true" :lower-threshold="20" :upper-threshold="20" :refresher-enabled="true" :refresher-threshold="45" :refresher-default-style="true" @scrolltolower="loadMoreData" @refresherrefresh="refreshData"> <!-- 内容区域 --> </uni-scroll-view> </template> ``` 其中,`:scroll-y="true"`表示支持纵向滚动,`:lower-threshold="20"`表示距离底部多少距离时触发上拉加载,`:upper-threshold="20"`表示距离顶部多少距离时触发下拉刷新,`:refresher-enabled="true"`表示启用下拉刷新功能,`:refresher-threshold="45"`表示下拉刷新的临界值,`:refresher-default-style="true"`表示使用默认的下拉刷新样式。 在`<uni-scroll-view>`标签中的内容区域,可以放置展示数据的列表或其他组件。 然后,在页面的script中,编写下拉刷新和上拉加载的方法: ```vue <script> export default { data() { return { dataList: [], // 数据列表 page: 1, // 当前页码 pageSize: 10, // 每页条数 isLoadMore: false, // 是否正在加载更多数据 isRefresh: false // 是否正在下拉刷新 } }, methods: { // 加载更多数据 loadMoreData() { if (this.isLoadMore) { return } this.isLoadMore = true this.page++ // 调用加载数据的接口获取数据 // 将获取到的数据添加到dataList中 // 加载后,将isLoadMore设为false }, // 下拉刷新数据 refreshData() { if (this.isRefresh) { return } this.isRefresh = true this.page = 1 // 调用加载数据的接口获取数据 // 将获取到的数据替换dataList中的数据 // 刷新完后,将isRefresh设为false } } } </script> ``` 在loadMoreData方法中,首先判断是否正在加载更多数据,如果是,则不再执行加载数据的操作。然后将isLoadMore设为true,表示正在加载更多数据。接着,调用加载数据的接口获取数据,并将获取到的数据添加到dataList中。最后,将isLoadMore设为false,表示加载。 在refreshData方法中,同样需要判断是否正在下拉刷新。然后将isRefresh设为true,表示正在刷新数据。接着,将页码设为1,表示刷新第一页数据。调用加载数据的接口获取数据,并将获取到的数据替换dataList中的数据。最后,将isRefresh设为false,表示刷新完。 这样就实现了基于Vue3的UniApp上拉加载和下拉刷新功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xvzhengyang

感谢,励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值