全局置灰操作:小程序置灰、app置灰、H5置灰

这篇具有很好参考价值的文章主要介绍了全局置灰操作:小程序置灰、app置灰、H5置灰。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序全局置灰:

只需要在app.wsxx文件中添加一行代码:

page {filter: grayscale(100%);}

小程序按钮置灰,全栈,微信小程序,html5,前端,小程序

也可以写到对应的页面中,xxx.wsxx 文件中添加:page {filter: grayscale(100%);}

andorid app置灰:

在BaseActivity的onCreate方法中,使用ColorMatrix设置灰度,可调节灰度值。

protected void onCreate(@Nullable Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);



    //方案一

    Paint paint = new Paint();

    ColorMatrix cm = new ColorMatrix();

    cm.setSaturation(0);//灰度效果

    paint.setColorFilter(new ColorMatrixColorFilter(cm));

    getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE,paint);

}

 IOS app置灰:

iOS 提供了Core Image 滤镜,这些滤镜可以设置在UIView.layer上

@interface UIViewOverLay : UIView
@end

@implementation UIViewOverLay
-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    return nil;
}
@end

UIWindow *window = App的Window;
UIViewOverLay *overlay = [[UIViewOverLay alloc]initWithFrame:self.window.bounds];
overlay.translatesAutoresizingMaskIntoConstraints = false;
overlay.backgroundColor = [UIColor lightGrayColor];
overlay.layer.compositingFilter = @"saturationBlendMode";
[window addSubview:overlay];

H5页面置灰:

均是修改grayscale的值

-webkit-filter: grayscale(100%);
/*or*/
-moz-filter:grayscale(100%);
/*or*/
-ms-filter:grayscale(100%);
/*or*/
-o-filter: grayscale(100%);
/*or*/
filter: grayscale(100%);

sub_end......文章来源地址https://www.toymoban.com/news/detail-576792.html

到了这里,关于全局置灰操作:小程序置灰、app置灰、H5置灰的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序&H5设置全局弹窗

    微信小程序&H5设置全局弹窗

    1、头部公告: 2、弹窗类型公告: npm i vue-inset-loader (在项目根目录下创建) 我这里的组件文件名就给他设置为 global-notice

    2024年04月27日
    浏览(11)
  • 微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案

    简单的讲就是我们可以在小程序内放置一个web-view组件来链接我们的HTML页面了。 但是点击跳转页面的时候。页面左上角没有!!返回按钮!!导致回不去了,这不是搞笑的吗。 看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮

    2024年02月08日
    浏览(52)
  • uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮

    uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮

    把上面的静态解构放到src/components/movable/movable.vuewe文件作为自定义组件 此处用的到时uniapp的movable-area组件和内嵌 movable-view 组件,其中movable-area表示可拖动的范围,movable-view用于指示可拖动的区域。 参照文档:movable-area | uni-app官网     movable-view | uni-app官网 想要实现每个页

    2024年02月03日
    浏览(17)
  • 微信小程序跳转H5、小程序、App

    微信小程序跳转H5、小程序、App

    日常开发业务中会遇到微信小程序与H5、其他小程序、App之间的相互跳转,客户对引流用户非常在意。此处粗浅的介绍了微信小程序跳转H5、小程序、App的实现思路。 1、跳转H5 使用微信开放组件 web-view 在微信公众平台-小程序后台配置业务域名,要将校验文件放置到域名根目

    2024年02月16日
    浏览(10)
  • APP跳转H5、微信小程序与微信小程序之间互跳

    plus.share.getServices(function(res) { var sweixin = null; for (var i = 0; i res.length; i++) { var t = res[i]; if (t.id == ‘weixin’) { sweixin = t; } } if (sweixin) { sweixin.launchMiniProgram({ id: item.id, //小程序原始id type: item.type, //环境 0-正式版; 1-测试版; 2-体验版 path: path //指定页的路径,如需传参直接字符串

    2024年02月08日
    浏览(13)
  • uniapp - 实现可拖动悬浮按钮功能,支持手指拖曳放到页面任意位置(详细示例源码及注释,复制粘贴快速植入)全端兼容H5/app/小程序!

    uniapp - 实现可拖动悬浮按钮功能,支持手指拖曳放到页面任意位置(详细示例源码及注释,复制粘贴快速植入)全端兼容H5/app/小程序!

    百度搜的代码都太难用了而且有bug。。。 本文详细讲解在uniapp中实现一个可拖动的悬浮按钮,并且兼容在 H5/app/小程序中完美运行, 你可以直接复制源码,复制到你的项目中,附带 全局组件注册 的方法(要不每个页面都需要引一次), 如下图所示,你自己修改样式就行了,

    2023年04月08日
    浏览(44)
  • uniapp 瀑布流 (APP+H5+微信小程序)

    WaterfallsFlow.vue waterfall.vue

    2024年02月15日
    浏览(48)
  • uniapp判断h5/微信小程序/app端

    区分标识 写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。 #ifdef:if defined 仅在某平台存在 #ifndef:if not defined 除了某平台均存在 %PLATFORM%:平台名称 此方法支持文件有 .vue   (模板里使用  !-- 注释 --) .js   (使用 // 注释) .css  (使用  /* 注释 */) pages.json 

    2024年02月11日
    浏览(61)
  • 微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

    微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

    微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数) 微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新) 微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度

    2024年02月04日
    浏览(45)
  • 微信小程序webview跳转页面后没有返回按钮以及变向解决H5安卓无法监听popstate问题

    做了一个app跳转到小程序关注公众号的需求,小程序里面用webview嵌套公众号的H5。 做完我发现左上角它没!有!返!回!键! 然后!我查了好多资料用过双页面跳转让左上角有返回键,但是吧,它确实是有返回键了但是没办法返回到小程序 ,只是在H5内不停的返回在跳转回

    2024年04月12日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包