博客 (117)

引用

jQuery、moment.js、daterangepicker

例子

$('.x_dates').daterangepicker({
    "timePicker": false, // 是否显示时间
    //"dateLimit": {
    //    "days": 7 // 可选中的最大区间（天）
    //},
    "ranges": { // 快捷栏
        "今天": [moment(), moment()],
        "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        "最近 7 天": [moment().subtract(6, 'days'), moment()],
        "最近 30 天": [moment().subtract(29, 'days'), moment()],
        "本月": [moment().startOf('month'), moment().endOf('month')],
        "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: daterangepicker_startDate, // moment(),
    endDate: daterangepicker_endDate, // moment(),
    autoUpdateInput: true,
    "locale": {
        "direction": "ltr",
        "format": "YYYY-MM-DD", // YYYY-MM-DD HH:mm
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "自定义",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
    }
}, function (start, end, label) {
    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    fn_daterangepicker_changed(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
});

官网（含配置工具）

http://www.daterangepicker.com/

GitHub

https://github.com/dangrossman/daterangepicker

配置工具

下载的包中的 demo.html

Demo

https://awio.iljmp.com/5/drpdemo

附 ASP.NET Form 相关：

400：

Response.StatusCode = 400;
Response.Write("错误提示");
Response.End();

项目 "***" 指向“netstandard2.1”。它不能被指向“.NETFramework,Version=v4.8”的项目引用。

可能的原因是：Standard 库项目中存在一些警告，譬如 NuGet 包中的 Newtonsoft.Json 12.0.3 可能不兼容 Standard 2.1

解决这些警告，Web 项目再重新引用库项目即可正常发布。

ueditor.all.min.js: Uncaught DOMException: Blocked a frame with origin "http://localhost:4492" from accessing a cross-origin frame.

    at baidu.editor.ui.Dialog.close

当引用第三方 CDN 静态资源的方式部署百度编辑器时，使用多图上传、涂鸦等功能（弹出框使用 iframe 标签引用 CDN 上的网页）会报上述跨域错误。

官方并没有给出这种部署方案（即客户端页面与页面之间的 iframe 跨域）的完美跨域方法。

但官方针对服务端和客户端分离的跨域情形进行了说明：

http://fex.baidu.com/ueditor/#dev-crossdomain

对于不同场景下 WebP 的使用，我们总结了一些解决方案，如下：

 1、若使用场景是浏览器，可以：

JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片（https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp）

使用 WebP 支持插件：WebPJS：http://webpjs.appspot.com，下载 webpjs-0.0.2.min.js

 2、若使用场景是 App，可以：

Android 4.0 以下 WebP 解析库（https://github.com/alexey-pelykh/webp-android-backport）

iOS WebP 解析库（https://github.com/carsonmcdonald/WebP-iOS-example）

 3、转换工具：

智图（http://zhitu.tencent.com）

iSparta（http://isparta.github.io/）

阿里云 OSS 格式转换：https://help.aliyun.com/document_detail/44703.html

腾讯云数据万象格式转换：https://cloud.tencent.com/document/product/460/36543

七牛：https://developer.qiniu.com/dora/api/1279/basic-processing-images-imageview2

将 closeOnConfirm 设置为 false，需要关闭时调用 this.close();

例：

var $promt = $('#my-prompt').modal({
    relatedTarget: this,
    closeOnConfirm: false,
    closeOnCancel: false,
    onConfirm: function (e) {
        if (!e.data) {
            alert('输入点东西吧！')
        } else {
            alert('输入了');
            this.close();
        }
    },
    onCancel: function (e) {
        alert('不想说!');
    }
});

* 若无特殊注明，本文中的“手机”包含平板电脑

判断网页是否在移动设备中打开

Web Form：

public static bool IsMobileDevice
{
    get
    {
        return (HttpContext.Current.Request.Browser?.IsMobileDevice ?? false)
            || (HttpContext.Current.Request.UserAgent?.Contains("Mobile") ?? false);
    }
}

ASP.NET Core：

好像还没有找到，可能是因为随着响应式布局的流行以及电脑和手机之间的界线越来越不明朗，取消了这个判断？

判断网页是否在微信浏览器中打开（宽松）

Web Form：

public bool IsInWechat
{
    get
    {
        return HttpContext.Current.Request.UserAgent?.Contains("MicroMessenger") ?? false;
    }
}

ASP.NET Core：

需注入 IHttpContextAccessor

public bool IsInWechat
{
    get
    {
        string ua = httpContextAccessor.HttpContext.Request.Headers[HeaderNames.UserAgent];
        return ua?.Contains("MicroMessenger") ?? false;
    }
}

判断网页是否在微信浏览器中打开（严谨）

使用 JS-SDK 网页授权来判断

安装 Nuget 包：

BuildBundlerMinifier

项目根目录创建绑定配置文件：bundleconfig.json

示例：

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css",
      "wwwroot/css/custom.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

配置文件中所有路径都相对于项目根目录（而非静态文件根目录 wwwroot），因此配置的路径都要以“wwwroot”开头。

outputFileName 是压缩合并后的文件，inputFiles 是被压缩合并的原始文件集合。

对于 js 配置部分，minify.enabled 配置是否缩小，renameLocals 配置是否修改变量名，sourceMap 配置是否生成 map 映射文件。

引用示例：

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

asp-append-version 表示是否在引用路径添加版本参数，可实现在文件有修改时及时在客户端浏览器中生效。

* 注意：有时候“生成”不一定生效，“重新生成”肯定会生效。

更多高级用法请参考官方文档。

打开 appsettings.json，添加一项配置（如下方示例中的“SiteOptions”项）

* 注意，如需配置开发环境与生产环境不同的值，可单独在 appsettings.Development.json 文件中配置不同项，格式层次须一致；

C# 中习惯用强类型的方式来操作对象，那么在项目根目录添加类（类名以 SiteOptions为例），格式与 appsettings.json 中保持一致：

public class SiteOptions
{
    public ERPOptions ERP { get; set; }
    public WeixinOpenOptions WeixinOpen { get; set; }
    public WeixinMPOptions WeixinMP { get; set; }
    public SMSOptions SMS { get; set; }
    public AliyunOSSOptions AliyunOSS { get; set; }

    /// <summary>
    /// 单个文件上传的最大大小（MB）
    /// </summary>
    public int MaxSizeOfSigleFile_MB { get; set; }

    /// <summary>
    /// 单个文件上传的最大大小（字节）
    /// </summary>
    public int MaxSizeOfSigleFile_B => MaxSizeOfSigleFile_MB * 1024 * 1024;

    public class ERPOptions
    {
        public int ChannelId { get; set; }
        public string AppKey { get; set; }
    }
    public class WeixinOpenOptions
    {
        public string AppId { get; set; }
        public string AppSecret { get; set; }
    }
    public class WeixinMPOptions
    {
        public string AppId { get; set; }
        public string AppSecret { get; set; }
    }
    public class SMSOptions
    {
        public string AppKey { get; set; }
    }
    public class AliyunOSSOptions
    {
        public string Endpoint { get; set; }
        public string AccessKeyId { get; set; }
        public string AccessKeySecret { get; set; }
        public string BucketName { get; set; }

        /// <summary>
        /// 格式：//域名/
        /// </summary>
        public string CdnUrl { get; set; }
    }
}

在 Startup 中注入 IConfiguration，并在 ConfigureServices() 方法中添加服务（注意使用 GetSection() 映射到自命名的“SiteOptions”项）

在控制器中使用：

在控制器类中键入“ctor”，并按两次 Tab 键，创建构造函数

在构造函数中注入“IOptions”，并在 Action 中使用

using Microsoft.Extensions.Options;

public class TestController : Controller
{
    private readonly IOptions<SiteOptions> options;

    public TestController(IOptions<SiteOptions> options)
    {
        this.options = options;
    }

    public IActionResult Index()
    {
        return View(options.Value.ERP.ChannelId.ToString());
    }
}

在视图中使用：

@using Microsoft.Extensions.Options
@inject IOptions<SiteOptions> options

@options.Value.ERP.ChannelId

完整操作步骤如下：

1. 安装 NuGet 包：Microsoft.AspNet.Web.Optimization

2. 打开 Views 目录（如果是应用于区域，则为区域的 Views 目录）中的 web.config，在 <namespaces /> 节点中添加

   <add namespace="System.Web.Optimization" />

3. 在 App_Start 目录中创建类文件 BundleConfig.cs，更改其命名空间为应用程序的默认命名空间（即移除 .App_Start），创建方法：

   public static void RegisterBundles(BundleCollection bundles)
   {
       bundles.Add(new StyleBundle("~/虚拟路径（不能有点）").Include("~/CSS文件路径"));
       bundles.Add(new ScriptBundle("~/虚拟路径（不能有点）").Include("~/JS文件路径"));
   }

   虚拟路径应避免与页面访问路径相同。Include 可包含多个文件，效果是合并输出，注意引用的顺序。

4. 打开 Global.asax，在 Application_Start() 事件中添加代码

   BundleTable.EnableOptimizations = true; // 该设置使在开发模式中实现压缩代码，不设置则仅在发布后压缩代码
   BundleConfig.RegisterBundles(BundleTable.Bundles);

5. 视图页面中引用样式表或脚本

   @Styles.Render("~/CSS虚拟路径")
   @Scripts.Render("~/JS虚拟路径")

   使用 Render 的好处是，ASP.NET 会自动给引用地址加上参数，可在更改脚本或样式表内容后更改这些参数使浏览器缓存立即失效。

如果你的项目中已经安装并使用 Bundle，那么只需要参考第 4 步，将 BundleTable 的 EnableOptimixations 设为 true。

以下是一些常见异常的解决方法：

The name 'Styles' does not exist in the current context

The name 'Scripts' does not exist in the current context

解决：参步骤 2。

引用的样式表或脚本不存在（报 404 错误）

解决：步骤 3 中的虚拟路径不规范。