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开发-功能模块开发流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。