微信小程序自定义顶部导航栏 小程序官方组件说明

，不同的是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代码      switch            slider      
      input            radio          radio1      radio2            checkbox          checkbox1      checkbox2            Submit    Reset  

（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参数，进而修饰图片的显示效果。

# 使用到的wxml代码<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    }]  },  regionchange(e) {    console.log(e.type)  },  markertap(e) {    console.log(e.markerId)  },  controltap(e) {    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].node      const gl = canvas.getContext('webgl')      gl.clearColor(1, 0, 1, 1)      gl.clear(gl.COLOR_BUFFER_BIT)    })  }})

（8）开放能力

———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99

admin普通

收藏 海报 链接