小程序
Abudula__
深圳大学计软学生
展开
-
小程序轮播图不同手机屏幕适配展示
在小程序轮播图的时候有时候会出现图片被压缩的情况,这是因为图片是宽度高度比例展示的,但是包裹轮播图的swiper的宽度和高度我们是固定掉的,因此我们得想出个办法解决这个问题,解决办法如下:1.通过在image里绑定bindLoad方法(该方法会)wxml: <view class='slider'> <swiper indicator-dots="{{ true }}" autoplay="{{ true }}" interval="2500" duration="400"原创 2021-01-01 16:21:50 · 669 阅读 · 0 评论 -
canvas基础知识及在其在小程序中使用
canvascanvas是HTM5新引入的能力,方便我们绘画,做游戏等.获取Canvas元素第一步,我们得获取canvas元素,并且得到其渲染上下文,然后利用context.一些列API来绘制我们的图案坐标系画图的第一步,知道画在那里,因此canvas有其坐标系,往右其x坐标增加,往下(对,往下,这个有点反常识,但是以为cannvas以左上角来原点的,因此这个也可以理解了)其y坐标增加.绘画API1.)绘制长方形2.)绘制线条3.)绘制圆弧context.arc(x, y, ra原创 2020-10-20 06:16:13 · 533 阅读 · 0 评论 -
小程序轮播图适配展示
在小程序轮播图的时候有时候会出现图片被压缩的情况,这是因为图片是宽度高度比例展示的,但是包裹轮播图的swiper的宽度和高度我们是固定掉的,因此我们得想出个办法解决这个问题,解决办法如下:1.通过在image里绑定bindLoad方法(该方法在图片加载完后触发),得到图片的宽度和高度.2.得到手机屏幕宽度3.计算swiper的高度,比例展示如下:屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度4.动态的设定swiper的原创 2020-09-02 10:58:43 · 322 阅读 · 0 评论 -
小程序设置背景图片的两种方法总结
背景图片我们会时常遇到设置背景图片,这里简单地总结下两种方法:1.background-imagebackground-image,顾名思义是背景图片的意思,设置父亲元素,然后通过background-image:url(‘图片的相对路径’);的办法来设置背景图片,可以将本地图片上传到github,qq 空间或者base64图片 来获取相对路径.下面有一段简单的代码实例:/*WXML代码...原创 2019-02-18 07:09:07 · 47739 阅读 · 2 评论 -
微信小程序 scroll-view 中使用flex布局
scroll-view小程序中为了可滚动视图区域要得使用scroll-view,但scroll-view有致命的缺陷,就是不支持flex布局。但我们可以通过使用view来包裹scroll-view的方法来使用flex布局.下面直接上代码:<view class="body"> <view class='head'>head</view> <v...原创 2019-01-27 18:05:28 · 13279 阅读 · 1 评论 -
小程序 WXSS样式导入 @import
index.wxmltext{ color: #ff0000;} index.wxss<text>Hello,Netease</text>import.wxss@import'import.wxss';可以通过@import来引入在别的文件中的样式。原创 2018-07-21 16:26:12 · 14996 阅读 · 3 评论 -
小程序的尺寸单位rpx和px
rpx(responsive pixel)是WXSS中引入的新的尺寸单位,可以适配不同的屏幕宽度,规定屏幕宽度为750rpx.<view style="width:200rpx;height:200rpx;background-color:#00ff00;margin-top:100rpx;margin-left:100rpx;">ic</view><vi...原创 2018-07-21 15:26:52 · 2967 阅读 · 0 评论 -
微信小程序 事件
什么是事件:事件是渲染层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。同时,事件也可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。在我们使用的时候事件也可以携带额外信息,如id,dataset,touches等一系列的信息。此外,事件还是连同WXML组件和javascript的桥梁。 举个例子:事件相关的属性:以bind开头的属性是组件...原创 2018-07-26 16:40:00 · 693 阅读 · 0 评论 -
小程序 WXSS wx:key的使用 Now you can provide attr "wx:key" for a "wx:for" to improve performance.
在循环数组的时候有时候会出现如下面的提示。VM1364:2 ./index/index.wxml(anonymous) @ VM1364:2VM1364:3 Now you can provide attr "wx:key" for a "wx:for" to improve performance.> 1 | <view wx:for="{{data}}" c...原创 2018-07-21 14:42:58 · 1023 阅读 · 0 评论 -
小程序 视图容器 view容器
view视图容器:是小程序中最基础的容器,可以实现页结构的划分,页面布局的调整等。除了公共属性,还有4个属性。这里hover-class是指当我们点击的时候会变成什么样的样式,hover-start-time是指当我们点击多久以后才会显示我们hover-class的样式,hover-stay-time是指这个样式会持续多久,hover-stop-propagation解释比较麻烦,因此我写...原创 2018-07-24 16:44:54 · 767 阅读 · 0 评论 -
小程序轮播图 swiper滑块容器
swiper除了公共的属性意外,还有一些特殊的属性:1.指示点控制 indicator是指我们有时候在轮播图上可以看到的小点点,就是提示这这张图片是第几个,还有这里有几个图片。这里通过单纯的字面意思也可以懂得这些属性的意思。indicator-dot翻译为指示点,为boolean ,也就是可以控制是否有轮播图上可以看到的小点点,indicator-color是指这个点点的颜色是什么样的...原创 2018-07-25 10:36:39 · 853 阅读 · 0 评论 -
小程序 moviable-view容器
moviable-view是小程序中可移动视图容器,可以用于制作一些需要滑动操作的场景。需要实现拖动操作的时候需要通过这种方法来实现。moviable-view的属性: 1.缩放控制属性: 2.其它控制3.特殊事件注意:movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。movable-view 必...原创 2018-07-25 11:15:12 · 546 阅读 · 0 评论 -
小程序 cover-view
cover-view组件能够覆盖在原生组件上,从而实现在原声组件上展示一些文本内容,可以覆盖map,video,canvas,camera这4种原声组件。cover-image组件可以覆盖map,video,canvas,camera,从而实现在原生组件上展示一些图片内容。在用法上跟cover-view基本上一致。注意:cover-view cover-view的使用场景:...原创 2018-07-25 14:04:58 · 3969 阅读 · 0 评论 -
小程序组件 icon组件
icon组件是微信小程序提供的图标组件。借助icon组件,可以更低的资源占用展示更加丰富的内容。icon 除了公共属性以外,还有3个参数:对于type来说,只能使用官方提供的这9个类型。size这里要注意了,不是rpx,而是px;使用场景:用户操作后的提示 等待过程种的提醒搜索框里的搜索按钮等。 来举个例子:<view><block wx:fo...原创 2018-07-25 14:41:02 · 834 阅读 · 0 评论 -
小程序 text文本组件
text文本组件是小程序种最基础的组件之一,通过text,我们可以在页面中展示文字。除了基础的组件以外,还有3个参数:selectabel是<view>和<text> 最主要的区分之一,当selectable为true时,可以长按文本选中,可以复制。space可以控制空格的显示格式,decode组件可以去设置是否可以渲染一些特殊的标签,比如说我们的"<"...原创 2018-07-25 15:50:27 · 3241 阅读 · 0 评论 -
小程序 WXSS样式 选择器与优先级
WXSS(weixin stylesheet)是一套样式语言,用于描述WXML的组件样式。就像CSS一样,必须通过选择器选择WXMl的组件,然后进行美化。一:WXSS选择器由于小程序底层采用调用原声组件来构建界面,WXSS不能通过原声组件来控制组件内部的样式和位置,因此WXSS不支持级联选择器。1.:选择器的用法 当我们需要对某个元素进行特殊标志,或它的状态会随着用户...原创 2018-07-20 10:31:29 · 6027 阅读 · 0 评论 -
小程序 Flex模式
传统的盒模型:简单,但在处理实现诸如垂直居中,弹性宽度和特性时会较麻烦。flexbox布局方式:可以快速实现上述的各种场景,以及更多非常常用的排版需求.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。一:flexbox模型通过设置容器的参数,来实现内部的项目按照一定的循序进行排布。2.容...原创 2018-07-20 20:59:50 · 317 阅读 · 0 评论 -
小程序 WXSS 内联样式style和类样式class
内联样式接受动态样式,在运行时会进行解析,用于控制样式的调整。定义单一元素,或使用中发生较大变化的元素。类样式是用于统一类型的多个元素,重复使用的元素,从而减少重复代码的数量。举例如下:index.wxml<view wx:for="{{data}}" wx:key="*this" class="block" style="{{item.style}}">...原创 2018-07-21 14:18:18 · 12236 阅读 · 0 评论 -
小程序javascript同步和异步
同步调用是一种阻塞式调用,调用另一段代码时,必须等待这段代码执行结束并返回结果后,代码才能继续执行下去。比如说,考试的时候,有人的做题方法是这样的,从头开始做,一旦遇到不会做的就会停在哪里,坚决不会跳到后面的题目中去做,这就犹如同步调用的过程,一旦逻辑没有执行完整时,代码会一直等待,代码执行结束,才执行下面的逻辑。 同步执行的情况下,应用程序每次的修改都会执行完成,...原创 2018-07-23 14:35:11 · 1775 阅读 · 0 评论