小白进军小程序开发解说之标梵互动信息

本次项目主要用于学习&＃xff0c;其后台数据并非我自己的&＃xff0c;而是借助别人的后台数据&＃xff0c;在微信小程序中渲染界面。就像是开发客户端一样&＃xff0c; 其商品信息及数据是通过web 后台管理系统来运维数据。 通过后台系统提供的API接口文档请求用户数据。


目前主要完成的页面有&＃xff1a;首页&＃xff0c;购物车&＃xff0c;商品详情&＃xff0c;商品搜索功能。
接下来可以分析一下 页面组成结构。
首先整个界面可以分成四部分&＃xff0c;分别是
小程序标题栏
搜索栏
菜单导航
底部tabBar列表
源代码如下&＃xff1a;

{"pages": [ /"pages/index/index","pages/category/index","pages/cart/index","pages/user/index","pages/goods_list/index","pages/goods_detail/index","pages/collect/index","pages/order/index","pages/search/index","pages/feedback/index","pages/login/index","pages/auth/index","pages/pay/index"],"entryPagePath": "pages/goods_list/index","window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#df25aa","navigationBarTitleText": "博讯商城小程序","navigationBarTextStyle": "black","backgroundColor": "#ff00dd","enablePullDownRefresh": true},"tabBar": {"color": "#999","selectedColor": "#ff2d4a","backgroundColor": "#fafafa","position": "bottom","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icons/home.png","selectedIconPath": "icons/home-o.png"},{"pagePath": "pages/category/index","text": "分类","iconPath": "icons/category.png","selectedIconPath": "icons/category-o.png"},{"pagePath": "pages/cart/index","text": "购物车","iconPath": "icons/cart_20190818_110336.png","selectedIconPath": "icons/cart-o.png"},{"pagePath": "pages/user/index","text": "我的","iconPath": "icons/my.png","selectedIconPath": "icons/my-o.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}


接下来我们就来讲一下标签也的实现&＃xff1a;
在这里&＃xff0c;其实我们可以看到有四个标签项&＃xff0c;但只有一个内容面板&＃xff0c; 当点击标签选项时&＃xff0c;选中选项列表&＃xff0c;同时更换内容面板的主题内容即可。而这个实现其实就类似于vue一样&＃xff0c;自定义一个标签页组件。
1&＃xff1a;接下来看一下view视图页面结构的源码实现&＃xff1a;

{{tabs}}"wx:key&＃61;"id"data-index&＃61;"{{index}}"class&＃61;"title_item {{item.isActive ? &＃39;active&＃39;:&＃39;&＃39;}}">{{item.title}}内容面板占位符

从这里看到的是通过容器面板来封装成组件&＃xff0c;其子元素分两部分title和content内容面板
title中遍历标签列表用于显示以及定义对应的事件处理
2: 组件的数据处理与回调
Component({/*** 组件的属性列表*/properties: {tabs:{type: Array,value: []}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleClick(e){const {index} &＃61;e.currentTarget.datasetthis.triggerEvent("itemChange",{index})}}
})


如何引用组件

1&＃xff1a;在页面xxx.json中引入组件
{"usingComponents": {"Search":"../../Components/Search/Search","Tab":"../../Components/Tab/Tab"},"enablePullDownRefresh": true,"navigationBarTitleText": "商品列表"
}
2&＃xff1a;在页面中使用组件视图


{{tabs}}" binditemChange&＃61;"handleItemChange">{{tabs[0].isActive}}">{{goodsList}}"wx:key&＃61;"goods_id" hover-class&＃61;"navigator-hover" url&＃61;"/pages/goods_detail/index?goods_id&＃61;{{item.goods_id}}">{{item.goods_big_logo &＃61;&＃61;&＃39;&＃39;?&＃39;../../icons/cart-o.png&＃39;:item.goods_big_logo}}" mode&＃61;"widthFix" />{{item.goods_name}}&＃xffe5; {{item.goods_price}}销量 {{item.goods_number}}访问量 {{item.hot_number}}0

3&＃xff1a;在xxx.js处理事件回调后的数据
data: {tabs:[{id: 0 ,title: "尺寸",isActive: true},{id: 1 ,title: "价格",isActive: false},{id: 2 ,title: "评价",isActive: false},{id: 3 ,title: "销量",isActive: false}],goodsList:[]}&＃xff0c;handleItemChange(e){console.log(e)const {index} &＃61;e.detaillet { tabs } &＃61; this.datatabs.forEach((v,i)&＃61;>v.isActive &＃61; ( i &＃61;&＃61;&＃61; index) ? true:false)this.setData({tabs})}}

编辑:标梵互动(https://weibo.com/Biaofun)