开发中常用的组件,所有组件可以看微信开发文档:
cover-image | 微信开放文档
常用的6个:view,scroll-view,swiper && swiper-item,text && rich-text,button,image。
1.view
属性 hover-class :设置按下控件的颜色。
在文件 index.wxml 添加一个 view :
<view class ="test-01" hover-class="test-hover-01">这是view</view>
test-01 为控件的样式, test-hover-01 为按下的样式:
在 index.wxss 文件加入:
/**index.wxss**/
.test-01 {
font-size: 28px;
background-color: blue;
width: 375rpx;
/**rpx:一个rpx为页面宽度的1/750,375为页面的一半**/
}
/**按下效果**/
.test-hover-01 {
background-color: brown;
}
保存就可以在左侧模拟器点击测试了。
属性 hover-stop-propagation:是否阻止父节点的点击状态 。
类似于处理一个冲突,当父节点和子节点都设置了点击的UI,上面设置为 true,就可以分别显示点击的结果。index.wxml 加入:
<view class="test-01-parent" hover-class="test-hover-01">
<view class ="test-01"
hover-class="test-hover-01"
hover-stop-propagation="true">这是view</view>
</view>
然后 index.wxss 加入:
/**index.wxss**/
.test-01-parent {
background-color: coral;
padding: 20px;
}
.test-01 {
font-size: 28px;
background-color: blue;
width: 375rpx;
/**rpx:一个rpx为页面宽度的1/750,375为页面的一半**/
}
/**按下效果**/
.test-hover-01 {
background-color: brown;
}
这样就可以处理点击子节点和父节点的冲突。
2.scroll-view
scroll-view 为一个滚动的控件。
scrool-view 要有固定的长或宽,才可以实现滚动。
scroll-y="true" 实现竖向滚动
scroll-x="true" 实现横向滚动
在 index.wxml 加入代码:
<scroll-view
class="test-scroll-view" scroll-y="true"
scroll-x="true">
<view class="scroll-child scroll-child-01">1</view>
<view class="scroll-child scroll-child-02">2</view>
<view class="scroll-child scroll-child-03">3</view>
</scroll-view>
在index.wxss 加入代码:
.test-scroll-view {
width: 150px;
height: 150px;
background-color: blue;
margin-left: 100px;
}
.scroll-child {
width: 200px;
height: 200px;
}
.scroll-child-01{
background-color: gold;
}
.scroll-child-02{
background-color: red;
}
.scroll-child-03{
background-color: wheat;
}
这样就可以实现横向和竖向同时滚动了。
3.swiper
swiper 为广告栏滚动的组件
在里面放置 swiper-item 组件即可。
属性 indicator-dots="true" :是否打开下方小点。
属性 indicator-active-color="#ffffff" 设置下方小点的选中颜色。
属性 autoplay="true" 是否可以自动滚动,默认5秒。
更多属性见微信开放文档。
在 index.wxml 加入代码:
<swiper indicator-dots="true"
indicator-active-color="#ffffff"
autoplay="true">
<swiper-item class="scroll-child-01">A</swiper-item>
<swiper-item class="scroll-child-01">B</swiper-item>
<swiper-item class="scroll-child-01">C</swiper-item>
</swiper>
这样,一个简单的广告栏就好了:
4.text 和 rich-text
text:展示文本。
rich-text:展示富文本。
text 与 view 不同的地方,无论多少 text 都会在同一行显示,而每个 view 都会分行。
在 index.wxml 加入代码:
<text>文本1</text>
<text>文本2</text>
<view>view1</view>
<view>view2</view>
模拟器运行效果:
富文本 rich-text 可以用 nodes 属性添加前端代码。
在 index.wxml 中加入代码:
<rich-text nodes="{{html2}}" ></rich-text>
在 index.js 中加入代码:
Page({
data:{
html2:
`<div>
<span>请说出你最喜欢最喜欢的明星?</span>
<ul>
<li>易烊千玺♂</li>
<li>迪丽热巴♀</li>
</ul>
</div>`
}
})
模拟器运行结果:
5.button
button 一个按钮,重要属性:open-type,表示微信开发能力,比如点击按钮直接获取当前用户的登录信息等。
简单的使用:
<button type="warn">按钮1</button>
详情可以看官方文档:
6.image
image:加载图片。
src 属性写入图片的地址。
mode 属性图片的缩放模式,默认是宽高拉伸填满整个控件。
常用为 aspectFit,图片按照不拉伸,按照纵横比缩放图片,来完全显示图片。
示例代码:
<image src="https://hbimg.b0.upaiyun.com/cb7e9469203842dcf2f2cf576892eca980a3df8ba56a-9tJf6o_fw658"
mode="aspectFit"></image>
7.小程序上传
点击右上角的的上传按钮
出来弹窗,点击确定,输入版本号,如:1.0.0 或 1.0.1等类似的,输入项目描述,点击提交即可。
打开网址: 微信公众平台
扫码登录后,在左侧管理-版本管理,往下拉就可以看到了开发版本有一个提交记录:
点击右边的下拉箭头,点击选为体验版本:
选定页面后,提交出现二维码,微信扫码就可以看到小程序具体的内容了。
可以再点击提交审核按钮,这样开发版本变为了审核版本。