目录

活动页

平台专门定制了移动端页面常用的活动页，包括活动页和分享页。

1.活动页

活动页封装到了框架中UM对象上，可以直接调用UM.actionsheet(option)方法，实现活动页的调用。

param

option={
    title: '',
    items: [],
    callbacks: [function () {
    }, function () {
    }]
}

• title: string 活动页的标题；
• items: array 活动页中的选项，可以添加任意多项；
• callbacks: array 回调函数数组每一项为一个回调函数，回调函数数组中的每一项对应一个选项，并且个数必须不小于选项的个数

示例代码：
$(‘#main .phone’).on(‘click’, function () {
UM.actionsheet({
title: ‘请选择：’,
items: [‘拍照’, ‘选取本地图片’],
callbacks: [function () {
alert(‘拍照’)
}, function () {
alert(‘选取本地图片’)
}]
});

})

上述代码实现的是移动端上传头像功能界面，在回调函数数组中编写业务逻辑代码，可实现上传功能。

2.分享页面

分享界面由于需求与界面要求难统一，通过参数设定较难实现，平台提供参照模板，及使用方法。

HTML结构：

<!--分享页面-->
<div class="um-share" id="share">
    <div class="um-grid">
        <div class="um-grid-row tc">
            <div class="item">
                <a href="#" class="um-circle um-black"> <img src="${path}/img/WeChat_circle.png" width=40 class="um-img-responsive" alt="">
                <div class="f12 mt5">
                    微信朋友圈
                </div> </a>
            </div>
            <div class="item">
                <a href="#" class="um-circle um-black"> <img src="${path}/img/WeChat.png" width=40 class="um-img-responsive" alt="">
                <div class="f12 mt5">
                    微信好友
                </div> </a>
            </div>
            <div class="item">
                <a href="#" class="um-circle um-black"> <img src="${path}/img/QQ.png" width=40 class="um-img-responsive" alt="">
                <div class="f12 mt5">
                    QQ好友
                </div> </a>
            </div>
            <div class="item">
                <a href="#" class="um-circle um-black"> <img src="${path}/img/QQ_circle.png" width=40 class="um-img-responsive" alt="">
                <div class="f12 mt5">
                    QQ空间
                </div> </a>
            </div>
        </div>
    </div>
    <div class="btn" onclick="shareCancle()">
        取消分享
    </div>
</div>

通过点击特定的a标签来显示出分享页面

<a href="#" class="popBtn btn mt30" data-target="share">分享</a>

分享页的html结构必须要设置id=‘share’值，a标签中data-target=’share’是必须有的属性，只有设置这个属性值，才能关联到id=’share’的分享页。

执行的js代码：

$('.um-grid-row').on('click', '.item', function () {
    var text = $(this).find('div').text();
    alert(text);
    UM.share.close();
})

UM.share.close()可用来实现隐藏分享页。

活动页的测试demo的
github地址。