，不同的是div是对“块”进行划分，而span是对“行”进行划分。
# 这是一段HTML语言<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
效果如图：
也就是说通过的划分，你可以灵活的在某一行展现不同的效果。同理在小程序中，就是对“行”进行划分的，下边是一段应用text的代码和效果图。（注释：有过前端开发经验的童鞋一定知道HTML+CSS+JS它们之间的关系，这里我做简单直观的介绍。HTML是通过一系列的标签来展现一个前端主体，而CSS就是用来装饰这个前端主体的，也可以说是让你的前端变得更加漂亮，同时前端一定是要与后端进行交互才具备实际应用价值的，因此JS就是用来控制后端的逻辑运算的，例如前端摄取到用户的登录信息，那么此时要去后端的数据库中进行比对，那么后端比对的过程就需要用JS来实现。那么在微信小程序中有WXML+WXSS+JS，也是这个道理）
# 这是用到的js代码var initData = 'this is first linenthis is second line'var extraLine = [];Page({data: {text: initData},add: function(e) {extraLine.push('other line')this.setData({text: initData + 'n' + extraLine.join('n')})},remove: function(e) {if (extraLine.length > 0) {extraLine.pop()this.setData({text: initData + 'n' + extraLine.join('n')})}}})
# 这是WXML代码<view class="btn-area"><view class="body-view"><text>{{text}}</text><button bindtap="add">add line</button><button bindtap="remove">remove line</button></view></view>
其中是提供一个按钮，这些我们以后再深入讨论。
（3）表单组件
通常来说“表单”是用来与用户交互并提交数据的，说到与用户交互，我们可以想一下通常我们在使用一个APP的时候微信小程序自定义顶部导航栏，有哪些用户交互方式？例如：让用户点击按钮（button）、让用户进行单项或者多项选择（checkbox）、让用户输入文本内容（editor）以及让用户将所参与的操作结果进行提交（form）等等。下面我就举几个例子：
1、button组件
如下图所示，分别对应着WXML代码中的8个button按钮。
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button><button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="primary"> primary </button><button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="warn"> warn </button><button bindtap="setDisabled">点击设置以上按钮disabled属性</button><button bindtap="setPlain">点击设置以上按钮plain属性</button><button bindtap="setLoading">点击设置以上按钮loading属性</button><button open-type="contact">进入客服会话</button><button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
2、checkbox组件
# 用到的js代码Page({data: {items:{ name: 'USA', value: '美国' },{ name: 'CHN', value: '中国', checked: 'true' },{ name: 'BRA', value: '巴西' },{ name: 'JPN', value: '日本' },{ name: 'ENG', value: '英国' },{ name: 'TUR', value: '法国' },]},checkboxChange: function (e) {console.log('checkbox发生change事件，携带value值为：', e.detail.value)}})
# 都到的wxml代码{{item.value}}
3、form组件
如下代码功能是：
将用户输入的switch input checkbox slider radio picker 提交（这都是一个个与用户交互的组件）。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
# 用到的JS代码Page({formSubmit: function (e) {console.log('form发生了submit事件，携带数据为：', e.detail.value)},formReset: function () {console.log('form发生了reset事件')}})
# 用到的wxml代码switchsliderinputradioradio1radio2checkboxcheckbox1checkbox2SubmitReset
（4）导航
如下图所示微信读书小程序的导航栏，通过使用navigator和function-page-navigator可以配置你的小程序导航栏样式与属性。
（5）媒体组件
媒体通常指的是视频播放、音频播放、照片拍摄、图片展示等等，这里举例照片拍摄和图片展示来做简单介绍。
1、照片拍摄
通常我们在使用app的时候会用到上传头像或者扫描二维码等功能，这些功能就可以通过媒体组件的camera来实现。如下代码所示，wxml中使用按钮来接收“takePhoto”事件（这里的事件是前端用户操作与后端逻辑判断的桥梁），然后JS代码中执行takePhoto()方法完成相应的逻辑运算（这里的逻辑运算就是调用微信小程序的拍照API，进而来实现拍照功能）。
# 实现一个拍照功能# 使用的wxml代码拍照预览
# 使用到的JS代码Page({takePhoto() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath})}})},error(e) {console.log(e.detail)}})
2、图片展示
如下代码所示，在调用{{array}}的这一层级视图中包含两个次级的，其中{{item.text}}用来调用JS代码中的text参数；中的mode=”{{item.mode}}用来调用JS中的mode参数，进而修饰图片的显示效果。
<view class="page"><view class="page__hd"><text class="page__title">image<text class="page__desc">图片<view class="page__bd"><view class="section section_gap" wx:for="{{array}}" wx:for-item="item"><view class="section__title">{{item.text}}<view class="section__ctn"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}">
# 用到的JS代码Page({data: {array: [{mode: 'scaleToFill',text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'}, {mode: 'aspectFit',text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'}, {mode: 'aspectFill',text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'}, {mode: 'top',text: 'top：不缩放图片，只显示图片的顶部区域'}, {mode: 'bottom',text: 'bottom：不缩放图片，只显示图片的底部区域'}, {mode: 'center',text: 'center：不缩放图片，只显示图片的中间区域'}, {mode: 'left',text: 'left：不缩放图片，只显示图片的左边区域'}, {mode: 'right',text: 'right：不缩放图片，只显示图片的右边边区域'}, {mode: 'top left',text: 'top left：不缩放图片，只显示图片的左上边区域'}, {mode: 'top right',text: 'top right：不缩放图片，只显示图片的右上边区域'}, {mode: 'bottom left',text: 'bottom left：不缩放图片，只显示图片的左下边区域'}, {mode: 'bottom right',text: 'bottom right：不缩放图片，只显示图片的右下边区域'}],src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'},imageError: function(e) {console.log('image3发生error事件，携带值为', e.detail.errMsg)}})
（6）地图
这里有一个地图的示例小程序：
我们使用组件调用小程序的地图功能，如下代码所示，初识位置为相应经纬度的地点：
# 对应的map组件的wxml<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
对应的map.jsPage({data: {markers: [{iconPath: "/resources/others.png",id: 0,latitude: 23.099994,longitude: 113.324520,width: 50,height: 50}],polyline: [{points: [{longitude: 113.3245211,latitude: 23.10229{longitude: 113.324520,latitude: 23.21229}],color:"#FF0000DD",width: 2,dottedLine: true}],controls: [{id: 1,iconPath: '/resources/location.png',position: {left: 0,top: 300 - 50,width: 50,height: 50},clickable: true}]},{console.log(e.type)},{console.log(e.markerId)},{console.log(e.controlId)}})
（7）画布
画布顾名思义就是给你一个空白区域，你可以用笔在上边随意进行创作，那么用什么来做笔呢？在HTML中微信小程序自定义顶部导航栏，canvas元素使用JS在网页上绘制图像，canvas是一块矩形区域，你可以控制其中的每一个像素。例如你可以绘制矩形、圆形、字符以及添加图像等等。
下面提供一个简单的示例，这里用到的canvas的type属性是webgl，除此之外还有type=2d的属性，这些以后详解。
<canvas type="webgl" id="myCanvas"></canvas>
// canvas.jsPage({onReady() {const query = wx.createSelectorQuery() // JavaScript使用id来寻找canvas元素query.select('#myCanvas').node().exec((res) => {const canvas = res[0].nodeconst gl = canvas.getContext('webgl')gl.clearColor(1, 0, 1, 1)gl.clear(gl.COLOR_BUFFER_BIT)})}})
（8）开放能力
———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99