1. 二、支付寶小程序前端樣式的設計.acss樣式詳解
在視頻中已經說過了,小程序的設計思想和原生app的設計思想頗為相似,基本的應用單元為頁面。當然對於一個頁面來說每一個元素的放置位置在哪兒以及顯示成什麼樣子這個是由 樣式來決定的 。我們知道在web開發中樣式是在css文件中規定的,叫做層疊樣式表 (Cascading Style Sheets)。其實在APP中樣式的約束也是使用css,在支付寶小程序中也是使用css不過文件的後綴是.acss而且對css3進行了擴充而已。
那麼在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什麼兩樣。 上邊已經說了.acss其實包含了css3那麼它還有一些新的特性是css3中不具備的,讓我們一一看看
第一次看到這個東西也能猜到他是干什麼用的。在css中我們知道規定大小一般使用像素(px)這個單位。比如顯示生活中我們說房子128㎡那這兒的單位是平方米,在開發中需要更加精準的大小就是px像素。像素就非常精細了因為在我們顯示屏幕中像素是最小的顯示單元。這個道理如果不懂的話就找個LED屏幕仔細看,LED屏幕上一個一個的發光二極體可以想像為像素。
我們知道手機屏幕有大有小,就拿iPhone來說,iPhone 6 plus比iPhone 5要大。那麼就說明plus的像素比5要多。對比:
加入有一個160px寬度的紅色矩形在這兩種手機中的位置如下:
rpx(responsive pixel)可以根據屏幕寬度進行自適應。如何自適應呢?看下邊的分析:
看下圖:
在模塊化開發中我們有時候不得不在頁面中使用其他的第三方庫的樣式,而第三方庫的樣式是保存在第三方包中的,我們不可能全部復制到我們的.acss文件中,那最好的辦法就是導入了。在樣式表中導入其他外聯樣式表。
當然仍舊支持內聯樣式和class屬性制定樣式類,如
選擇器和css3的保持一致。一般有class=」test」類選擇器和id=」test」的id選擇器。當然在支付寶小程序的樣式中特殊的地方就是:
※ .a- 或者 .am-為前綴的選擇器已經被系統佔用所以不要使用;
※ 不能使用屬性選擇器,例如,以下寫法不被支持:
我之前說過小程序開發的應用單元為頁面。其實我們在.axml中寫的頁面並不包含頁面容器,就相當於我們做一個頁面但是body標簽不用寫那如果我們要改變整個頁面的背景怎麼辦呢?其實有一個固定的選擇器。例如:
可以通過 page 元素選擇器來設置頁面容器的樣式,比如頁面背景色:
在你想改變頁面容器的頁面中定義該樣式也可以,全局定義也可以,例如我想將test這個頁面的頁面容器背景設置為藍色,就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式
下節是視圖層講解,如果有任何問題可以再下方給我留言或者發郵件到 [email protected] 我在收到郵件後會回復。
2. 前端開發常用哪些工具軟體
前端開發的編譯器在選擇上還是很多的。在學校里,老師主要講三個前端開發軟體:
1、WebStorm
幫助編寫HTML、CSS、Less、Sass和Stylus代碼,並且支持Node.js和主流框架,如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。
2、IntelliJ idea
頁面很簡單,乍一看像是一個記事本,它也確實可以當記事本用。有很多特色插件可以使用,支持多種編程語言的語法高亮顯示,具有代碼折疊功能。
2、HBuilderX
HBuilderX是DCloud(數字天堂)推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本,具有輕便、適合vue框架的特點。
3. 請問怎麼做app開發
App定製開發並不是一件簡單的事,好的軟體應用的開發需要專業的App開發團隊和標准化開發流程來支撐。App開發流程的重要性不必多言,不論是IOS還是Android的應用開發,其實都遵循著一定的開發流程,只有這樣才能使開發過程有章可循而不是一團糟。那麼,標准化的App開發流程是怎樣的呢?
喜望軟體基於十年的軟體應用開發經驗給大家詳細講一下我們的App標准化開發流程。
我們按工作的性質不同先把App開發分成三個階段:售前、售中、售後,每個階段包括了多個步驟,循序漸進,最終完成項目的開發。
Part一:售前
一、需求溝通
在意向客戶提出有項目需求時,我們的產品經理會跟售前顧問一起跟客戶進行溝通。有些客戶對於自己的需求通常只是一個大方面的想法,這個時候就需要我們專業的產品經理幫他整理出項目的具體需求和功能列表清單,並幫客戶分析出沒有考慮到的或能否實現的需求。
二、項目可行性分析
客戶自身和產品經理都需要清晰了解該項目的功能特點、用戶痛點、行業需求和為用戶提供的服務內容等,每一點都要做出詳細的調查分析,尤其是客戶痛點這塊。如果開發出來的App存留很多痛點,那麼就算開發成功,也沒多長時間的存活時間。因為任何一個App最終的成功都是建立在用戶基礎之上的。
三、功能流程梳理
(1)整理架構
整理架構的過程就像是修房子打地基,產品經理會梳理產品整體功能架構,整理出核心內容,打造產品的地基,以確保客戶以後可以在這個原有的基礎上進行調整,更為方便、更具有擴展性。
(2)功能列表
接下來,產品經理會做出更詳細的功能列表,添加每個模塊的細節內容及具體功能,比如「注冊」用哪種注冊方式,簡訊驗證碼還是第三方注冊等。這部分就像你在裝修毛坯房時,首先要考慮加上門窗、水電改造等。
(3)梳理流程
產品經理會根據客戶的需求梳理出產品的核心業務,會幫客戶提前考慮到他們現有的流程是否可以在互聯網上進行操作,例如一些傳統行業轉互聯網的企業客戶,產品經理會站在移動互聯網的專業角度幫客戶梳理並優化流程。
四、量身定製實施方案
當需求文檔確認完畢之後,售前顧問會根據客戶需求量身定製一套App開發方案和報價清單,包括項目組人員安排、時間節點安排和技術方案等,待客戶確認完之後就可以開始正式簽約合作了。
Part二:售中
一、產品設計
1.原型設計與評審
喜望軟體的產品經理根據需求文檔設計出高保真原型圖,包括功能的結構性布局、各分頁面的設計、界面交互邏輯的設計等。高保真原型圖將需求文檔轉換為更直觀的軟體demo版本,這樣即可以確認更多的細節,保證項目研發的效果,也能避免溝通不暢或溝通不到位而引發的糾紛問題。
(喜望軟體的技術標准)
4.技術標准制定
項目經理在了解清楚整個項目的需求後提供易擴展、可持續迭代的技術框架方案,比如是原生開發還是混合開發、用Java還是PHP、還有第三方選型等。
二、敏捷開發
1.迭代開發計劃
在正式進入項目開發之前,項目組會對項目本身進行評估,對研發周期、提測時間、預發布時間點進行初步的判斷。接著對項目功能進行分解,把項目需求劃分成4-5個節點,比如1號-9號做第一個功能模塊,10號-15號做第二個功能模塊……項目組把迭代開發計劃發給客戶確認後,就開始按著這個計劃做節點研發了。
2.節點研發
按照需求分析整理出來的功能數據處理情況,項目組會建立合理的資料庫表結構,優化數據演算法,提升數據的處理效率,保證後期App使用過程中數據的安全性、准確性、穩定性和及時性。
一個完整的App項目一般包含以下幾個模塊:
(1)伺服器端:編寫介面協議文檔,伺服器環境架設(國內一般都是用阿里雲伺服器,國外一般用亞馬遜),設計資料庫和編寫API介面,業務功能實現及介面封裝、管理後台的開發。
(2)App端:根據UI設計圖進行界面開發,UI開發完成後對接伺服器介面,通過服務端介面獲取數據,編寫功能上的邏輯代碼。
(3)Web管理端:根據前端的業務邏輯,後台會有相應的功能與之匹配,同樣需要編寫功能上的邏輯代碼。
在項目研發階段,項目經理進行技術攻關,流程助理同時跟蹤進度,項目組也會每周向客戶進行開發進度匯報,並協助客戶申請軟著。
3.單元測試
以前的開發流程就是工程師從頭寫到尾,把App功能全部開發完成後再進行系統測試,這樣就很容易出現以下幾個問題:修改了一處bug卻在另一處地方引發了新的bug、擴展新功能的同時導致舊代碼出現bug等等,這個時候就需要引入單元測試。
單元測試簡單來說就是工程師做一個節點研發,測試工程師就測試一個節點,這樣就能夠清晰的知道是否破壞了老的業務邏輯,容易排除掉一些非常低級的錯誤,大大減少回歸出錯的可能性和調試的時間,提高代碼質量。
4.系統測試
App功能開發完成之後,測試人員會對整個項目進行系統性測試。而完成項目測試調試最重要的環節是問題的管理,追蹤各個bug的進度以及狀態,包括指派給誰、優先順序、修復狀態等,以便有質量地完成問題的處理。
產品面向的平台多機型同步測試,包括:App內容測試、App性能測試、App功能測試、App視覺測試,對BUG調試修復。測試合格,確認沒有bug後與客戶進行溝通,開始驗收,再由客戶進行測試,提出修改意見。
三、上線交付
01.用戶體驗測試
喜望軟體在2018年新設了一個「創新性人才崗位」——用戶體驗官,這是移動互聯網行業首創的「從功能試錯服務到運營實踐服務」。
用戶體驗官的工作就是用戶體驗測試,從用戶體驗、產品、易用性、顏值、App設計還原度等多個維度進行體驗性測試,並通過後台上傳真實的前期種子數據,讓整個App的內容很豐滿,互動性強。用戶體驗測試是從項目本身的用戶群體和運營邏輯來幫助客戶打造好整個App的調性。
02.部署上線
在代碼開發和測試完成後,就進入了後期上線的階段。
(1)部署正式伺服器:將資料庫、後台系統部署到正式的伺服器上面,並錄入正式的上線數據到app系統後台。
(2)准備上架相關的資料:如軟體著作權、應用說明、App界面截圖和打包版等。
(3)發布App應用到市場:根據App埠選擇發布iOS或Android應用市場。
①Android:涉及的應用市場很多,主流市場是騰訊應用寶、手機網路助手、360手機助手、91手機助手,不同的應用市場的受眾屬性和流量會有所不同,需要根據客戶需求和項目實際情況來選擇。一般來說,1-2個工作日就可以通過審核上線。
②iOS:發布到App Store,提交後一般最快都需要5個工作日左右才可以通過審核上架。因為App Store審核比較嚴格,比如是否符合最新的上架要求、是否涉及到虛擬貨幣、是否支持最新環境等很多問題都會決定審核能否通過。
但有可能會遇到這種情況:比如某App存在3個導致不通過的問題,App Store只要找到其中一個問題就不會通過,不會把3個問題都找出來告訴你為什麼拒絕,所以如果經驗不足,上架N次花費幾個月都是很有可能的。
③發布小程序到微信公眾號:需要把小程序發布提交給微信團隊審核並上架,一般1-2個工作日就可以通過審核上線。
03.源碼交付
APP開發測試上線後,要進行終驗交付,即按照合同規定,將源碼、說明文檔、操作文檔等所有項目的相關資料交付給客戶。
包括但不限於:
1.前後端項目的所有最新源代碼(含注釋)
2.資料庫設計文檔
3.API設計文檔
4.所有的開發者賬號資料
5.測試文檔
6.原型設計稿
7.UI設計稿
8.項目相關文檔等資料
04.項目運營培訓
在交付源碼時,喜望軟體的項目經理會給客戶針對項目的所有功能操作進行培訓,比如優惠券怎麼發、司機怎麼核審、怎麼查看用戶注冊等。我們也會根據客戶需求,讓品牌設計師和新媒體運營官為客戶設計上線海報和新媒體運營方案。
Part三:售後
一、前期維護
一般的App開發完後都需要進行維護,即便是已經達到相對穩定的階段,也可能隨著手機系統的升級或長時間的使用等,出現一些小問題或隱藏得比較深的bug。
喜望軟體會免費贈送客戶三個月的維護期,一個項目正式上線運營了3個月左右的時候就已經清楚了整體的運營模式和部分功能欠缺,接下來想要繼續運營app就需要迭代開發、優化功能模塊。
在此期間,我們會解答客戶的疑問、指導軟體的使用和內容的上傳等事項,以及修復程序Bug、突發情況發生後緊急維修等。
二、定製更新
在App投放到市場後,會得到用戶以及市場本身的一些反饋,從而知道該如何修正或者調整運營策略,當目前系統的功能無法滿足項目需求時,就需要規劃新一版本功能的迭代問題了,也就是開發項目2.0。
喜望軟體會幫助客戶進行定製更新,也就是繼續App開發前期「售前」所做的工作:需求溝通、可行性分析、功能流程梳理以及量身定製實施方案。
這個迭代方案一般根據以下2點進行制定:
①未完善的BUG
比如上線後的App在運營過程發現的一些BUG,或者邏輯錯誤的一些地方,如果我們想要修復這些邏輯錯誤問題和功能BUG,就必須進行App的迭代。
②App數據分析
數據是極其重要的衡量標准,通過分析App的投放資源、用戶激活率、轉化率、留存率和用戶進入使用不同功能的佔比、各個環節的流失,尋找對App體驗影響較大的指標,分析自查功能設計上的優劣,以便進行功能上的版本迭代。
三、迭代開發
同樣的,當項目進行迭代開發時,也會重新經歷「售中」的全部過程,包含產品設計、敏捷開發和上線交付等所有的產品生命周期。
四、項目維護回訪
當項目運營過一段時間(免費維護期結束)後,喜望軟體會對客戶進行回訪,詢問運營情況等。當然了,如果後續客戶需要我們繼續提供運維支持,我們也是很樂意的,因為在App運營的過程中需要與時俱進、維護更新,App才能長存。
五、新媒體運營
成功上線後的App可以通過企業的運營推廣,發展用戶數量,得以長久的運營。推廣運營的方式有很多種,比如進行線下推廣、投入廣告、新媒體運營推廣等。
貼心的喜望軟體根據十年的從業經驗以及目前市場情況,會推薦客戶做成本相對較低的新媒體運營推廣。
從上面的App開發流程來看,每一個項目研發都要經歷以上3個階段22環節,這其實是一條完整的流水線,做到這樣往往能達到較高水準的項目質量。但是如何保證流程順暢進行?如何使項目成員的工作效率最大化?這就十分考驗開發公司的專業度和項目成員的規劃能力了。
之前有講到過,一款App開發的時間也會影響到App開發的價格,所以,了解一下App的標准開發流程還是很有必要的喲。
如果您想開發App軟體,或者想了解更詳細的開發流程、開發方案、報價等等相關內容,歡迎咨詢成都喜望軟體,有專業的售前顧問、產品經理為您詳細解答App相關疑問。
4. web前端開發都需要什麼應用軟體
web前端是一個新興職業,市場需求大,薪資待遇高,吸引了很多人加入學習。今天給大家分享一下web前端開發用什麼軟體。
1、Sublime Text
Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能,例如迷你地圖,多選擇,Python的插件,代碼段,等等。完全可自定義鍵綁定,菜單和工具欄。Sublime Text的主要功能包括:拼寫檢查,書簽,完整的Python API,Goto功能,即時項目切換,多選擇,多窗口等等。
2、Dreamweaver
Adobe Dreamweaver使用所見即所得的介面,亦有HTML(標准通用標記語言下的一個應用)編輯的功能,藉助經過簡化的智能編碼引擎,輕松地創建、編碼和管理動態網站。 訪問代碼提示,即可快速了解 HTML、CSS 和其他Web 標准。使用視覺輔助功能減少錯誤並提高網站開發速度。
3、Visual Studio Code
Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器,軟體功能非常強大,界面簡潔明晰、操作方便快捷,設計得很人性化。軟體主要改進了文檔視圖,完善了對 Markdown的支持,新增PHP語法高亮。
4、HBuilder
HBuilder是專為前端打造的開發工具,具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數據、可以方便的製作手機APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發。從開放注冊以來深受廣大前端朋友們的喜愛。
5、WebStorm
WebStorm 是jetbrains公司旗下一款Java 開發工具。目前已經被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的Java IDE」等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。