微信LV项目（全流程）

打开WX开发者工具，不使用模板

效果展示

 

一、创建页面

在app.json配置lv-list页面、和lv-like页面，header头部组件、menu喜欢的包包组件 

二、在lv-list下创建.js文件手写数据

// CommonJS模块语法
module.exports = [{
  id: '001',
  img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--M20761_PM2_Front%20view.jpg?wid=555&hei=555',
  name: 'RED 挎包',
  price: '13566'
}, {
  id: '002',
  img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--M20379_PM2_Front%20view.jpg?wid=555&hei=555',
  name: 'BLUE 挎包',
  price: '16566'
}, {
  id: '003',
  img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--M20379_PM2_Front%20view.jpg?wid=555&hei=555',
  name: 'WHITE 挎包',
  price: '24566'
}];

三、封装头部组件

wxml页面

<!-- header组件wxml页面 -->
<view class="header">
	<button class="btn nav"></button>
	<button class="btn" data-type="like" bindtap="go"></button>
	<view class="logo"  data-type="list" bindtap="go"></view>
	<button class="btn"></button>
	<button class="btn"></button>
</view>

wxss页面

.header {
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 27rpx;
  border-bottom: 3rpx solid #e3e2dd;
}
.header .btn {
  width: 72rpx;
  height: 100%;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45.3rpx;
}
.header .nav {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAATElEQVRo3u3WIQ6AMBAEwIJF1fX/r8Oh0PQJh2hyl2ZGr9h12xoAQDnHn9Do15dZ8n7esOeZWXAlQwBgJ75WNYYAwE58rWoMAQAgNAE5UwwWx5fWLgAAAABJRU5ErkJggg==);
}
.header .like {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAD10lEQVRo3u2YW0wTWRzGP7YmSioYHjbBywOxUtHqQlssVFoaRZGSFblUQZFdRRONoiLRDRKrhA1EiURUDC4EDVEMSlayZDEYr1EjCF4KUkAttAUk+kQg+sI2HB/IHN1V6Ex3BomZX9KHtud/vu87/zlz2gFERERERERERESEwsvTwms1V4i1vQ3W9nZY219AIpFApQ7FgkA5YoxGqJaFf3Vuy7MW8ufVq+jq7EBnhxX/uFwICAiANkKHdQmJUKo1HnvizIH9e4i/n3TCV1qKify3Lu9IDpk/98cJ63J+yyI9tpeEqydO6Z2O7tHsA1led2/fAgDIZIFYGhyMMO1ySCQSPG58hMdNjejv6wUA+PjOwmvngBcApKdtJNf/rgMA+M+eA5U6FBH6SMyYMR1PWlrwpKUZr192AQAC5UEo+aMMwSFq/rszPDQojdJr6cqdPlk47qplZuyk4+Jjo0l62kb6vqKsdNy6kyeO0XFRei0ZHhqU8h6kpLiIily+eMFt62821H9x2bDRuVRZQceXFBdxvsQmZKC/164JURB/PynJzNjJevITx/OpKXP2QdZ1TEc1IQoy0N9r5y1IQd5Raqi58SGnVdKHqckKXRinmubGh1Sv4PdcVrU/sBn0pr8PABAdEwuNVsdpAyaYTEgybeC0cBqtzisqeg0AwGnvYVXDKojDMdbdoEWLORkCgE2paffXJ6fUcq2TyRb8S9sd09gM6rF1AwDkCxdyDuI/Z56BcxGAxYolY0Hs7IKw6oiPrw8AwOVyeeLJI0ZGRgAA3t7e/AXRRY4talurZdKCWJ4/AwCo1KH8BQkOUQIAmpuaJi1Im8UCAFCq1PxN6rDbRn8Kkrk9mfmioqzU49u9W5izRB+uJl0dVsHCOOy2UcPyZZwPX04CTFfiY6MFC7Lt11ThusFQfu4sFdmSmsy7yOe/INie6B6TtXcXFcs9nM2bWOX58k8h8o4Kvg8BABsS1lLRhvq//rforRvXBe30hGxOSaLi1VWVHosXFRbQeVYbIiY3BMO+3TuoiaLCAs4mtm/5tLGT1hq/TQiG9F82UTMZO7aRd28HzrmrcTq6R01xsbRu6+aUbxuCIT/XTE3FREWS2zcbxjX24N4dslIXTsfn55qnRgiGmuoqolTIqcG8IzlfGCw9U0y/VyrkpKa6amqFYGi1PCXJiXHU7JoVOmJ71Un6nPb36