0%

微信小程序开发记录之六

⚽️微信小程序

wx.previewImage(Object object)

wx.previewImage(Object object):在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
这是小程序开发文档中关于图片的一个API

这次开发中学习并运用了一下。

1
2
3
4
5
6
7
8
9
methods = {
previewImage(e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.pdfImgs // 需要预览的图片http链接列表
})
}
}
1
2
3
<view wx:for="{{pdfImgs}}" wx:for-item="item" wx:key="{{index}}" class="{{pdfImgs.length>1 ? 'pdf-img-2' : 'pdf-img-1'}} {{pdfImgs.length>2 ? 'pdf-img' : 'pdf-img-1'}}">
<image src="{{item}}" data-src="{{item}}" @tap="previewImage"/>
</view>

这里在图片展示的样式上,做了一个处理。
因为UI设计的 pdf图片展示中,只有一张图,两张图,三张图以及更多的样式分别不同。所以用两个三目运算进行判断。

踩坑

  • picker-view picker-view-column
    问题:设置value失效,初始化后,默认还是为[0,0]
    原因: value要在生成picker-view-column之后,再setData,否则默认值设置不成功。
  • new Date(‘yyyy-MM-DD hh:mm’)在ios上的兼容问题
    解决:new Date(‘yyyy/MM/DD hh:mm’)
    分析:这个问题不只是小程序在ios系统上的问题,只要在ios上运行new Date(‘yyyy-MM-DD hh:mm’)都会出错(invalid date),安卓上没问题。new Date()本身应该没问题于是猜测是字符串格式问题,最有可能是中划线的问题,于是替换为比较常见的斜杠,问题解决。

🏐️CSS相关

伪元素before和after

:before和:after发布于CSS2.1中。
在最初,伪元素的语法是使用“:”(一个冒号)
在CSS3中修订后的伪元素使用“::”(两个冒号),也就是::before 和 ::after—以区分伪元素和伪类(比如:hover,:active等)
无论你使用单冒号还是双冒号,浏览器都将能识别它们(IE8只支持单冒号的格式)。

伪元素实际上并不在文档中生成。它们将在外部可见,但是你将不会在文档的源代码中找到它们,因此,实际上它们是“虚假”的元素。

content属性

:before将会在内容之前“添加”一个元素
:after将会在内容后“添加”一个元素。
在它们之中添加内容我们可以使用content属性。
设置:before和:after时必须设置其content属性,否则伪元素就不起作用
content 属性的值可以为:字符串、attr(attr_name)伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值、url/uri引用外部资源,例如图片、counter()调用计数器,可以不使用列表元素实现序号问题

CSS前缀:-webkit,-ms,-o,-moz

css浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀
Trident内核:主要代表为IE浏览器, 前缀为-ms
Gecko内核:主要代表为Firefox, 前缀为-moz
Presto内核:主要代表为Opera, 前缀为-o
Webkit内核:产要代表为Chrome和Safari, 前缀为-webkit