一個菜鳥的小程式總結(二)
前言
感謝大家對上一篇的點贊和讚賞,現在接著寫,沒看過上一篇的同學可以先點這裡。 方曉:一個菜鳥的小程式總結(一)
上一篇補充
先補充一下上一篇大家問的問題。
weui-wxss:
weui-wxss給對視覺互動不熟的同學提供了很大的方便,但如果你想將他提供的樣式和圖片做定製化,可以參考
https:// github.com/weui/weui-de sign
這裡面提供了支援Photoshop和sketch的素材下載,我們可以在他的基礎上修改自己想要的樣式和圖片從而做到定製化。
雲開發限制:
很多同學覺得雲開發挺好用但擔心限制問題。雲開發的限制可以參考 https:// developers.weixin.qq.com /miniprogram/dev/wxcloud/reference/quota.html
對於個人開發者來說檔案儲存5G,雲函式月20萬呼叫,100張表,資料庫2G容量在小程式初級是足夠的,如果還不夠,先恭喜你的小程式訪問量已經很高了,然後你可以傳送郵件至:[email protected] 申請調整。當然你也可以選擇使用自己的伺服器和其他雲服務。我只是推薦雲開發,無利益相關,推薦它的原因是它比較省錢。
是否需要買現在市面上的小程式書籍:
我冒著被這些書籍作者打的風險告訴大家:對於新手來說完全沒必要買,類似小程式這樣的開發工具或框架,讀官方文件是最好最快的途徑。因為這些文件往往都是開發者自己寫的,是與開發者思路最接近的。
小程式立項
下面進入本篇正題,上一篇介紹了技術儲備和開發前準備,我們現在做最重要的一個環節,就是我們做什麼型別的小程式? 對於我來說,寫的第一個小程式希望能達到以下目標:
1. 練手。快速熟悉小程式的開發流程,使用方法。
2. 實用價值。 能解決大家的問題,最好是能蹭熱點事件,關注的人越多價值就越大。
湊巧的是這個時間點我們公司正舉辦小程式大賽(領導比較關注新技術),也許因為我是前端的緣故我硬著頭皮做了小程式大賽技術支援的導師,一方面解答參賽者的技術問題,另方面我也接著這個契機報名參加了比賽。由於是公司舉辦的比賽,所以目標做了下調整,我會選一個與公司業務有關聯的專案。當時我們團隊正做一個苦逼的專案:稅延年金。
為了便於讀者理解先介紹下稅延年金:簡單來說就是可以拿收入的6%,1000元為上限做為稅前抵扣,比如一個人的收入稅點達到了30%,他每個月出1000購買年金,可以少交300元的稅,年金賬戶的錢也會有3%的收益,一直到他退休後可以取,取得時候再交7%的稅。 這就是稅延年金,是國家18年推的一個養老年金產品,目前在上海,福建,蘇州工業園區三個地區實行。稅延年金介紹完畢,這不是重點,大家知道大概就行了。
所以idea就來了,一個使用者在買稅延年金如果能先通過一個工具試算下知道自己能抵多少稅,退休時能領多少錢,這樣就能減少他對這個產品的學習成本,讓他快速做出決策是否購買。
最後這個新的小程式孕育而生 “稅延計算器”
原型製作:
稅延計算器分兩部分:1. 抵扣稅的計算 2. 領取價值的計算。我們先做第一部分,這裡算的是稅,所以還隱性包含了個稅的計算,來一個不專業的草圖,使用者填收入就可以算出他的稅延保險額度並且算出可以節省多少稅。

對應著草圖和稅延年金的業務點,先開始寫靜態的wxml,這裡使用上篇介紹的佈局神器weui-wxss的表單元件

找到對應example的wxss和wxml程式碼直接拷貝到我們小程式的工程,
在工程裡面引入weui-wxss,再用最基本的wxml和wxss用法完成了原型。

作為一個對視覺互動沒什麼經驗的人畫出這樣的原型也還ok吧,反正沒之前想的那麼複雜。
下一步我們就開始要寫js了實現計算邏輯了,今天先寫這麼多,後面的精彩內容敬請期待。
上一篇: 一個菜鳥的小程式總結(一)
更多文章還請關注公眾號:大前端工程師