微信小程序入门（2）-----常用标签

最新推荐文章于 2025-05-02 10:26:56 发布

原创最新推荐文章于 2025-05-02 10:26:56 发布 · 611 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了微信小程序中的一些基础但重要的标签，包括view（类似HTML的div）、text（文本标签）、image（图片展示）、navigator（实现页面跳转）、scroll-view（实现滚动效果）、button（交互按钮）和form（数据采集）以及input（用户输入）。每个标签都提供了简要的用法说明，并链接到官方详细文档供深入学习。

1.新建完项目，index.wxml,index.wxss可以先清空。

view标签：

类似于html的div，块元素，但是它多了一些内置属性

用法：

<view>HELLO WORLD</view>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

简单示例：

<!--pages/index/index.wxml-->
<view class="box" hover-class="hover-classA">HELLO WORLD</view>


/* pages/index/index.wxss */
.box{
  color: rgb(52, 121, 52);
  width: 100%;
  height: 300px;
  margin-top: 30px ;  
  background: darkorange;
}
.hover-classA{
  background: darkorchid;
}

text标签：

文本标签

用法：

<text>HELLO WORLD</text>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

image标签：

图片标签

用法：

<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgonglve.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3D845d923d910ef12d2bf9e7a6%26type%3Dpic%26src%3D50b60e99edd01d5309894e68c0362d1e.png&refer=http%3A%2F%2Fgonglve.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061024&t=fb7e2397bfc620ff73e91e45ed197a7b"></image>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

navigator标签

超链接标签，类似于html中的<a>,但是在小程序里只能跳转本项目，或者其他小程序

<navigator url="/pages/logs/logs">aaaa</navigator>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

scroll-view标签

可以将元素横向放在此标签内，可左右拖拽显示

//先设定view的样式
.outBox{
    //让在此view里的元素都在一行
  display: flex;
}
.inBox{
    //所有的view元素与左相间距30px
  padding-left: 30px;
}

//加上scroll-x属性就可横向拖动了
<scroll-view scroll-x>
  <view class="outBox">
    <view class="inBox">
      <image id="imageA"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgonglve.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3D845d923d910ef12d2bf9e7a6%26type%3Dpic%26src%3D50b60e99edd01d5309894e68c0362d1e.png&refer=http%3A%2F%2Fgonglve.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061024&t=fb7e2397bfc620ff73e91e45ed197a7b">
      </image>
    </view>
    <view class="inBox">
      <image id="imageA"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgonglve.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3D845d923d910ef12d2bf9e7a6%26type%3Dpic%26src%3D50b60e99edd01d5309894e68c0362d1e.png&refer=http%3A%2F%2Fgonglve.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061024&t=fb7e2397bfc620ff73e91e45ed197a7b">
      </image>
    </view>
    <view class="inBox">
      <image id="imageA"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgonglve.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3D845d923d910ef12d2bf9e7a6%26type%3Dpic%26src%3D50b60e99edd01d5309894e68c0362d1e.png&refer=http%3A%2F%2Fgonglve.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061024&t=fb7e2397bfc620ff73e91e45ed197a7b">
      </image>
    </view>
    <view class="inBox">
      <image id="imageA"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgonglve.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3D845d923d910ef12d2bf9e7a6%26type%3Dpic%26src%3D50b60e99edd01d5309894e68c0362d1e.png&refer=http%3A%2F%2Fgonglve.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061024&t=fb7e2397bfc620ff73e91e45ed197a7b">
      </image>
    </view>
    <view class="inBox">
      <image id="imageA"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgonglve.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3D845d923d910ef12d2bf9e7a6%26type%3Dpic%26src%3D50b60e99edd01d5309894e68c0362d1e.png&refer=http%3A%2F%2Fgonglve.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061024&t=fb7e2397bfc620ff73e91e45ed197a7b">
      </image>
    </view>
  </view>
</scroll-view>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

button标签

按钮标签

<button>来点我一下</button>
<button size="mini">来点我一下</button>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

form标签

表单标签，主要是采集录入信息

<form bindsubmit="onsubmit">

  <button form-type="submit">提交</button>

</form>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/form.html

input标签

录入框标签，可以录入数据

//.wxss 设置下录入框的边框
input{
  border: 1px solid black;
}

//.wxml
<input type="text"></input>

其他详细用法：https://developers.weixin.qq.com/miniprogram/dev/component/input.html