微信小程序开发2常用组件与小程序发布

开发中常用的组件，所有组件可以看微信开发文档：
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>

详情可以看官方文档：

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等类似的，输入项目描述，点击提交即可。

打开网址： 微信公众平台

扫码登录后，在左侧管理-版本管理，往下拉就可以看到了开发版本有一个提交记录：

 点击右边的下拉箭头，点击选为体验版本：

 选定页面后，提交出现二维码，微信扫码就可以看到小程序具体的内容了。

可以再点击提交审核按钮，这样开发版本变为了审核版本。