初探MUI制作微信APP页面（二）
国庆假期第四天，新的一轮降温开始，外面狂风不止，在家继续优化项目。
上篇把基本框架搭建起来，简单几个子页面的切换，本篇开始对子页面中内容进行优化。
源码及素材地址：Github仓库
MUI 官方文档：MUI文档
第一、微信聊天详情页
引入 chat.html 文件，可到仓库(/paper/material)中下载。
第一步、发送文字信息
即点击 消息列表跳转新页面（chat.html），使用的是打开新页面 openWindow 函数。
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" charset="utf-8">
mui.init();
// mui加载完成事件
mui.plusReady(function(){
// 给好友列表轻击事件
mui(".mui-table-view-cell").on("tap","a",function(){
// 获取好友名称
var titleName = this.getAttribute("title");
console.log("titleName:"+titleName);
// 打开聊天页面
mui.openWindow({
url:"sub1/chat.html",
id:"sub1/chat.html",
extras:{
name:titleName
},
show:{
autoShow:true, // 页面加载后打开
aniShow:"slide-in-right", //网页显示动画
duration:100 //页面动画持续时间
},
waiting:{
autoShow:true,
title:"正在加载...."
}
});
});
});
第二步、发送相册
对于九宫格-图片选择器，可新建 hello mui项目，即勾选 Hello mui 复选框，在官方提供的example中查找，新建项目如下图所示。
在生成项目的 examples 中找到 grid-pagination.html，并复制九宫格代码。
九宫格的展示与隐藏，通过获取页面对象属性（＋号的 id=“Gallery”）来控制。
// 获取加号的对象
var addNode = document.getElementById("msg-image");
addNode.addEventListener("tap",function(){
// 根据id=Gallery 获取状态
var display = $("#Gallery").css("display");
if(display && display == "none"){
// 隐藏就显示
$("#Gallery").css("display","block");
} else {
$("#Gallery").css("display","none");
}
});
将拷贝的代码中 mui-col-sm-3 替换成 mui-col-sm-4，即将默认每行最小显示4个图标，每行显示3个图标。修改完毕后，九宫格如下图所示。
相册可选中图片发送，通过获取照片按钮属性（指定 id=“galleryId”）来实现，代码如下。
// 获取相册对象
var galleryId = $("#galleryId")[0];
// plus.gallery.pick(function(e){},function(e){},{参数})
// 参数1 function(e){} 选择图片后的回调函数
// 参数2 暂时用不到
// 参数3 配置参数数据
galleryId.addEventListener("tap",function(){
plus.gallery.pick(
// 获取用户选择的图片列表
function(e){
// 图片路径数组
var images = e.files;
for(var i in images){
var path = images[i];
// 拼接图片消息
var html = ""
+" ![\"\"](\"../img/2.jpg\")
"
+" "
+" "
+" ![](\""</span)
+path+"\" style=\"max-width: 100px;\" />"
+" "
+" "
+" "
+" "
+" ";
// 追加消息到消息列表
$("#msg-list").append(html);
// 隐藏九宫格
$("#Gallery").css("display","block");
}
},
function(){},
{
filter:"image",
multiple:true
});
});
发送照片效果如下图所示。
第二、发现页
对于第三个页面-发现页面，即sub3.html，首先绘制列表页面，包括：朋友圈、扫一扫、购物等，代码如下所示。
<!--主体 -->
<div class="mui-content">
<div class="mui-content">
<ul class="mui-table-view">
<li id="friends" 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>
图标、字体等公共样式，如下所示。
绘制完成后界面如下图所示。
当点击 朋友圈 条形按钮时，跳转到对应页面（fdHeader.html），需添加用户轻击事件，代码如下所示。
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
// 给朋友圈添加轻击事件
var friends = document.getElementById("friends");
friends.addEventListener("tap",function(){
// 打开聊天页面
mui.openWindow({
url:"sub3/fdHeader.html",
id:"sub3/fdHeader.html"
});
});
});
</script>
进入 朋友圈详情页面，如下图所示。
此时若想设置下拉刷新效果，则分两步
第一步、在 fbBody.html 中将 语句块放入 刷新容器内。
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
第二步、定义下拉或上划刷新事件，代码如下图所示。
<script src="../js/mui.min.js"></script>
<script type="text/javascript" >
mui.init({
pullRefresh : {
container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
/*下拉动作*/
down : {
height:50,//可选,默认50.触发下拉刷新拖动距离,
//auto: true,//可选,默认false.首次加载自动下拉刷新一次
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback :pullDownFresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
/*上拉动作*/
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
//auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback:pullUpFresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
var down=1,up=1;
//下拉执行业务的回调函数
function pullDownFresh(){
setTimeout(function(){
//下拉加载数据
//拼接朋友圈新信息字符串
var html=""
+
"" +
"![](\"../img/3.jpg\")
"+
""+
""+
"";
//朋友圈消息列表
var dataList = document.getElementById("dataList");
dataList.innerHTML = html+ dataList.innerHTML;
//累加
down++;
//刷新结束后，关闭刷新的动画
mui("#refreshContainer").pullRefresh().endPulldownToRefresh();
},2000);
}
//上拉执行业务的回调函数
function pullUpFresh(){
setTimeout(function(){
//下拉加载数据
//拼接朋友圈新信息字符串
var html=""
+
"" +
""+
""+
""+
"";
//朋友圈消息列表
var dataList = document.getElementById("dataList");
dataList.innerHTML = dataList.innerHTML+html;
//累加
up++;
//刷新结束后，关闭刷新的动画
mui("#refreshContainer").pullRefresh().endPullupToRefresh();
},2000);
}
</script>
刷新效果如下图所示。
第三、打包与部署
项目目录下 manifest.json 文件，双击后弹出打包设置页面。
设置启动图标、SDK配置、模块权限配置等。
设置完毕，即可在 发行-> 云打包-打原生安装包，注意需要登录后才能往后操作。
以上就是页面开发的过程，具体可参考 GitHub 仓库中源码及文档，祝好！
异常处理
1）控制台报错
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
处理方案：在 mui.css 样式中添加 * { touch-action: pan-y; }，重新运行HBuilder即可。
参考资料
【1】http://yun.itheima.com/course/466.html