微信小程序开发教程之组件
2016-09-24 21:05
846 查看
study01
开发工具下载路径:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359
视频教程:http://v.youku.com/v_show/id_XMTczNjc4Mjk5Mg==.html
我这里仅抛出常见开发问题哦:
1,image和text一起如何实现换行
微信小程序本质上是对android和ios的接口调用,跟html是不一样的,是没有办法通过<br>或者其他方式来直接实现换行。
但是可以通过设置父级视图为列布局来实现换行
2,view的居中问题
方案一:通过设置父级视图align-items:center;那么所有的子视图都可以实现居中
方案二:子视图设置margin:auto;也可以实现居中
3,px和rpx单位的转换,以及对应的意义
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
不同的屏幕的分辨率是不一样的,为了更好的兼容各个手机设备,所以建议所有的度量单位都是用微信官方推荐的rpx。
4,sroll-view是默认可列布局,如何实现行布局,并可滑动。
这里表示子元素设置为行内元素,并在父级视图中指出不换行。这样就完成了在一行中布局。
study02
视频教程:http://v.youku.com/v_show/id_XMTczNzY1MTA2OA==.html
swiper
问题:
1,直接在view后面添加swiper组件,然而并没有显示组件内容。
因为该view是系统自动生成,并设置样式为container,container在app.wxss中被设置height:100%;即占满了整个屏幕,那么在后面添加的任何的组件都是没有办法在屏幕上看到的。理论上来说,设计者就是希望你把所有的组件都放在container里面,而不是后面。container即是容器的意思,用来容纳各种组件。
2,swiper autoplay=false时,也会发生自动切换.
这里swiper有个bug,autoplay主动设置为false,也会出现自动滑动的bug。这个bug比较明显,应该很快微信就可以修复的。
目前为止,只有不设置swiper的autoplay就可以实现不自动滑动效果。
3,indicator-dots的位置可以调整吗?
indicator-dots目前是没有开放接口调整精确位置,但是可以通过设置swiper的width,height来调整dots的大概位置。毕竟这只是个简单的装饰,不用太在意。
===========喜欢的可以收藏文章,或者关注我哦,将持续更新文章以及教学视频=========
开发工具下载路径:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359
视频教程:http://v.youku.com/v_show/id_XMTczNjc4Mjk5Mg==.html
我这里仅抛出常见开发问题哦:
1,image和text一起如何实现换行
微信小程序本质上是对android和ios的接口调用,跟html是不一样的,是没有办法通过<br>或者其他方式来直接实现换行。
但是可以通过设置父级视图为列布局来实现换行
<view style="margin-top:200rpx;font-size:15px;color:orange;display:flex;flex-direction:column;"> <text style="">pqfitness</text> <image src="../../resource/images/pqfitness.jpg" style="width:100px;height:80px;"></image> </view这里就是设置了display:flex;flex-direction:colunm;这个问题解决了。这里系统默认是设置的行布局。
2,view的居中问题
方案一:通过设置父级视图align-items:center;那么所有的子视图都可以实现居中
方案二:子视图设置margin:auto;也可以实现居中
3,px和rpx单位的转换,以及对应的意义
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
不同的屏幕的分辨率是不一样的,为了更好的兼容各个手机设备,所以建议所有的度量单位都是用微信官方推荐的rpx。
4,sroll-view是默认可列布局,如何实现行布局,并可滑动。
<scroll-view scroll-x="true" style="width:220px;margin:10px auto;white-space: nowrap;" > <view style="background-color:green;width:200px;height:100px;display:inline-block;">1</view> <view style="background-color:yellow;width:200px;height:100px;display:inline-block;">2</view> <view style="background-color:green;width:200px;height:100px;display:inline-block;">3</view> </scroll-view>scroll-view设置white-space:nowrap;并且子元素设置为display:inline-block; 这两个样式的设置必须同时配置。
这里表示子元素设置为行内元素,并在父级视图中指出不换行。这样就完成了在一行中布局。
study02
视频教程:http://v.youku.com/v_show/id_XMTczNzY1MTA2OA==.html
swiper
<swiper style="margin-top:100rpx;width:300rpx;height:100rpx;" indicator-dots="true" autoplay="true"> <swiper-item> <view style="background-color:yellow;width:300rpx;height:100rpx;display:block;">1</view> </swiper-item> <swiper-item> <view style="background-color:green;width:300rpx;height:100rpx;">2</view> </swiper-item> </swiper>swiper和swiper-item里面的view都是需要设置width和height哦。最好是一样的大小。
问题:
1,直接在view后面添加swiper组件,然而并没有显示组件内容。
因为该view是系统自动生成,并设置样式为container,container在app.wxss中被设置height:100%;即占满了整个屏幕,那么在后面添加的任何的组件都是没有办法在屏幕上看到的。理论上来说,设计者就是希望你把所有的组件都放在container里面,而不是后面。container即是容器的意思,用来容纳各种组件。
2,swiper autoplay=false时,也会发生自动切换.
这里swiper有个bug,autoplay主动设置为false,也会出现自动滑动的bug。这个bug比较明显,应该很快微信就可以修复的。
目前为止,只有不设置swiper的autoplay就可以实现不自动滑动效果。
3,indicator-dots的位置可以调整吗?
indicator-dots目前是没有开放接口调整精确位置,但是可以通过设置swiper的width,height来调整dots的大概位置。毕竟这只是个简单的装饰,不用太在意。
===========喜欢的可以收藏文章,或者关注我哦,将持续更新文章以及教学视频=========
相关文章推荐
- 微信小程序开发教程之组件开发以及wxss介绍
- 微信小程序开发教程(破解版IDE 无内测资格也可使用)
- 首个微信小程序开发教程!
- 开发微信小程序入门教程,含破解工具
- 微信小程序开发教程系列-序言
- 微信小程序开发入门教程
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
- 首个微信小程序开发教程!
- 微信小程序开发教程,大多数人都搞错的八个问题
- 微信小程序开发教程
- 全球首个实战类微信小程序开发教程
- 微信小程序开发教程系列-序言
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
- 提示:微信小程序开发教程链接
- 微信小程序开发教程
- 微信小程序开发入门教程
- 微信小程序开发教程!
- 微信小程序 (应用号)开发(教程)文档,内附开发工具及工具使用方法
- 微信 小程序 官方教程 开发文档 开发工具