Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor JS 隔离优势 导入的 JS 不再污染全局命名空间. 库和组件的使用者不需要导入相关的 JS.即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写 第一…

1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function addScript(url) { let scriptsIncluded = false; let scriptTags = document.querySelectorAll('head > script'); scriptTags.forEach(scriptTag => { if (scr…

Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor JS 隔离优势 导入的 JS 不再污染全局命名空间. 库和组件的使用者不需要导入相关的 JS.即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写 第一遍载入静态资产请求包含值为 no-…

Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写签名组件 1. 在文件夹wwwroot/lib,添加zxing子文件夹,里面下载库文件(文件文末源码里可复制) qrcode.min.js和zxing.min.js复制到此文件夹. 最终版本参考如下 +zxing |-qrcode.min.js |-zxing.min.js 2. 添加zxingjs…

运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. 在文件夹wwwroot/lib,添加signature_pad子文件夹,里面下载库文件(文件文末源码里可复制) signature_pad.umd.js复制到此文件夹. 最终版本参考如下 +signature_pad |-signature_pad.umd.js 2. 添加app.js文件 +si…

Blazor组件自做五: 使用JS隔离封装Google地图 运行截图 演示地址 正式开始 1. 谷歌地图API 谷歌开发文档 开始学习 Maps JavaScript API 的最简单方法是查看一个简单示例.以下示例显示以澳大利亚新南威尔士州悉尼为中心的地图. 异步加载例子 JS代码 let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { la…

1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加baidu子文件夹,添加baidumap.js文件 2.1 跟上一篇类似,用代码方式异步加载API,脚本生成新的 body > script 元素添加到页面文档,使用异步加载回调 initMapsG 方法初始化地图. var map = null; var containerid = null; export function addScript(key, elementId, dotnetRef, backgroundColo…

1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代桌面和移动端都支持.包括MAUI Blazor navigator.geolocation.getCurrentPosition navigator.geolocation.watchPosition 2.1 获取定位 其中持续定位watchPosition方法会通过wrapper.invokeMe…

一.前言 最近公司要做一个酒店入住的小程序,不可避免的一定会使用到日历,而小程序没有内置的日历组件.在网上看了一下也没有非常适合需求的日历,于是自己写了一个. 二.代码 1. 原理分析 写一个日历只需要知道两件事情: 一个月有多少天: 每个月的第一天是星期几. 2. 功能分析 由于是酒店入住的日历,所以需要实现如下功能: 渲染日历,一般是从本月开始,到半年之后的日历 过去的日期不可选 实现点击获取入住日期.退房日期,以及改变相应日期的颜色和整个时间段的颜色 3. 数据分析 根据最后的功能实现,我…

在之前的博客中提到过看到html5 的websocket后很感兴趣,终于可以摆脱长轮询(websocket之前的实现方式可以看看Developer Works上的一篇文章,有简单提到,同时也说了websocket基本概念)等方式做一个山寨版的web聊天室. 什么是websocket WebSocket 协议是html5引入的一种新的协议,其目的在于实现了浏览器与服务器全双工通信.看了上面链接的同学肯定对过去怎么低效率高消耗(轮询或comet)的做此事已经有所了解了,而在websocket API…