Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单

本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了。

最近在完善Magicodes.WeiChat微信开发框架时,发现之前做的自定义菜单这块太不给力了,而各种第三方平台在这一块做得也比较渣,功能不全不说,界面还很不友好,于是决心重整一版,以满足需求。

下面先上图,新的UI界面如下所示:

如何实现这个功能呢?下面请等我一一道来吧。

左侧树形结构绑定

HTML模板如下所示:

<div class="dd" id="nestable2">
    <ol class="dd-list" data-bind="foreach:Menus()">
                                    <li class="dd-item lv1">
                                        <div class="dd-handle">
                                            <span class="pull-right">
                                                <i class="fa fa-plus" data-bind="click:$root.AddClick"></i> &nbsp;&nbsp;
                                                <i class="fa fa-times" data-bind="click:$root.RemoveItem"></i>&nbsp;&nbsp;
                                                <i class="fa fa-pencil" data-bind="click:$root.ItemClick"></i>
                                            </span>
                                            <span>
                                                <span class="label label-info"><i class="fa" data-bind="css:$root.getIconCssByType(type)"></i></span><span data-bind="text:name,click:$root.ItemClick"></span>
                                            </span>
                                        </div>
                                        <!-- ko if:$data.sub_button !== undefined  -->
                                        <ol class="dd-list" data-bind="foreach:$data.sub_button">
                                            <li class="dd-item lv2" data-id="2">
                                                <div class="dd-handle">
                                                    <span class="pull-right">
                                                        <i class="fa fa-times" data-bind="click:$root.RemoveItem"></i>&nbsp;&nbsp;
                                                        <i class="fa fa-pencil" data-bind="click:$root.ItemClick"></i>
                                                    </span>
                                                    <span class="label label-success"><i class="fa" data-bind="css:$root.getIconCssByType(type)"></i></span> <span data-bind="text:name"></span>
                                                </div>
                                            </li>
                                        </ol>
                                        <!-- /ko -->
                                    </li>
                                </ol>
</div>

这里我解释一下,上述模板用到了两个foreach循环,以便绑定这个两级列表。实际上如果数据结构支持的话,ko是可以递归的绑定的。ko的强大性是毋庸置疑的。然后注意这个注释:“<!-- ko if:$data.sub_button !== undefined  -->”,这个真的不是注释,这个是有用的。为了不产生脏元素,ko支持这种绑定写法。这里先用if做了判断,然后再绑定子集。其余的,就是简单的data-bind语法了。

通过上述模板,我们注意到数据结构中两个关键点:Menus和sub_button,那我们就来看看viewModel。viewModel中定义了Menus = ko.observableArray([]),然后使用Ajax获取数据来填充:

//初始化,加载数据
            this.Init = function () {
                mwc.ui.setBusy();
                self.Api.request('GET', {
                    url: '/api/Menus',
                    func: function (data) {
                        mwc.ui.clearBusy();
                        $.each(data, function (i, v) {
                            if (v.sub_button) {
                                $.each(v.sub_button, function (i1, v1) {
                                    v.sub_button[i1] = $.extend(self.getModelTpl(), v1);
                                })
                            }
                            data[i] = $.extend(self.getModelTpl(), v);
                        });
                        self.Menus(ko.mapping.fromJS(data));
                    }
                });
            };

注意,因为方便,这里使用了knockout.mapping js,请注意ko.mapping.fromJS方法。

右侧编辑模板绑定

这块无疑是比较复杂的一块,我们先进行肢解:

  1. 通用模块:顶部按钮组、名称输入框、保存按钮
  2. 模板(按微信类型加载不同模板)

我们先来看看整体的编辑模板:

<div class="ibox-title">
                    <h5>按钮其他参数 </h5>
                </div>
                <div class="ibox-content" data-bind="with:EditModel" style="min-height: 600px;">
                    <form class="form-horizontal">
                        <!-- ko if:type() != 'empty' -->
                        <buttonschoices params="SelectsModel: $root.SelectTypes,SelectValue:type"></buttonschoices>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-bind="value:name" required>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <!-- /ko -->
                        <div data-bind="template:{name:$root.GetEditTemplateName,data:$root.EditModel,afterRender:$root.afterEditTemplateRender}">
                        </div>
                        <!-- ko if:type() != 'empty'  -->
                        <div>
                            <button class="btn btn-primary pull-right" type="button" data-bind="click:$root.Save">
                                <i class="fa fa-save"></i>
                                <strong>保存</strong>
                            </button>
                        </div>
                        <!-- /ko -->
                    </form>
                </div>

由模板可知,整个编辑模块由类型按钮组、名称框、动态模板、保存按钮组成。接下来我就先介绍下类型按钮组的定义与绑定:

类型按钮组——knockout component

如上述代码中,使用了html标签buttonschoices。而这个标签就是我定义的knockout compoent。使用knockout compoent能做什么呢?就如上述代码中,我们可以知道以下几点:

  • 返回HTML模板
  • 传递参数,绑定compoent ViewModel

那么封装knockout compoent,有助于我们封装一些通用UI组件,就比如按钮组类型选择。我们先来一览代码:

//按钮组选择组件
ko.components.register('buttonschoices', {
    viewModel: function (params) {
        var self = this;
        //所选值
        this.SelectValue = ko.observable();
        //text:文本
        //value:值
        //icon:图标
        //des:描述
        this.SelectItem = ko.observable({ text: "", value: "", icon: "", des: "" });
        //选择模型
        this.SelectsModel = ko.observableArray([]);
        if (params && typeof (params.SelectsModel()) != "undefined") {
            self.SelectsModel(params.SelectsModel());
            if (typeof (params.SelectValue()) != "undefined") {
                self.SelectValue(params.SelectValue());
                self.SelectItem($.grep(self.SelectsModel(), function (v, i) { return v.value == self.SelectValue() })[0]);
            }
        }
        this.GetActiveCss = function (item) {
            return item.value == self.SelectValue() ? "active btn-primary" : "";
        }
        this.buttonClick = function (item) {
            self.SelectValue(item.value);
            self.SelectItem(item);
            params.SelectValue(item.value);
        }
    },
    template: '<div class="btn-group" data-bind="foreach: SelectsModel">' +
                    '<button class="btn btn-white" data-bind="css:$parent.GetActiveCss($data),click:$parent.buttonClick"><i class="fa" data-bind="css:icon"></i>&nbsp;<span data-bind="text:text"></span></button>' +
                '</div>' +
                '<div class="well" data-bind="with:SelectItem">' +
                    '<span data-bind="text:des"></span>' +
                '</div>'
});

整个组件代码很简洁明了,通过ko.components.register注册组件,buttonschoices为组件名称,整个组件由两部分组成:

  • viewModel:视图模型
  • template:模板

其中,viewModel接收了传入参数,并且进行了处理。我们来依次解析这个viewModel:

  • SelectValue:所选指。这个所选指会根据传入参数(还记得前面的“<buttonschoices params="SelectsModel: $root.SelectTypes,SelectValue:type"></buttonschoices>”吗,其中SelectValue:type就是传入了参数SelectValue)进行赋值,如右侧代码:self.SelectValue(params.SelectValue())。
  • SelectItem:所选项。项结构为{ text: "", value: "", icon: "", des: "" },分别代表文本、值、图标和描述。
  • SelectsModel:选择模型,就是列表模型。有多少个按钮,就看其有多少个项了。传入参数见“SelectsModel: $root.SelectTypes”。我们来看看这个$root.SelectTypes是怎么定义的:
//类型选择
            this.SelectTypes = ko.observableArray([
                { text: "点击推事件", value: "click", icon: "fa-font", des: "用户点击此类型按钮后,微信服务器会通过消息接口推送消息类型为event    的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互" },
                { text: "跳转URL", value: "view", icon: "fa-link", des: "用户点击此类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息。" },
                { text: "扫码推事件", value: "scancode_push", icon: "fa-qrcode", des: "用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息。" },
                { text: "扫码推事件且弹出“消息接收中”提示框", value: "scancode_waitmsg", icon: "fa-qrcode", des: "用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后,将扫码的结果传给开发者,同时收起扫一扫工具,然后弹出“消息接收中”提示框,随后可能会收到开发者下发的消息。" },
                { text: "弹出系统拍照发图", value: "pic_sysphoto", icon: "fa-camera", des: "用户点击按钮后,微信客户端将调起系统相机,完成拍照操作后,会将拍摄的相片发送给开发者,并推送事件给开发者,同时收起系统相机,随后可能会收到开发者下发的消息。" },
                { text: "弹出拍照或者相册发图", value: "pic_photo_or_album", icon: "fa-camera", des: "用户点击按钮后,微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。" },
                { text: "弹出微信相册发图器", value: "pic_weixin", icon: "fa-picture-o", des: "用户点击按钮后,微信客户端将调起微信相册,完成选择操作后,将选择的相片发送给开发者的服务器,并推送事件给开发者,同时收起相册,随后可能会收到开发者下发的消息。" },
                { text: "弹出地理位置选择器", value: "location_select", icon: "fa-map-marker", des: "用户点击按钮后,微信客户端将调起地理位置选择工具,完成选择操作后,将选择的地理位置发送给开发者的服务器,同时收起位置选择工具,随后可能会收到开发者下发的消息。" },
                { text: "下发消息(除文本消息)", value: "media_id", icon: "fa-newspaper-o", des: "用户点击按钮后,微信服务器会将开发者填写的永久素材id对应的素材下发给用户,永久素材类型可以是图片、音频、视频、图文消息。请注意:永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。" },
                { text: "跳转图文消息URL", value: "view_limited", icon: "fa-envelope", des: "用户点击按钮后,微信客户端将打开开发者在按钮中填写的永久素材id对应的图文消息URL,永久素材类型只支持图文消息。请注意:永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。" }
            ]);

众所周知,微信自定义菜单支持10中类型的按钮,那么这里是其类型的定义。这也说明,这个按钮组是完全通用的,你只要给予与上述结构一致的数据,其就能显示成当前效果。

  • GetActiveCss:获取当前所选样式。选中返回选中样式,否则返回空。
  • buttonClick:按钮点击事件,这里拿到的是数据项,ko就是这么方便。然后值得注意的是,参数是双向的,我们可以利用“params.SelectValue(item.value);”来回写值,这样编辑模型的类型值才会产生改变。

viewModel很简单,template也很简单,就是将刚才所说的viewModel绑定,用到了BootStrap按钮组样式“btn-group”,用foreach绑定SelectsModel,然后逐个绑定。

注意:

$parent表示父级对象,即乃父,因为foreach之后,其实对象已经指定到了乃父的儿子(SelectsModel)的某个儿子($data)上,而GetActiveCss是viewModel的女儿,自然要通过乃父来获取了,毕竟其乃父的儿子的子孙并不是她。

$data表示当前项,即乃父的儿子的某个儿子,用于循环中获取当前项数据。

with类似于using命名空间一样,用了它,下面的元素都可以省却改命名空间了。

是不是很简单的样子。我们再来说说模板:

动态加载模板

首先,我们先聚焦到以下代码:

<div data-bind="template:{name:$root.GetEditTemplateName,data:$root.EditModel,afterRender:$root.afterEditTemplateRender}">
                        </div>

首先我们得明确以下内容:

template语法用于绑定模板,其中name用于指定模板名称,这里绑定了$root.GetEditTemplateName方法,data用于指定模板的viewModel。

然后我们再来看看GetEditTemplateName怎么回事?如下所示:

//根据类型获取编辑模板
            this.GetEditTemplateName = function (data) {
                switch (data.type()) {
                    case "empty":
                        return "emptyTemplate";
                    case "media_id":
                    case "view_limited":
                        return "media_idTemplate";
                    case "view":
                        return "urlTemplate"
                    default:
                        return "keyTemplate";
                }
            };

看起来也蛮简单的样子,就返回了一个模板名称,那我们再继续来看看这些模板。

<script id="emptyTemplate" type="text/html">
    <div class="well">
        <h3>注意事项:</h3>
        创建自定义菜单后,由于微信客户端缓存,需要24小时微信客户端才会展现出来。测试时可以尝试取消关注公众账号后再次关注,则可以看到创建后的效果。
    </div>
</script>
<script id="keyTemplate" type="text/html">
    <div class="form-group" id="buttonDetails_url_area">
        <label class="col-sm-2 control-label">关键字</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" data-bind="value:key" />
        </div>
    </div>
</script>

<script id="urlTemplate" type="text/html">
    <div class="form-group" id="buttonDetails_url_area">
        <label class="col-sm-2 control-label">链接</label>
        <div class="col-sm-10">
            <input type="url" class="form-control" data-bind="value:url" />
        </div>
    </div>
</script>
<script id="media_idTemplate" type="text/html">
    <news-choice-button params="value: media_id"></news-choice-button>
</script>
<div data-bind="with:EditModel">
    <news-choice-modal params="value: media_id"></news-choice-modal>
</div>

模板的定义也蛮简单的,id和上面的字符串是一致的,类型必须为text/html。上面模板分别为空模板,关键字模板,链接模板和素材模板。

其中素材模板里面使用了自定义的component,和之前的buttonschoices一样,封装了多图文选择代码。

由于组件news-choice-button和news-choice-modal需要讲解的篇幅比较长,这里就暂不介绍了。

至于增删改查,对于ko来说,都是操作数据模型。比如左侧树形结构的增删,则是对Menus数组的增减操作,而编辑,则需要更新数组中的数据项。viewModel的修改,ko会自动重绘UI。这里就不多介绍了。

总结

通过使用knockoutjs 的动态模板,我们可以很方便的根据需要加载不同的模板进行绑定显示。而通过knockoutjs component的封装,我们可以很方便的实现对业务或者通用UI组件的封装,以达到重复使用的目的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券