快捷菜单

本节主要讲解小程序商城两行快捷菜单的实现。效果见图12-4和12-5所示。
04-微信小程序商城 快捷菜单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)_小程序教程

1.应用知识点分析

知识点包括:
 普通菜单的使用。
 循环菜单的使用。
 1行4列的布局实现。
 跳转的实现。
我们这里主要讲解快捷菜单的3种实现方式:

第1种:本地界面,纯页面布局的制作,适合纯前端人员;见效果图12-4。
第2种:本地数据,本地.js脚本数据来实现实现菜单功能,适合全栈人员;见效果图12-5。
第3种:远程数据,通过.js脚本调用远程数据来实现实现菜单功能,适合全栈人员。

2.实现本地界面

要实现效果如图12-4所示。
提示:我们可以将view当作div来使用。
结构布局分析示意如图12-6所示。
04-微信小程序商城 快捷菜单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)_微信小程序_02
根据上面的布局分析,我们会产生基础的框架,代码示例如下:

<view>  <!—第1-开始-->
<view>  <!—第2-开始-->
<navigator>   <!—第3-开始-->       
	<image> </image><!—第4-图片-->  
<text>  <text><!—第4-文字-->  
</navigator>   <!—第3-结束-->
</view>   <!—第2-结束-->
</view>  <!—第1-结束-->

根据效果图分析出框架的层级后,在每个层级的view加上样式,编码实现即可。
 第1层:定义flex模式,默认就是从左到右的排列。
 第2层:按1行4列的布局来定义显示的格局(4个菜单)。
 第3层:链接,使用系统默认样式。
 第4层:对图片和文字单独定义样式。

说明:第2层和第3层框架的样式也可合并到第3层的链接navigator这里。

.wxml文件代码示例如下:

<!--菜单第行-开始,每个菜单都属于第2-->
<view class="navs"><!—第1-开始-->
    <!—菜单1  品牌大全-->
    <view class="nav-item" ><!—第2-开始-->
         <navigator url="/pages/fenlei/list/01-dingbu"> <!—链接-->
             <image src='/images/menu01.png' class="nav-image"/>
		<text >品牌大全</text>
         </navigator>
</view> <!—第2-介绍-->


<!—菜单2  最新上架-->
    <view class="nav-item" >
          <navigator url="/pages/fenlei/list/01-dingbu">
              <image src='/images/menu02.png' class="nav-image"/>
<text >最新上架</text>
          </navigator>
</view>  

<!—菜单3  用户中心-->
    <view class="nav-item" >
         <navigator url="/pages/huiyuan/index"  open-type="switchTab">
              <image src='/images/menu05.png' class="nav-image"/>
<text >用户中心</text>
         </navigator>
</view>  

<!—菜单4  订单列表-->
    <view class="nav-item" >
         <navigator url="/pages/huiyuan/order/order_list2">
             <image src='/images/menu04.png' class="nav-image"/>
<text >订单列表</text>
         </navigator>
</view>   
   
</view><!—第1-结束-->

.wxss文件样式代码示例如下:

/*菜单样式:1行4列图片的布局*/
/*第1层样式的定义*/
.navs {
display: flex; /*定义为flex模式,详情见7.1 Flex Box介绍   */
  /* 默认是按行排行的,实现1行4列布局 */
}
/*第2层样式的定义*/
.nav-item {
  width: 25%;     /* 按1行4列来折算,每列的比例就是25% */
  display: flex; /* 第2层级里面的元素也定义为flex模式来显示 */  
  align-items: center; /* 上中下对齐方式,这里是居中,
语法见:7.2.5 align-items(上中下对齐) */
  flex-direction: column; /* 默认是按行来显示,这里按列来显示(上面显示图片下面显示文字) 
语法见:7.2.1 flex-direction项目的排列方向 */
}
/*第3层样式的定义*/
.nav-item navigator{ /* 设置内边距 */
  padding: 5px; 
  display: flex; /* 定义第3层内的元素即第4层的图片和文字的布局使用flex,默认从左到右 */
  flex-direction: column; /* 需定义flex布局后,该语句才生效;定义图片和文字从上到下布局 */
align-items:  center; /* 定义内部元素也就是菜单图片和文字左右居中 */
}
.nav-item .nav-image {
  width: 120rpx; /* 设置图片宽度 */
  height: 120rpx; /* 设置图片高度 */
  border-radius: 50%; /* 设置圆角图片 */
}
.nav-item text {
  padding-top: 20rpx; /* 距离顶部的内边距 */
  font-size: 25rpx;   /* 字体大小 */
}

3.实现本地数据

最终实现效果如图14-5所示。
布局分析:
 第1层级:定义整体菜单的样式。
 第2层级:定义for循环,循环显示4个菜单(3,4层级是菜单的内容)。
 第3层级:定义一个view包含图片和文字;同时通过函数和路由来跳转,取消navigator。
 第4层级:定义菜单的图片和文字。
结构布局分析示意如图12-7所示。
04-微信小程序商城 快捷菜单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)_微信小程序_03
根据上面的布局分析,产生基础的框架,代码示例如下:

<view>  <!—第1-开始-->
<block wx:for>  <!—第2-开始-->
<view … >   <!—第3-开始-->       
	<image … > </image><!—第4-图片-->  
<text … >  <text><!—第4-文字-->  
</view>   <!—第3-结束-->
</block>   <!—第2-结束-->
</view>  <!—第1-结束-->

根据效果图分析出框架的层级后,在每个层级的view加上样式,编码实现即可。
.wxml文件代码示例如下:

<!-- 循环菜单-开始 -->
<view class="navs2">
<!-- navs为要循环显示的菜单内容;navs是一个数组,数组的成员是对象(每个菜单的内容)-->
<!— 该类型数组的使用,可以参考 9.1.3数组 -->
    <block wx:for-items="{{navs}}">
        <view class="nav-item" 
           <!—下面定义点击事情的处理函数:点击该菜单跳转到哪个页面-->
	catchtap="catchTapCategory"  
<!--定义date数据,用于传递给函数,下面定义的是菜单名称-->
data-type="{{item.name}}" 
<!--定义date数据,用于传递给函数,下面定义的是菜单的对应的程序路径-->
data-dizhi="{{item.dizhi}}"
<!{{}}中item表示的含义,参考9.1.3数组 -->
>
        <!—下面定义菜单的图片,对应数组中菜单的icon项-->	
                <image src="{{item.icon}}" class="nav2-image"/>
<!—下面定义菜单的名称,对应数组中菜单的name项-->
                <text>{{item.name}}</text>
        </view>
    </block>
</view>

.wxss文件样式代码示例如下:

/*第1层样式的定义*/
.navs2 {
  display: flex; /*定义整体为flex格式,实现从左到右的排列*/
}
/*第3层样式的定义*/
.nav2-item {
  width: 25%; /* 按1行4列来折算,每列的比例就是25% */
  align-items: center;/* 居中 */
  display: flex; /* 定义其内部子元素的排列方式为flex,默认为从左到右 */
  flex-direction: column; /*变更flex的默认排列方式为从上到下排列*/
 
}
.nav2-image {
  width: 120rpx; /* 设置图片宽度 */
  height: 120rpx; /* 设置图片高度 */
  border-radius: 50%; /* 设置圆角图片 */
}
.nav2-item text {
  padding-top: 20rpx; /* 距离顶部的内边距 */
  font-size: 25rpx; /* 字体大小 */
}

逻辑.js脚本编写本地数据,.js文件代码示例如下:

data: 
{
  //定义循环显示的菜单内容;对象数组,语法见9.1.3数组
  //下面定义了表示菜单内容的数组navs,数组的每个成员为对象,每个对象代表的一个菜单
   navs: [
     { 
icon: "/images/menu03.png", 
name: "留言反馈", 
typeId: 0, 
dizhi:"/pages/tmp/form/01-liuyan"
},{ 
	icon: "/images/menu06.png", 
name: "活动列表", typeId: 1, 
dizhi: "/pages/tmp/liebiao/03-tubiaowenzi"
},{ 
icon: "/images/menu07.png", 
name: "帮助中心", 
typeId: 2, 
dizhi: "/pages/tmp/liebiao/02-tupianwenzi"
},{ 
icon: "/images/menu08.png", 
name: "关于我们", 
typeId: 3, 
dizhi: "/pages/tmp/liebiao/01-wenzi"
}         
]
},
catchTapCategory: function (event) 
{
    //下面语句获取参数evetn传递过来的菜单地址
    let route = event.currentTarget.dataset.dizhi
//下面通过api函数跳转到对应页面,语法见11.5.1 wx.navigateTo
    wx.navigateTo({
      url: route
    })
}

4.实现远程数据

WXML页面和WXSS沿用上小节的内容,我们只需要改造菜单数组navs的实现方式。
菜单数组navs的内容我们可以通过网络远程获取:
步骤1:在.js脚本中定义navs空的数组。
步骤2:定义一个函数,获取远程服务器端菜单的数据内容。
步骤3:将获取的菜单内容,赋值给菜单数组navs。

获取远程服务器内容,参见11.1.2 节。远程菜单数据写在txt文本,例如:http://www.x.com/shop-menu.txt。

代码示例如下:

[
     { 
icon: "/images/menu03.png", 
name: "留言反馈", 
typeId: 0, 
dizhi:"/pages/tmp/form/01-liuyan"
},{ 
	icon: "/images/menu06.png", 
name: "活动列表", typeId: 1, 
dizhi: "/pages/tmp/liebiao/03-tubiaowenzi"
},{ 
icon: "/images/menu07.png", 
name: "帮助中心", 
typeId: 2, 
dizhi: "/pages/tmp/liebiao/02-tupianwenzi"
},{ 
icon: "/images/menu08.png", 
name: "关于我们", 
typeId: 3, 
dizhi: "/pages/tmp/liebiao/01-wenzi"
}         
]

菜单的内容你可以通过任何语言,比如php,net,java,asp等生成,数据的来源你可自行从数据库或者其他地方获取,格式按此即可。
.js文件代码示例如下:

data: 
{
   //第一步:定义菜单数组,这里定义空数组,后面通过获取远程数据来填充
   navs: []},
//第二步:定义函数,获取远程数据
fetchData: function () 
{
   wx.request({ //获取远程服务器端数据
      url: "http://www.x.com/shop-menu.txt",
      //第三步:将获取的菜单内容,赋值给菜单数组navs
      success: function (res) // res为系统参数
{ 
 // res.data为远程获取后系统返回的内容,也就是shop-menu.txt的内容
        that.setData({navs: res.data}) //返回的内容,赋值给菜单数组navs
         }
    })
}

【微信小程序参考资料】

(1)微信小程序学习路线 http://www.hzyaoyi.cn/

(2)Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

(3)PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

(4)微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/