时间：2023-05-06 16:25:08 点击次数：24
现在有很多的导购网站，如果我们想自己开发一个可以适应于手机的的webapp，应该如何开发？那么我们今天选择使用mui来开发一个移动导购页面。上一节我们说到如何将淘宝客选品库的数据导入到MYSQL里面去，如果不是很了解的话，可以观看之前的视频
首先，我们可以登录到mui的官网，到GitHub下载它需要的CSS和JS文件。官网地址
http://dev.dcloud.net.cn/mui/getting-started/
https://github.com/dcloudio/mui
由于我这里开发的是使用HBuilder，和MUI同一个公司旗下的作品。下载地址
http://dcloud.io/
注意，由于我这里是使用PHP开发的，所以我们还需要按照PHP解析服务器。这个大家根据自己的电脑平台进行安装，我就不做详细的介绍了。
大家安装好开发环境后，现在就可以直接开发我们的程序了。
一、数据库设计
这里我们根据在淘宝客网站后台导出的excel文件的字段进行设计数据库的属性，对于如何将里面的数据导入到mysql里面去，大家可以观看我之前录制的一个视频
/*
Navicat MySQL Data Transfer
Source Server : ming
Source Server Version : 50549
Source Host : www.yeehot.com
Source Database : yeehotdb
Target Server Version : 50549
File Encoding : utf-8
Date: 03/07/2017 10:09:36 AM
*/
SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for `yeehot_taokaoke_shop_copy`
-- ----------------------------
DROP TABLE IF EXISTS `yeehot_taokaoke_shop_copy`;
CREATE TABLE `yeehot_taokaoke_shop_copy` (
`id` varchar(255) NOT NULL,
`name` varchar(255) CHARACTER SET utf8 NOT NULL,
`img` varchar(255) NOT NULL,
`detail` varchar(255) NOT NULL,
`shopname` varchar(255) NOT NULL,
`price` varchar(255) NOT NULL,
`count` varchar(255) NOT NULL,
`rate` varchar(255) NOT NULL,
`earn` varchar(255) NOT NULL,
`wangwang` varchar(255) NOT NULL,
`shortlink` varchar(255) NOT NULL,
`longlink` varchar(255) NOT NULL,
`kouling` varchar(255) NOT NULL,
`youhuiquancount` int(11) NOT NULL,
`youhuiquanlimit` int(11) NOT NULL,
`youhuiquanminae` varchar(255) NOT NULL,
`youhuiquanbegin` varchar(255) NOT NULL DEFAULT CURRENT_TIMESTAMP,
`youhuiquanend` varchar(255) NOT NULL DEFAULT 0000-00-00 00:00:00,
`youhuiquanlink` varchar(255) NOT NULL,
`youhuiquantaokou` varchar(255) NOT NULL,
`youhuiquanshortlink` varchar(255) NOT NULL,
`sid` int(10) unsigned NOT NULL AUTO_INCREMENT,
PRIMARY KEY (`sid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
SET FOREIGN_KEY_CHECKS = 1;
二、创建项目
打开HBuilder,创建一个web项目，输入项目名称，我这里以Dagou为例子。
三、添加相应的MUI的css和js文件
我们刚刚提到可以在GitHub下载MUI的源码，里面有相应的CSS和js文件，我们把它复制到我们的项目中去。如下图
四、创建数据库连接
新建一个PHP文件，命名为conn.php,我们在里面输入连接数据库的代码
<?php
/*****************************
*数据库连接
*****************************/
$conn = mysql_connect("www.yeehot.com","root","yeehot.com");
if (!$conn){
die("连接数据库失败：". mysql_error());
}
mysql_query("set names utf8;");
mysql_select_db("yeehotdb", $conn);
?>
五、创建导购页面
我这里以index.php测试，新建一个index.php文件，然后输入
<?php
//连接数据库
include (conn.php);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导购</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/app.css" />
<style type="text/css">#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
}</style>
<script>$(window).ready(function() {
(function($) {
$(body).on(tap, .clicked, function(event) {
var url = this.getAttribute(href);
var blank = this.getAttribute(target);
if(blank == _blank) {
window.open(url);
} else {
window.location.href = url;
}
});
})(mui);
})</script>
</head>
<body>
<ul class="mui-table-view index">
<?php
$type = $_GET@[type];
$page = $_GET@[page];
$pagesize = 20;
if ($page <= 1) {
$page = 1;
}
$offset = $pagesize * ($page - 1);
$res1 = mysql_query("select * from yeehot_taokaoke_shop order by id asc limit $offset,$pagesize");
while ($row1 = mysql_fetch_array($res1)) {
$img = $row1[img];
$link = $row1[shortlink];
echo " <li class=mui-table-view-cell mui-media>";
echo "<a href=$link> ";
echo "<img class=mui-media-object imginfo mui-pull-left src=$img>";
echo "<div class=mui-media-body>";
echo " <p class=mui-ellipsis-2>" . $row1[name] . "</p>";
echo " <p class=mui-ellipsis>" . $row1[shopname] . "</p>";
echo " <p class=price>";
echo " <span class=beforeprice>月售" . $row1[count] . "</span>";
echo "<span class=afterprice mui-pull-right >" . $row1[price] . "元</span>";
echo "</p>";
$isquan = $row1[youhuiquanminae];
$begin = $row1[youhuiquanbegin];
$end = $row1[youhuiquanend];
if( strlen($begin)>0&&strlen($end)>0&&$isquan!=无)
{
$_nowtime=date("Y-m-d",time());
$beginDate=date("Y-m-d",strtotime($begin));
$endDate=date("Y-m-d",strtotime($end));
$nowtime=time();
if($nowtime>=strtotime($begin)&&$nowtime<strtotime($end))
{
echo "
data-loading-icon-position=\"right\" class=\"mui-btn mui-btn-danger mui-pull-right btinfo mui-btn-outlined\">$isquan >去领券</button>";}
}
echo "</div>";
echo " </a>";
echo " </li>";
}
?>
</ul>
</body>
<script src="js/mui.min.js"></script>
</html>
此外，app.css的文件内容如下
.mui-plusheader.mui-bar{
display:none;
}
.mui-plus.mui-bar-nav~.mui-content{
padding:0;
}
/*hm开头的表示仅为 Hello MUI示例定义*/
.hm-description{
margin:.5em0;
}
.hm-description>li{
font-size:14px;
color:#8f8f94;
}
.index.imginfo{
line-height:5em;
min-width:7em;
height:7em;
}
.index.btinfo{
margin-top:1em;
}
.itemName{
color: black;
font-size:0.9em;
}
.price{
margin-top:10px;
font-size:1em;
}
.afterprice{
color:#CF2D28;
margin-left:10px;
}
.beforeprice{
color: black;
font-size:14px;
/*//text-decoration: line-through;*/
}
最终效果如下
欢迎继续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一时间回复大家的。也欢迎收藏与转发，如果需要转载到其他网站，请与我联系，yeehot.com
