小程序中的各种坑金沙官网线上:

在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。

公司准备APP和小程序并行开发,所以需要开始着手小程序的编写,由于之前只是写过小程序demo,系统开发还是第一次,此篇文章记录小程序中遇到的各种坑。1、小程序button按钮自带边框效果,而且直接设置border无法去掉,需要设置:after的样式

虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记。

.login-user-code button { border: 1rpx solid #ffd530;}.login-user-code button::after { border: 1rpx solid #ffd530;}

金沙官网线上 1

2、登录后跳转到首页时,如果首页在tabBar中设置了路径,就不能用wx.navigateTo跳转,需要用wx.switchTab跳转才能成功;3、给view设置背景图片的时候,不能用本地图片,会导致无法加载。

想要隐藏以上下载按钮,三个样式就可以了,不废话直接贴代码:

background: url('../image/bisai-diwen.png' ) no-repeat center;
video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 50px); 
}

金沙官网线上 2image.png

说白了就是把下载按钮移动到视窗外面,但是这些CSS找了好久啊!!

金沙官网线上,使用网络图片后正常

金沙官网线上 3

 background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;

 

4、这个不算小程序的坑,之前H5没写过,刚知道,设置背景图片透明,但是文字不透明;需要用两个view来实现,父容器设置背景图片,子容器通过rgba设置透明度,就可以实现图片透明,子容器中的文字不透明;代码:

这种方法并不能真正阻止视频的下载,“有心”的用户还是可以在缓存文件里找到加载过的视频文件的,所以就像标题写的一样,只是隐藏。

 <view class='study-body'> <view class='study-body-bg'> 测试测试测试测试测试测试 <view class='study-body-list'></view> </view> </view>

真正的阻止视频的下载还是需要通过服务器端对视频地址进行加密验证。

css代码:父容器

嗯,以上。

.study-body { width: 100%; /* height: 800rpx; */ background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center; background-size: cover; padding-bottom: 50rpx;}

子容器

.study-body-bg { background:rgba(255, 255, 255, 0.7);}

效果对比:

金沙官网线上 4image.png金沙官网线上 5image.png5、小程序中view实现内容超出后不换行,显示为左右滑动,而且隐藏滚动条;省市级三级联动中,小程序内置了组件,直接用picker组件,设置mode="region"即可,但是内哦让区域无法用input显示,只能用view,所以会出现省市县名称过长时超出view宽度;wxml样式

本文由金沙官网线上发布于Web前端,转载请注明出处:小程序中的各种坑金沙官网线上:

您可能还会对下面的文章感兴趣: