“银商餐厅”公众号开发的问题汇总

1.ionic框架

前端页面的开发选用了ionic框架，ionic框架是一个强大的基于Angular js 的HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )，帮我们集成了很多前端的控件，非常适合在移动端做前端开发。开发过程中的最大问题应该还是对angular不太熟悉，而且以前没怎么接触过java，尤其是spring框架，不过开发完成后觉得针对这种移动端的H5页面的开发，ionic和spring还是非常方便的，而且两套框架具有其相似之处，都是基于MVC思想的。不过ionic框架在ios系统和Android系统的显示效果还是有很大差别的，开发过程中遇到的最大困难是，在使用$ionicPopup弹出窗口时，如果有传参，在ios系统中，带有参数的弹出窗口没有显示。如定义了一个提示框showAlert()，

$scope.showAlert = function(template) {
     var alertPopup = $ionicPopup.alert({
            scope: $scope, //子页面继承父页面的作用域
            template: '<div style="margin:10px;font-size:18px;text-align:center;">'+ template +'</div>',
        });    
}

界面里有一个商品预订数量的减少按钮，数量限制为不能少于1，但是数量不能少于1弹出窗口没有显示，而是只显示了alert自带的ok窗口，但是在Android里显示正常。

$scope.reduceNumbers = function (){
        if($scope.numbers>=2){
            $scope.numbers --;
        }else{
            $scope.showAlert('数量不能少于1');
        }
    }

至今没找到原因，唯一的解释应该是ios对ionic的支持太过友好，运行太快，还未捕捉到参数就已运行showAlert 函数。目前的解决方法是所有函数里面写 $ionicPopup，不用传参的形式。

$scope.reduceNumbers = function (){
        if($scope.numbers>=2){
            $scope.numbers --;
        }else{
            //$scope.showAlert('数量不能少于1');
            $ionicPopup.alert({
                template: '<div style="margin:10px;font-size:18px;text-align:center;">数量不能少于1</div>',
            });    
        }
    }

2. UI设计相关

在原有的web端的商品预订与U聊的银商餐厅的公众号的基础上，考虑到ionic框架自带的slide功能，将商品分为点心、酒水等几大类，并直接在数据库对现有商品的表增加了代表商品分类的标志位，前端显示的效果的确优于之前的，并且也得到了餐厅经理的赞同，说明一个好的UI设计师是多么重要啊，这也是一个需要努力的方向。