webApp开发-功能模块开发流程

1.定义结构

2.指定样式

3.填充数据

4.跑通业务流程

<!-- --><div class="bg_fff row border_bottom" id="acc_list"><div class="headimg col-30" ng-click="changeState('setHeader')"><img src="{{user.imagesrc}}" alt=""></div><div class="account col-40" ng-click="changeState('myInfo')"><li class="item font_l_3">{{user.name}}</li><li class="item font_n_2">{{user.phoneTel}}</li></div><div class="realname col-30" ng-click="changeState('accountsInfo')">钱包账户、实名</div></div>

 

/*--预定义--*/ /*normal 1大多数文字 小标题 模块描述 */ .font_n_1 {font-size: 0.14rem !important; }/*normal 2大多数文字 表单 */ .font_n_2 {font-size: 0.13rem !important; }/*large 1突出场景，例如金额 */ .font_l_1 {font-size: 0.24rem !important; }.font_l_1_5 {font-size: 0.20rem !important; } /*large 2重要文字或操作按钮 */ .font_l_2 {font-size: 0.17rem !important; }/*large 3账户名 */ .font_l_3 {font-size: .17rem !important; }/*--文本色--*/ .font_norm {color: #0076c1 !important; }.font_dark {color: #a2a2a2 !important; }.font_fff {color: #fff !important; } .font_red {color: red; } .font_black {color: black; } /*--背景色--*/ .bg_norm {background: #0076c1 !important; }.bg_fff {background: #fff !important; }.bg_ccc {background: #ccc !important; }.bg_tp{background: transparent !important; }/*上边框*/ .border_top{border-top-style: solid;border-top-width:1px;border-top-color:#E4E4E4; }.border_bottom{border-bottom-style: solid;border-bottom-width:1px;border-bottom-color:#E4E4E4; }/*--main--*//* 左图右文 */ #acc_list div.headimg,#acc_list div.account,#acc_list div.realname{text-align:center !important;padding:5px; } #acc_list div.headimg{margin-left:-10px; } #acc_list div.realname{margin-right:10px; } #acc_list div.headimg img{width:75px;height:75px;border-radius: 38px !important;} #acc_list div.realname{background: url(../img/menu_item_arrow.png) no-repeat right center;background-size: auto 18px;display:inline;line-height:80px;color: #999999 !important; }#acc_list li.item{border:none;text-align:left; } #acc_list li:nth-of-type(1) {padding-bottom:8px; } #acc_list li:nth-of-type(2) {padding:8px; }/*账户名 */ #acc_list .font_l_3 {font-size: .17rem !important;font-weight:bold !important; }

 

公共方法

angular.module('com.app.mobile.services', []) //.factory('sms',function(){return{init: function(){},}}) .factory('commonfn',function(){return{init: function($scope,$state){// 去往某个页面$scope.changeState = function(name, params){$state.go(name, params);}$scope.goBack = function() {history.back();}$scope.goStateWithNoAnim = function(stateName, params) {$ionicHistory.nextViewOptions({disableAnimate : true});$state.go(stateName, params);}},} })

 

转载于:https://www.cnblogs.com/alan-alan/p/7365967.html

总结

以上是生活随笔为你收集整理的webApp开发-功能模块开发流程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。