feature: 抽离一些公共代码为一个组件

components/showItem/showItem.js

@@ -0,0 +1,22 @@
+Component({
+	properties: {
+		title: {
+			type: String,
+			value: ''
+		},
+		showList: {
+			type: Array,
+			value: () => []
+		}
+	},
+	methods: {
+		gotoDetails(e) {
+      const url = e.currentTarget.dataset.coverimg;
+      const title = e.currentTarget.dataset.title;
+      wx.navigateTo({
+        // 页面传参
+        url: '/pages/details/details?url=' + url + '&title=' + title,
+      })
+    }
+	},
+});

components/showItem/showItem.json

@@ -0,0 +1,3 @@
+{
+  "component":true
+}

components/showItem/showItem.wxml

@@ -0,0 +1,30 @@
+<view class="hmly-content-list">
+  <view class="hmly-bar-title">
+    <view class="hmly-title-left">{{title}}</view>
+    <view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
+  </view>
+  <block wx:for="{{showList}}" wx:key="index">
+    <view 
+      class="hmly-content" 
+      bindtap="gotoDetails" 
+      data-coverImg="{{item.albumCoverUrl290}}"
+      data-title="{{item.title}}"
+    >
+      <view class="hmly-content-img">
+        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+      </view>
+      <view class="hmly-content-right">
+        <view class="hmly-content-title">
+          <view class="hmly-title-text">{{item.title}}</view>
+          <view class="hmly-introduction">{{item.trackTitle}}</view>
+        </view>
+        <view class="hmly-count">
+          <view class="hmly-play-count">
+            126亿
+          </view>
+          <view class="hmly-ji-count">{{item.tracks}}集</view>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>

components/showItem/showItem.wxss

@@ -0,0 +1,94 @@
+.hmly-content-list {
+	width: 90%;
+	margin: 0rpx auto;
+	margin-top: 10rpx;
+}
+
+.hmly-content {
+	width: 100%;
+	height: auto;
+	padding: 20rpx 0rpx;
+	display: flex;
+	justify-content: space-between;
+	border-bottom: 1rpx solid #f1f1f1;
+}
+
+.hmly-content-img {
+	width: 232rpx;
+	height: 232rpx;
+	border-radius: 15rpx;
+}
+
+.hmly-content-img>image {
+	width: 100%;
+	height: 100%;
+	border-radius: 15rpx;
+}
+
+.hmly-content-right {
+	width: 530rpx;
+	height: 100%;
+	margin-left: 20rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.hmly-content-title {
+	width: 100%;
+	height: 138rpx;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.hmly-title-text {
+	width: 100%;
+	font-size: 35rpx;
+	color: #333;
+	text-align: left;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	/*行数n*/
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.hmly-introduction {
+	width: 100%;
+	font-size: 28rpx;
+	color: #cdcdcd;
+	text-align: left;
+	padding: 15rpx 0rpx;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	/*行数n*/
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.hmly-count {
+	width: 100%;
+	height: 50rpx;
+	display: flex;
+	justify-content: start;
+	align-items: center;
+}
+
+.hmly-play-count {
+	font-size: 25rpx;
+	color: #cdcdcd;
+	margin-right: 30rpx;
+}
+
+.hmly-ji-count {
+	font-size: 25rpx;
+	color: #cdcdcd;
+}
+
+.hmly-title-right {
+	float: right;
+	font-size: 26rpx;
+	color: #aaa;
+}

pages/classification/classification.wxml

@@ -3,8 +3,13 @@
 <!-- 分类索引 -->
 <view class="hmly-ification">
 	<!-- 左边部分 -->
-	<scroll-view class="hmly-scroll-left" scroll-y scroll-with-animation style="height:{{phoneHeight}}rpx"
-		scroll-top="{{VerticalNavTop}}">
+	<scroll-view 
+		class="hmly-scroll-left" 
+		scroll-y 
+		scroll-with-animation 
+		style="height:{{phoneHeight}}rpx"
+		scroll-top="{{VerticalNavTop}}"
+	>
 		<block wx:for="{{ificationTitle}}" wx:key="index">
 			<view class="hmly-left-title {{index === activeIndex ? 'hmly-active':''}}" data-index="{{index}}"
 				data-id="{{index}}" bindtap="change">
@@ -14,8 +19,13 @@
 	</scroll-view>
 
 	<!-- 右边部分 -->
-	<scroll-view class="hmly-scroll-right" scroll-y bindscroll="showActive" style="height:{{phoneHeight}}rpx"
-		scroll-into-view="main-id-{{TabCur}}">
+	<scroll-view 
+		class="hmly-scroll-right" 
+		scroll-y 
+		bindscroll="showActive" 
+		style="height:{{phoneHeight}}rpx"
+		scroll-into-view="main-id-{{TabCur}}"
+	>
 		<view class="hmly-content-scroll-item" wx:for="{{ificationContent}}" wx:key="index" data-index="{{index}}"
 			id="main-id-{{index}}">
 			<view class="hmly-top">

pages/collection/collection.wxml

@@ -28,11 +28,10 @@
 	</view>
 	<swiper class="hmly-swiper-box" style="min-height:{{height}}px" duration="300" current="{{currentIndex}}"
 		bindchange="changeTab">
-		<swiper-item class="hmly-swiper-box-item">
+		<swiper-item>
 			<block>
 				<view class="hmly-no-content">
 					<text class="icon-empty text-gray" style="font-size:400rpx"></text>
-					<!-- <image src="/image/noContent.png"></image> -->
 					<view class="hmly-but-box">
 						<text style="font-size:30rpx" class="text-gray">没有内容</text>
 						<button class="hmly-but">看看推荐</button>

pages/details/details.wxml

@@ -1,11 +1,7 @@
-<!-- 
-  title和背景 
-  注：这部分的背景色还没有处理好
--->
+<!-- 这部分的背景色还没有处理好 -->
 <view class="hmly-top-title-bar">
 	<!-- 背景虚化层 -->
-	<view class="hmly-bg" style="background:url({{imgurl}}); background-size: 100% 100%; background-repeat: no-repeat;">
-	</view>
+	<view class="hmly-bg" style="background:url({{imgurl}}); background-size: 100% 100%; background-repeat: no-repeat;" />
 	<!-- 内容 -->
 	<view class="hmly-bar-item" wx:for="{{performanceInfo}}" wx:key="index">
 		<view class="hmly-bar-item-top">
@@ -13,8 +9,8 @@
 			<view class="hmly-theme-info">
 				<view class="hmly-theme-title">{{item.title}}</view>
 				<view class="hmly-theme-author">
-					<!-- <image class="" src="" mode="widthFix"></image> -->
-					{{item.author}} <text class="icon-right"></text>
+					{{item.author}} 
+					<text class="icon-right"></text>
 				</view>
 				<view class="hmly-view-info">
 					<view class="hmly-view-info-left">{{item.num1}}人收藏</view>

pages/index/bangdan/bangdan.js

@@ -1,4 +1,3 @@
-const app = getApp();
 let myRequest = require('../../../api/index.js')
 // 定义一个全局变量保存从接口获取到的数据，以免重复请求接口
 let resut;

pages/index/index.json

@@ -1,5 +1,6 @@
 {
 	"usingComponents": {
-		"search": "/components/search/search"
+		"search": "/components/search/search",
+		"showItem": "/components/showItem/showItem"
 	}
 }

pages/index/index.wxml

@@ -1,153 +1,88 @@
-<!-- 搜索框 -->
-<search></search>
-<!-- 轮播图 -->
-<view class="hmly-swiper-container">
-	<swiper class="hmly-swiper" autoplay="true" circular="true" interval="3000" easing-function="easeOutCubic"
-		current="{{swiperCurren}}" bindchange="swiperChange">
-		<!-- 轮播图图片 -->
-		<swiper-item class="hmly-swiper-item" wx:for="{{imgList}}" wx:key="index">
-			<!-- 加上widthFix可以使图片自适应 -->
-			<image src="{{item}}"></image>
-		</swiper-item>
-	</swiper>
-	<!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
-	<view class="hmly-dots">
-		<block wx:for="{{imgList.length}}" wx:key="index">
-			<view class="hmly-dots-item{{index == swiperCurrent ? ' hmly-dot-active' : ''}}"></view>
-		</block>
-	</view>
-</view>
-
-<!-- 宫格导航 -->
-<view class="hmly-nav">
-	<block>
-		<view class="hmly-nav-item" bindtap="{{item.events}}" wx:for="{{navList}}" wx:key="index">
-			<!-- 
-        
-        因为没有合适的图，所以全部使用的一样的 
-        并且因为界面都是一致的就是内容不同，这里为了简单，使用的都是统一界面
-
-        解决办法：你可以通过页面传参的方式来进行区分
-        -->
-			<image class="hmly-nav-icon" src="{{item.icon}}" mode="widthFix" lazy-load="false"></image>
-			<text class="hmly-nav-text">{{item.text}}</text>
+<view>
+	<!-- 搜索框 -->
+	<search></search>
+	<!-- 轮播图 -->
+	<view class="hmly-swiper-container">
+		<swiper 
+			class="hmly-swiper" 
+			autoplay="true" 
+			circular="true" 
+			interval="3000" 
+			easing-function="easeOutCubic"
+			current="{{swiperCurren}}" 
+			bindchange="swiperChange"
+		>
+			<!-- 轮播图图片 -->
+			<swiper-item class="hmly-swiper-item" wx:for="{{imgList}}" wx:key="index">
+				<!-- 加上widthFix可以使图片自适应 -->
+				<image src="{{item}}"></image>
+			</swiper-item>
+		</swiper>
+		<!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
+		<view class="hmly-dots">
+			<block wx:for="{{imgList.length}}" wx:key="index">
+				<view class="hmly-dots-item{{index == swiperCurrent ? ' hmly-dot-active' : ''}}"></view>
+			</block>
 		</view>
-	</block>
-</view>
-
-<!-- 猜你喜欢 -->
-<view class="hmly-like">
-	<view class="hmly-bar-title">
-		<view class="hmly-title-left">猜你喜欢</view>
-		<view class="hmly-title-right">查看全部 <text class="icon-right"></text> </view>
 	</view>
-	<!-- 这没有使用数据绑定，因为是练手而且数据比较少 -->
-	<view class="hmly-like-item-box">
-		<view class="hmly-like-item" bindtap="gotoDetails" data-coverImg="{{item.coverMiddle}}" data-title="{{item.intro}}"
-			wx:for="{{guess}}" wx:key="index">
-			<view class="hmly-like-img">
-				<image class="hmly-like-item-icon" src="{{item.coverMiddle}}" mode="widthFix"></image>
-				<view class="hmly-like-cover">
-					<!-- text用来显示icon  暂无 -->
-					<text class=""></text> 4.6亿
-				</view>
-			</view>
-			<view class="hmly-like-text">{{item.intro}}</view>
-		</view>
-	</view>
-</view>
 
-<!-- 有数据的时候显示 -->
-<block wx:if="{{showitem}}">
-	<!-- 有声小说 -->
-	<view class="hmly-content-list">
-		<view class="hmly-bar-title">
-			<view class="hmly-title-left">有声小说</view>
-			<view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
-		</view>
-		<block wx:for="{{xiaoshuocontent}}" wx:key="index">
-			<view class="hmly-content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}"
-				data-title="{{item.title}}">
-				<view class="hmly-content-img">
-					<image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
-				</view>
-				<view class="hmly-content-right">
-					<view class="hmly-content-title">
-						<view class="hmly-title-text">{{item.title}}</view>
-						<view class="hmly-introduction">{{item.trackTitle}}</view>
-					</view>
-					<view class="hmly-count">
-						<view class="hmly-play-count">
-							<!-- <text class="icon-"></text> -->
-							126亿
-						</view>
-						<view class="hmly-ji-count">{{item.tracks}}集</view>
-					</view>
-				</view>
+	<!-- 宫格导航 -->
+	<view class="hmly-nav">
+		<block>
+			<view class="hmly-nav-item" bindtap="{{item.events}}" wx:for="{{navList}}" wx:key="index">
+				<!-- 
+					因为没有合适的图，所以全部使用的一样的 
+					并且因为界面都是一致的就是内容不同，这里为了简单，使用的都是统一界面
+					解决办法：你可以通过页面传参的方式来进行区分
+					-->
+				<image class="hmly-nav-icon" src="{{item.icon}}" mode="widthFix" lazy-load="false"></image>
+				<text class="hmly-nav-text">{{item.text}}</text>
 			</view>
 		</block>
 	</view>
-	<!-- 相声评书 -->
-	<view class="hmly-content-list">
+
+	<!-- 猜你喜欢 -->
+	<view class="hmly-like">
 		<view class="hmly-bar-title">
-			<view class="hmly-title-left">相声评书</view>
-			<view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
+			<view class="hmly-title-left">猜你喜欢</view>
+			<view class="hmly-title-right">查看全部 <text class="icon-right"></text> </view>
 		</view>
-		<block wx:for="{{xiangshengcontent}}" wx:key="index">
-			<view class="hmly-content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}"
-				data-title="{{item.title}}">
-				<view class="hmly-content-img">
-					<image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
-				</view>
-				<view class="hmly-content-right">
-					<view class="hmly-content-title">
-						<view class="hmly-title-text">{{item.title}}</view>
-						<view class="hmly-introduction">{{item.trackTitle}}</view>
-					</view>
-					<view class="hmly-count">
-						<view class="hmly-play-count">
-							<!-- <text class="icon-"></text> -->
-							126亿
-						</view>
-						<view class="hmly-ji-count">{{item.tracks}}集</view>
+		<!-- 这没有使用数据绑定，因为是练手而且数据比较少 -->
+		<view class="hmly-like-item-box">
+			<view 
+				class="hmly-like-item" 
+				bindtap="gotoDetails" 
+				data-coverImg="{{item.coverMiddle}}" 
+				data-title="{{item.intro}}"
+				wx:for="{{guess}}"
+				wx:key="index"
+			>
+				<view class="hmly-like-img">
+					<image class="hmly-like-item-icon" src="{{item.coverMiddle}}" mode="widthFix"></image>
+					<view class="hmly-like-cover">
+						<!-- text用来显示icon  暂无 -->
+						<text class=""></text> 4.6亿
 					</view>
 				</view>
+				<view class="hmly-like-text">{{item.intro}}</view>
 			</view>
-		</block>
-	</view>
-	<!-- 脱口秀 -->
-	<view class="hmly-content-list">
-		<view class="hmly-bar-title">
-			<view class="hmly-title-left">脱口秀</view>
-			<view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
 		</view>
-		<block wx:for="{{tuokocontent}}" wx:key="index">
-			<view class="hmly-content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}"
-				data-title="{{item.title}}">
-				<view class="hmly-content-img">
-					<image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-				</view>
-				<view class="hmly-content-right">
-					<view class="hmly-content-title">
-						<view class="hmly-title-text">{{item.title}}</view>
-						<view class="hmly-introduction">{{item.trackTitle}}</view>
-					</view>
-					<view class="hmly-count">
-						<view class="hmly-play-count">
-							<!-- <view class="icon-"></view> -->
-							126亿
-						</view>
-						<view class="hmly-ji-count">{{item.tracks}}集</view>
-					</view>
-				</view>
-			</view>
-		</block>
 	</view>
-</block>
-<block wx:else>
-	<view class="hmly-data-notip">
-		<view class="hmly-tip">
-			网络暂时走丢了，请稍后再试
+
+	<!-- 有数据的时候显示 -->
+	<block wx:if="{{showitem}}">
+		<!-- 有声小说 -->
+		<showItem title="有声小说" showList="{{xiaoshuocontent}}"></showItem>
+		<!-- 相声评书 -->
+		<showItem title="相声评书" showList="{{xiangshengcontent}}"></showItem>
+		<!-- 脱口秀 -->
+		<showItem title="脱口秀" showList="{{tuokocontent}}"></showItem>
+	</block>
+	<block wx:else>
+		<view class="hmly-data-notip">
+			<view class="hmly-tip">
+				网络暂时走丢了，请稍后再试
+			</view>
 		</view>
-	</view>
-</block>
+	</block>
+</view>

project.config.json

@@ -21,26 +21,28 @@
     "checkSiteMap": true,
     "uploadWithSourceMap": true,
     "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
     "useMultiFrameRuntime": true,
     "useApiHook": true,
+    "useApiHostProcess": true,
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],
       "outputPath": ""
     },
     "enableEngineNative": false,
-    "bundle": false,
     "useIsolateContext": true,
-    "useCompilerModule": false,
-    "userConfirmedUseCompilerModuleSwitch": false,
     "userConfirmedBundleSwitch": false,
     "packNpmManually": false,
     "packNpmRelationList": [],
     "minifyWXSS": true,
-    "useApiHostProcess": true
+    "disableUseStrict": false,
+    "showES6CompileOption": false,
+    "useCompilerPlugins": false,
+    "minifyWXML": true
   },
   "compileType": "miniprogram",
-  "libVersion": "2.16.1",
+  "libVersion": "2.23.1",
   "appid": "wx101d03d3f1aab84c",
   "projectname": "%E4%BB%BF%E5%96%9C%E9%A9%AC%E6%8B%89%E9%9B%85lite",
   "debugOptions": {

style/common.wxss

@@ -59,96 +59,6 @@
 	background-color: #fff;
 }
 
-/* 主要内容列表样式 */
-.hmly-content-list {
-	width: 90%;
-	margin: 0rpx auto;
-	margin-top: 10rpx;
-}
-
-.hmly-content {
-	width: 100%;
-	height: auto;
-	padding: 20rpx 0rpx;
-	display: flex;
-	justify-content: space-between;
-	border-bottom: 1rpx solid #f1f1f1;
-}
-
-.hmly-content-img {
-	width: 232rpx;
-	height: 232rpx;
-	border-radius: 15rpx;
-}
-
-.hmly-content-img>image {
-	width: 100%;
-	height: 100%;
-	border-radius: 15rpx;
-}
-
-.hmly-content-right {
-	width: 530rpx;
-	height: 100%;
-	margin-left: 20rpx;
-	display: flex;
-	flex-direction: column;
-}
-
-.hmly-content-title {
-	width: 100%;
-	height: 138rpx;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-}
-
-.hmly-title-text {
-	width: 100%;
-	font-size: 35rpx;
-	color: #333;
-	text-align: left;
-	display: -webkit-box;
-	-webkit-line-clamp: 1;
-	/*行数n*/
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.hmly-introduction {
-	width: 100%;
-	font-size: 28rpx;
-	color: #cdcdcd;
-	text-align: left;
-	padding: 15rpx 0rpx;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	/*行数n*/
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.hmly-count {
-	width: 100%;
-	height: 50rpx;
-	display: flex;
-	justify-content: start;
-	align-items: center;
-}
-
-.hmly-play-count {
-	font-size: 25rpx;
-	color: #cdcdcd;
-	margin-right: 30rpx;
-}
-
-.hmly-ji-count {
-	font-size: 25rpx;
-	color: #cdcdcd;
-}
-
 /* 登录样式 */
 .hmly-logo {
 	width: 128rpx;

utils/utils.js

@@ -1,25 +1,3 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- * 避免重复造轮子，这里照搬花裤衩大佬的代码使用
- */
-
-/**
- * @param {string} path
- * @returns {Boolean}
- */
-function isExternal(path) {
-	return /^(https?:|mailto:|tel:)/.test(path)
-}
-
-/**
- * @param {string} str
- * @returns {Boolean}
- */
-function validUsername(str) {
-	const valid_map = ['admin', 'editor']
-	return valid_map.indexOf(str.trim()) >= 0
-}
-
 /**
  * @param {string} url
  * @returns {Boolean}
@@ -29,42 +7,6 @@ function validURL(url) {
 	return reg.test(url)
 }
 
-/**
- * @param {string} str
- * @returns {Boolean}
- */
-function validLowerCase(str) {
-	const reg = /^[a-z]+$/
-	return reg.test(str)
-}
-
-/**
- * @param {string} str
- * @returns {Boolean}
- */
-function validUpperCase(str) {
-	const reg = /^[A-Z]+$/
-	return reg.test(str)
-}
-
-/**
- * @param {string} str
- * @returns {Boolean}
- */
-function validAlphabets(str) {
-	const reg = /^[A-Za-z]+$/
-	return reg.test(str)
-}
-
-/**
- * @param {string} email
- * @returns {Boolean}
- */
-function validEmail(email) {
-	const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-	return reg.test(email)
-}
-
 /**
  * @param {string} str
  * @returns {Boolean}
@@ -89,13 +31,7 @@ function isArray(arg) {
 
 // 向外暴露接口
 module.exports = {
-	isExternal,
-	validUsername,
 	validURL,
-	validLowerCase,
-	validUpperCase,
-	validAlphabets,
-	validEmail,
 	isString,
 	isArray
 }