Xamarin.forms——WebView再研究

最新推荐文章于 2021-01-22 08:31:02 发布

DeadPool loves Star

最新推荐文章于 2021-01-22 08:31:02 发布

阅读量679

点赞数

分类专栏： Xamarin.Forms UI设计文章标签： c# html css javascript xamarin xamarin.form

本文链接：https://blog.csdn.net/weixin_44465434/article/details/107237175

版权

Xamarin.Forms 同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

UI设计

9 篇文章 0 订阅

订阅专栏

博主Deadpool好久没有发关于Xamarin.forms的博客了，一是由于时间有限，二是由于目前再用Xamarin.forms做开发，有些细节不方便透露。等这次比赛做完了，就再来把项目中的收获都写下来。今天写一些WebView的再研究。

项目效果

在这里插入图片描述

项目准备

去GitHub上下载这个或者是在这个老哥那儿下载这个老哥。
这里说明一下，particles.js是一个JavaScript的轻量粒子效果库。

项目结构

在这里插入图片描述

记得在Android.Assets中的文件必须为AndroidAssets（css和js文件）；
.Forms中的StarView.Html必须为嵌入的资源

项目实现

这里说明一下，app.js, particles.js，style.css我就不做展示了，大家放对位置就好。

StarView.html

来给大家看一看Html先

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>简单的星空粒子效果</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="style.css">
    <script type="text/javascript">
        function change_style(style) {
            starView = document.getElementById("particles-js");
            if (style == 0) {
                starView.style.backgroundColor = "azure";
            }
            else {
                starView.style.backgroundColor = "black";
            }
            return starView.style.backgroundColor;
        }
    </script>
</head>
<body>

    <div id="particles-js"></div>

    <!-- scripts 这里直接引用就行了，Xamarin.Forms.WebView会根据BaseUrl去找相应的资源 -->
    <script src="particles.min.js"></script>
    <script src="app.js"></script>
    
</body>
</html>

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="App1.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>

        <WebView
            x:Name="_webView"
            BackgroundColor="DarkBlue"
            HeightRequest="1000" />
        <Button BackgroundColor="Transparent" Clicked="ChangeStyle" />
        <!--这个Button覆盖了整个屏幕，点击屏幕就可以触发ChangeStyle-->
    </Grid>

</ContentPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Essentials;

namespace App1
{
    public enum Theme
    {
        LightTheme,
        DarkTheme
    }

    public partial class MainPage : ContentPage
    {
        public int CurrentTheme = (int)Theme.DarkTheme;
        public MainPage()
        {
            InitializeComponent();
            _webView.Source = LoadHTMLFileFromResource();
        }
        
        
        private WebViewSource LoadHTMLFileFromResource()
        {
            var source = new HtmlWebViewSource();

            // Load the HTML file embedded as a resource in the .NET Standard library
            var assembly = typeof(MainPage).GetTypeInfo().Assembly;
            var stream = assembly.GetManifestResourceStream("App1.WebView.StarView.html");//注意路径，hxdm
            using (var reader = new StreamReader(stream))
            {
                source.Html = reader.ReadToEnd();
                if (Device.RuntimePlatform == Device.iOS)
                {
                    //iOS stuff
                    source.BaseUrl = "ms-appx-web:///";
                }
                else if (Device.RuntimePlatform == Device.Android)
                {
                    source.BaseUrl = "file:///android_asset/";
                }
            }
            return source;
        }

        private async void ChangeStyle(object sender, EventArgs e)
        {
            if(CurrentTheme == (int)Theme.LightTheme)
            {
                CurrentTheme = (int)Theme.DarkTheme;
            }
            else
            {
                CurrentTheme = (int)Theme.LightTheme;
            }
            string result = await _webView.EvaluateJavaScriptAsync($"change_style({CurrentTheme})");
            await DisplayAlert("当前主题颜色颜色", result, "Ok");
        }
    }
}

这里用了一点技巧，就是在获取BaseUrl那里，官网给的是用一个DependenceService去Native获取，不过我觉得太麻烦，本来就是返回一个字符串，所以就用if判断一下就好。这里也得感慨一下Xamarin.Essential的强大。

后记

梳理一下，本文主要介绍的内容如下：

JavaScript、CSS应该放在Xamarin.Forms项目的什么位置以及他们的配置属性；
Html怎么引用JavaScript；
如何利用C#调用JavaScript来改变主题颜色；
如何用一种优雅的方式来设置WebView的BaseUrl；

DeadPool loves Star

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Xamarin.forms——WebView再研究

Xamarin.forms——WebView再研究，制作你的炫酷背景项目效果项目准备项目结构项目实现StarView.htmlMainPage.xamlMainPage.xaml.cs后记博主Deadpool好久没有发关于Xamarin.forms的博客了，一是由于时间有限，二是由于目前再用Xamarin.forms做开发，有些细节不方便透露。等这次比赛做完了，就再来把项目中的收获都写下来。今天写一些WebView的再研究。项目效果项目准备去GitHub上下载这个或者是在这个老哥那儿下载这
复制链接

扫一扫

专栏目录