首页 > 软件开发 > HTML >

UWP WebView如何引用应用包内html和js

来源:互联网 2023-03-16 19:11:53 503

本经验介绍在UWP开发中,使用WebView控件,如何引用应用包内html和js。XiL办公区 - 实用经验教程分享!

应用场景如:需要把一个前端项目的一部分移植到UWP当中,或者需要在某个页面引用应用包内的js和css。XiL办公区 - 实用经验教程分享!

UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

工具/原料

  • Visual Studio 2015

方法/步骤

  • 1

    首先是关于WebView控件的Source设定(Uri)的几种方式。XiL办公区 - 实用经验教程分享!

    一个是红色框中的http或者https,是引用web。XiL办公区 - 实用经验教程分享!

    一个是绿色框中的...data:,是引用应用在本地的存储文件夹下。XiL办公区 - 实用经验教程分享!

    一个是蓝色框中的...web:,是访问应用包内的资源(比如Assets下)。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 2

    在代码中对WebView进行Navigate时,要访问应用包内,要如图所示使用...-web,只有前半部分不行。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 3

    如果是页面之间相互引用,在应用包内,同文件夹下,a标签的href可以直接设定文件名。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 4

    简单效果如图所示,导航到第一个页面,点击a>链接直接跳转到第二个页面。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 5

    如果还要引用js,css等文件,就要在html页面中写全uri了。如图是应用包内Assets文件夹下的待引用文件。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 6

    和普通的html页面基本一样,使用link引用css,使用script引用js,但是href和src都使用UWP规定的的uri前缀,如图。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 6该信息未经授权抓取自百度经验
  • 7

    再次打开程序,WebView导航以后,可以看到js代码和css样式都被加载并正确使用。XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

    UWP WebView如何引用应用包内html和js?XiL办公区 - 实用经验教程分享!

  • 注意事项

    • 如果遇到问题,可以在下面提出疑问。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!XiL办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码