这都2021年了，为啥现在才想起来学微信小程序，晚吗？只要开始永远不算晚。我接触小程序还是比较早的，其中还有一个小插曲；2016年春，春节放假刚刚结束。某天，我和同事聊天，我说：“手机上的App太多了，手机太卡，什么时候能出现一种不用下载的App也可以使用里面的功能”。几个月之后，微信小程序正式开启内测。
小程序内测开启，我就马上去下载了开发工具也看了文档，奈何对于刚毕业的我来说，着实有些头疼，最后就不了了之了。
好了，不闲扯了，最近因为公司业务，需要使用支付宝小程序mPass,在自己App中实现小程序模块功能，在做支付宝小程序的同时空闲时间也把微信小程序学习了一遍。
开发工具
小程序开发工具下载，微信官方的这工具开发的时候不太好用，我都是使用VScode同时配合小程序插件进行开发，使用起来相当爽。在官方开发工具上进行调试工作。
美团小程序商家首页实现
我们以美团商家首页实现为例，来看看小程序是如何开发的
-
实现分析
WeChat1d30aabebd936bd74299ca0ff689680a.png
实现如图 商品分类和商品的联动
左边是一个scroll-view右边也是一个scroll-view,同时根据微信小程序scroll-view文档介绍，设置属性scroll-into-view
值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
就可以找到相对应的视图
代码实现
index.wxml
<view class="page_wrap">
<!-- 上面 -->
<view class="top_view_wrap">
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image mode="scaleToFill" class="swiper-image" src="{{item}}" />
</swiper-item>
</block>
</swiper>
</view>
<view class="main_content">
<!-- 左边 -->
<scroll-view class="left_scroll_wrap" scroll-y="{{true}}">
<block wx:for="{{foodData}}" wx:key="id">
<view class="{{selectedIndex==index?'left_wrap_selected':'left_wrap_nomal'}}" bindtap='menuHandle' data-index='{{index}}' data-viewNumb='{{item.viewNumb}}'>
<!-- <view> -->
<text>{{item.foodType}}</text>
<!-- </view> -->
</view>
</block>
</scroll-view>
<!-- 右边 -->
<scroll-view scroll-into-view="{{views}}" class="right_scroll_wrap" scroll-y="{{true}}" bindscroll="scrollhandle" bindscrolltolower='scrolltolower'>
<view class="right_scroll_item">
<!-- 显示 列表 头 标题 -->
<view class="right_item_wrap" wx:for="{{foodData}}" wx:key="id" wx:for-item="bigItem" wx:for-index="section">
<!-- 标题 -->
<view id="{{bigItem.viewNumb}}" class="right_item_title">{{bigItem.foodType}}</view>
<view class="right_item_content" wx:for="{{bigItem.foodList}}" wx:key="id" wx:for-item="smallItem" wx:for-index="row">
{{smallItem.foodName}}
</view>
</view>
</view>
</scroll-view>
</view>
</view>
index.js
data: {
imgUrls:[
'https://seopic.699pic.com/photo/50052/1588.jpg_wh1200.jpg',
'https://seopic.699pic.com/photo/50161/5020.jpg_wh1200.jpg',
'https://seopic.699pic.com/photo/50159/2080.jpg_wh1200.jpg',
'https://seopic.699pic.com/photo/50134/5023.jpg_wh1200.jpg'
],
foodData:[
{
foodType:'热销',
id:'000',
viewNumb:'view0',
foodList:[
{
foodName:'照烧鸡腿',
id:'001',
},
{
foodName:'香辣鱿鱼',
id:'002',
},
{
foodName:'经典酸辣粉',
id:'003',
},
{
foodName:'鸡蛋',
id:'004',
},
{
foodName:'凉皮',
id:'005',
},
{
foodName:'凉皮米皮两掺',
id:'006',
},
{
foodName:'鲜虾鸡腿',
id:'007',
},
{
foodName:'自磨豆浆',
id:'008',
},
]
},
{
foodType:'馅饼',
id:'001',
viewNumb:'view1',
foodList:[
{
foodName:'素三鲜',
id:'001',
},
{
foodName:'照烧鸡腿',
id:'002',
},
{
foodName:'香辣鱿鱼',
id:'003',
},
{
foodName:'藤椒鸡腿',
id:'004',
},
{
foodName:'鲜虾鸡腿',
id:'005',
},
{
foodName:'叉烧里脊',
id:'006',
},
{
foodName:'黑椒牛肉',
id:'007',
},
{
foodName:'酱油汁',
id:'008',
},
]
},
{
foodType:'酸辣粉',
id:'002',
viewNumb:'view2',
foodList:[
{
foodName:'经典酸辣粉',
id:'001',
}
]
},
{
foodType:'面条',
id:'003',
viewNumb:'view3',
foodList:[
{
foodName:'原味米线',
id:'001',
},
{
foodName:'香菇鸡丁刀削面',
id:'002',
},
{
foodName:'蜜汁刀削面',
id:'003',
},
{
foodName:'麻辣面',
id:'004',
},
{
foodName:'酸辣面',
id:'005',
},
{
foodName:'肉丝面',
id:'006',
},
]
},
{
foodType:'混沌',
id:'004',
viewNumb:'view4',
foodList:[
{
foodName:'大馅混沌',
id:'001',
}
]
},
{
foodType:'凉调',
id:'005',
viewNumb:'view5',
foodList:[
{
foodName:'凉皮米皮两掺',
id:'001',
},
{
foodName:'米皮',
id:'002',
},
{
foodName:'凉皮',
id:'003',
}
]
},
{
foodType:'暖心饮品',
id:'006',
viewNumb:'view6',
foodList:[
{
foodName:'红枣山药粥',
id:'001',
},
{
foodName:'自磨豆浆',
id:'002',
},
]
},
{
foodType:'饮料',
id:'007',
viewNumb:'view7',
foodList:[
{
foodName:'君畅乳酸菌',
id:'001',
},
{
foodName:'优酸乳',
id:'002',
},
{
foodName:'矿泉水',
id:'003',
},
{
foodName:'绿茶',
id:'004',
},
{
foodName:'奶茶',
id:'005',
},
{
foodName:'冰红茶',
id:'006',
},
{
foodName:'芬达',
id:'007',
},
{
foodName:'雪碧',
id:'008',
},
{
foodName:'可口可乐',
id:'009',
}
]
},
{
foodType:'热其他销',
id:'008',
viewNumb:'view8',
foodList:[
{
foodName:'鸡蛋',
id:'001',
},
{
foodName:'豆干',
id:'002',
},
{
foodName:'蜜汁鸡爪',
id:'003',
},
{
foodName:'蜜汁鸡腿',
id:'004',
}
]
},
],
selectedIndex:0,
views:'',// 标记 右侧 视频列表的id
menuItemshigetArr:[],//菜单每项距离顶部的高度 每个item 80rpx
},
onLoad: function (options) {
// 根据数据计算出得出 menuItemshigetArr
let {foodData} = this.data;
let {menuItemshigetArr} = this.data;
//总高度
let total_hight = 0;
for (let i = 0; i < foodData.length; i++) {
if (i == 0) {
menuItemshigetArr.push(0);
}else{
var element = foodData[i-1];
let foodCount = element.foodList.length;
let foodHight = foodCount*40;
total_hight = total_hight + foodHight +40;
console.log(total_hight);
menuItemshigetArr.push(total_hight);
}
}
console.log(menuItemshigetArr);
},
menuHandle(e){
let index = e.currentTarget.dataset.index;
//console.log(index);
let viewNumb = 'view'+index; //e.currentTarget.dataset.viewnumb;
let {views} = this.data;
let {selectedIndex} = this.data;
selectedIndex = index;
console.log(index);
console.log(selectedIndex);
// selectedIndex = index;
views = viewNumb;
this.setData({
views,
selectedIndex
});
},
// 滚动右边 实物列表
scrollhandle(e){
let {menuItemshigetArr} = this.data;
let currentY=e.detail.scrollTop;
// console.log(currentY);
for (let i = 0; i < menuItemshigetArr.length; i++) {
let heightBottom = menuItemshigetArr[I];
let heightTop = menuItemshigetArr[i + 1];
// console.log(heightBottom);
// console.log(heightTop);
//判断currentY当前所在的区间
// 最后一项 currentY = 1556
// 1440 - 1840
if (currentY < heightTop && currentY >= heightBottom) {
this.setData({
selectedIndex:i
});
}
}
},
// scroll 滚动到 底部 设置selectedIndex 为 最后一项
scrolltolower(e){
let {menuItemshigetArr} = this.data;
console.log(e);
let type = e.detail.direction;
if (type==='bottom') {
this.setData({
selectedIndex:(menuItemshigetArr.length-1)
});
}
},
index.wxss
page {
background-color: #f3f3f3;
}
.page_wrap {
position: relative;
}
.page_wrap .top_view_wrap {
height: 30vh;
background-color: #f6fa0b;
}
.page_wrap .top_view_wrap swiper {
height: 30vh;
}
.page_wrap .top_view_wrap swiper swiper-item .swiper-image {
height: 30vh;
width: 100%;
}
.page_wrap .main_content {
display: flex;
height: 70vh;
}
.page_wrap .main_content .left_scroll_wrap {
flex: 1;
}
.page_wrap .main_content .left_scroll_wrap .left_wrap_nomal {
display: flex;
height: 80rpx;
align-items: center;
justify-content: center;
}
.page_wrap .main_content .left_scroll_wrap .left_wrap_selected {
display: flex;
height: 80rpx;
align-items: center;
justify-content: center;
background-color: #fff;
}
.page_wrap .main_content .right_scroll_wrap {
flex: 3;
background-color: #fff;
padding-left: 20rpx;
}
.page_wrap .main_content .right_scroll_wrap .right_scroll_item .right_item_wrap .right_item_title {
display: flex;
height: 80rpx;
align-items: center;
background-color: #fff;
font-weight: bold;
}
.page_wrap .main_content .right_scroll_wrap .right_scroll_item .right_item_wrap .right_item_content {
height: 80rpx;
display: flex;
align-items: center;
}
网友评论