目录
1 创建主页面
新建mui-app项目
1.1 头部导航栏
键入 mh，自动生成头部导航栏
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">微信</h1>
</header>1.2 页面主体
键入 mb，自动生成页面主体
<div class="mui-content">
</div>在主体中，键入ml，选择【图文列表图片居左】
在如下连接 微信功能图标下载_站长素材 (chinaz.com)中下载图标，作为app的样例图标。
修改后的生成代码如下：
- 每一个好友是由一对 li 标签包括
- 修改图标只需设置src属性即可
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g1.png">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g2.png">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g3.png">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g4.png">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>1.3 底部导航栏
加入mTab，选择底部选项卡，自动生成底部导航栏目
生成代码如下：
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>页面效果：
底部优化：
mui-app准备许多默认的图标，我们可知在UI组件 · MUI (dcloud.net.cn)中查找到自己需要的按钮，在页面内选中图标名称即可自动复制，粘贴到底部导航栏的响应位置即可
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-tab-label">微信</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-navigate"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">我</span>
</a>
</nav>效果如下：
2 创建子页面
2.1 创建微信主页面
将刚才index.html中mBody生成的内容，粘贴到weixin.html中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g1.png">
<div class="mui-media-body">
徐凤年
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g2.png">
<div class="mui-media-body">
姜泥
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g3.png">
<div class="mui-media-body">
剑九黄
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/g4.png">
<div class="mui-media-body">
王重楼
<p class="mui-ellipsis">武当大黄庭，改人根骨.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
2.2 创建通讯录、发现、我 子页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="mui-content">
通讯录页面
</div>
</body>
</html>2.3 切换子页面
切换原理：
代码实现：
// mui 记载完成事件
mui.plusReady(function(){
// 创建子页面数组
var myPages = ['weixin.html', 'tongxunlu.html','faxian.html','wo.html'];
// 遍历子页面数组，根据每个子页面url创建webView
// 定义子页面显示位置样式
var subPageStyle = {
top:'44px',
bottom:'50px'
};
// 获取主webview
var mainView = plus.webview.currentWebview();
for(var i=0; i < myPages.length; i++)
{
var url = myPages[i];
// 根据每个url创建每个子页面的webview
// 创建语法：plus.webview.create(url,id,style),返回web对象
// url,指定创建哪个页面; id，页面标识符，用于定位页面; style,页面显示风格
var subView = plus.webview.create(url,url,subPageStyle);
// 创建完成后，默认隐藏
subView.hide();
// 为了同时显示，需要将子webview添加到主webview
mainView.append(subView)
}
// 设置weixin.html默认显示
// 根据id设置具体显示的webview的语法：plus.webview.show();
plus.webview.show(myPages[0]);
// 为每个导航页面添加点击事件
// mui(html元素的父选择器).on(事件名称，注册事件的html元素选择器,时间函数)
// 事件名：tap, 用户的点击事件，注意：网页事件在app中无效
mui('.mui-bar-tab').on('tap', 'a', function(){
// 设置当前导航对应的子页面显示，就是根据指定的id设置webview的显示
var id = this.getAttribute('href');
plus.webview.show(id);
});
});注意：webview是手机的原生界面，只能使用真机运行；所以我们需要配置模拟器来运行。
在底部标签栏中，为每个a标签添加href属性，即可实现页面的跳转。
效果如下：
3 制作聊天页面
这一部分代码是写在 weixin.html 文件中的。
3.1 注册点击事件
打开新窗口的官方帮助连接：窗口管理 · MUI (dcloud.net.cn)
实现代码如下：
mui.plusReady(function(){
// 给好友注册点击事件，打开聊天页面
mui(".mui-table-view-cell").on('tap', 'a', function(){
var title = this.getAttribute('title');
mui.openWindow({
url:'weixin/chat.html',
id:'weixin/chat.html',
extras:{
//自定义扩展参数，可以用来处理页面间传值
name: title
},
show:{
autoShow:true,//页面loaded事件发生后自动显示，默认为true
aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
duration:100//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting:{
autoShow:true,//自动显示等待框，默认为true
title:'正在加载...'//等待对话框上显示的提示内容
}
})
})
});使用官方提供的chat.html素材，在其中添加获取好友名称的语句
注意：这里要用到了 jQuery 将人名传递到聊天页面的头部；其中的 #title 是header的ID
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
// 加载好友名称
// 1. 获取当前的webview
var curView = plus.webview.currentWebview();
// 2. 获取参数
var name = curView.name;
// 3. 将好友名称更新在页面上，导入jQuery
$('#title').html(name);
})
</script>3.2 发送信息
// 获取发送信息的对象
var sendNode = document.getElementById('msg-type');
// 给单独一个对象注册点击对象
sendNode.addEventListener('tap', function(){
// 获取信息内容
var content = $('#msg-text').val();
// 判断消息不为空，才发送信息
if(content){
// 拼接文本消息
var html = "<div class=\"msg-item msg-item-self msg-content\">" +
"<img class=\"msg-user-img\" src=\"../img/2.jpg\" style=\"float:right\" />" +
"<div class=\"msg-content\">" +
"<div class=\"msg-content-inner\"> " +
content +
"</div>" +
"<div class=\"msg-content-arrow\"></div>" +
"</div>" +
"<div class=\"mui-item-clear\"></div>" +
"</div>";
// 将消息追加到消息列表
$('#msg-list').append(html);
}
});3.3 添加底部9宫格
九宫格的代码可以通过新建示例项目自动生成：
在
代码中，找到九宫格的相关代码，然后复制到chat.html的底部栏中
在底部栏加入如下代码，注意将九宫格的显示方式设置为none：
<div id="Gallery" class="mui-slider" style="margin-top:15px; display:none" >
<div class="mui-slider-group">
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
添加轻击事件：
// 给 + 注册轻击事件
var plusNode = document.getElementById('msg-image');
plusNode.addEventListener('tap', function(){
// 获取九宫格的显示状态
var display = $("#Gallery").css("display");
if(display && display == "none"){
$("#Gallery").css("display", "block")
}else{
$("#Gallery").css("display", "none")
}
});3.4 打开相册
将九宫格的第一个图标修改成相册，并设置ID
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span id="GalleryXiangCe" class="mui-icon mui-icon-image"></span>
<div class="mui-media-body">相册</div>
</a>
</li>为相册添加轻击事件：
var xiangceNode = document.getElementById('GalleryXiangCe');
xiangceNode.addEventListener('tap',function(){
// 打开相册语法：xiangceNode.addEventListener();
// plus.gallery.pick(function(e){}, function(){}, {})
// 参数1：处理选择图片的回调函数
// 参数2：不用管
// 参数3：配置参数数据
plus.gallery.pick(
function(e){
// 获取用户通过相册选择的图片列表
var images = e.files;
// 遍历数组将图片显示在消息列表上
for(var i in images){
var path = images[i];
var html = "<div class=\"msg-item msg-item-self msg-type msg-content\">" +
"<img class=\"msg-user-img\" src=\"../img/2.jpg\" alt=\"\" style=\"float: right;\" />" +
"<div class=\"msg-content\">" +
"<div class=\"msg-content-inner\">" +
"<img class=\"msg-content-image\" src="+ path +" style=\"max-width: 100px;\" />" +
"</div>" +
"<div class=\"msg-content-arrow\"></div>" +
"</div>" +
"<div class=\"mui-item-clear\"></div>" +
"</div>";
$('#msg-list').append(html);
// 隐藏9宫格
$("#Gallery").css("display", "none")
}
},
function(){},
{
filter:"image",
multiple:true
});
}); 4 设计发现界面
4.1 页面定义
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style type="text/css">
.mui-table-view-cell{
font-size: 15px;
line-height: 30px;
}
.mui-table-view-cell img{
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="mui-content">
发现
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="img/afp.png" align="absmiddle"/> 朋友圈
</li>
</ul>
<br/>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="img/afs.png" align="absmiddle"/> 扫一扫
</li>
<li class="mui-table-view-cell mui-left">
<img src="img/afy.png" align="absmiddle"/> 摇一摇
</li>
</ul>
<br />
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="img/afg.png" align="absmiddle"/> 购物
</li>
<li class="mui-table-view-cell mui-left">
<img src="img/afyx.png" align="absmiddle"/> 游戏
</li>
</ul>
</div>
</body>
</html>
4.2 页面效果
4.3 打开朋友圈页面
在项目目录下新建 faxian 目录，将官方提供的 fbBody.html 和 fbHeader.html源码拷贝到该目录下。
在 faxian.html 中添加如下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style type="text/css">
.mui-table-view-cell{
font-size: 15px;
line-height: 30px;
}
.mui-table-view-cell img{
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function () {
var pyqNode = document.getElementById('pengyouquan');
pyqNode.addEventListener('tap', function(){
mui.openWindow({
url:'faxian/fdBody.html',
id:'faxian/fdBody.html'
});
});
});
</script>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left" id="pengyouquan">
<img src="img/afp.png" align="absmiddle"/> 朋友圈
</li>
</ul>
<br/>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="img/afs.png" align="absmiddle"/> 扫一扫
</li>
<li class="mui-table-view-cell mui-left">
<img src="img/afy.png" align="absmiddle"/> 摇一摇
</li>
</ul>
<br />
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="img/afg.png" align="absmiddle"/> 购物
</li>
<li class="mui-table-view-cell mui-left">
<img src="img/afyx.png" align="absmiddle"/> 游戏
</li>
</ul>
</div>
</body>
</html>
5 打包与部署
5.1 打包流程
- 发行 - 原生app-云打包
- 在弹出的页面，选择【使用公共测试证书】，直接点击【打包】
- 安装安心打包插件
- 打包成功状态提示
5.2 未完成社区身份验证错误
在个人中心进行邮箱验证
本文源码及资源，请以下公众号，回复关键字 微信app 即可
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
