功能(néng)開發

一年半的時間，我們親眼見證了小(xiǎo)程序從萌芽成長(cháng)為(wèi)參天大樹，支撐起我們現今的生活方式，讓我們在他(tā)的樹蔭下享受着舒适。很(hěn)多(duō)公司自然不會錯過這次機會，紛紛加入到小(xiǎo)程序的行列。

這對設計和開發而言算是一次挑戰，畢竟要快速上線(xiàn)的步伐沒有留給我們太多(duō)時間，而市面上的相關資料都太零碎，在實際中(zhōng)會遇到很(hěn)多(duō)的坑，官方文(wén)檔也沒有說明。所以我拉着我們開發小(xiǎo)哥(gē)哥(gē) Yog，幫大家規避小(xiǎo)程序設計中(zhōng)的那些坑。

一、設計稿最好用(yòng)二倍圖

UI設計師都喜歡用(yòng)一倍圖，但為(wèi)什麽用(yòng)一倍圖，方便适配是表面現象，真正原因是開發用(yòng)的開發工具支持一倍圖開發，開發不用(yòng)再換算數值了。而小(xiǎo)程序的開發工具不支持一倍圖開發，支持二倍圖開發。小(xiǎo)程序裏的尺寸單位叫 rpx，可(kě)以根據屏幕寬度進行自适應。在750*1334的設計稿裏，1px = 1rpx。

如果你心疼你的開發小(xiǎo)哥(gē)哥(gē)，讓他(tā)少掉點頭發，設計稿用(yòng)750*1334的尺寸。但如果你的開發小(xiǎo)哥(gē)哥(gē)之前老欺負你，那你就看着辦(bàn)吧，他(tā)都能(néng)搞定。

二、切圖隻需切750的尺寸

設計稿用(yòng)二倍圖做的(750*1334)，隻需給一倍的切片;如果是按一倍圖設計的(375*667)，隻要給二倍的切圖。真的不管其它尺寸嗎?不是不想管，而是小(xiǎo)程序的開發工具不支持。

三、導航欄不要自定義

标準高度：128rpx

小(xiǎo)程序很(hěn)輕量，同時也有很(hěn)多(duō)限制。導航欄不能(néng)自定義就是其中(zhōng)之一，能(néng)改變的隻有顔色。

這是官方的意思，但是，要改也是可(kě)以的，需要客戶端版本是6.6.0以上，而且下拉會使整個頁面下拉，也不好維護。

你會說這不有小(xiǎo)程序已經使用(yòng)了嘛，是，這個小(xiǎo)程序叫汪卡，現在，他(tā)們已經改回來了。所以，你也别難為(wèi)你的開發小(xiǎo)哥(gē)哥(gē)了。

四、标簽欄愛素顔

這個标準名(míng)稱叫：标簽分(fēn)頁導航，标準高度：98rpx，簡稱标簽欄。

1. 偷笑别人花(huā)了臉

又(yòu)是一個安(ān)靜的晚上，一個人窩在公司裏設計，我承認這樣真的很(hěn)無奈，和其它小(xiǎo)程序一樣。聽說你還在搞什麽原創，加個投影來點漸變，自以為(wèi)這樣很(hěn)棒簡直無懈可(kě)擊。結果開發小(xiǎo)哥(gē)哥(gē)哭了，我相信是很(hěn)美美的圖，但是開發做不到啊，那種表情可(kě)以想象。

雖然也可(kě)以，做點其它形态，那就拜托别讓開發見到你。如果再能(néng)看到你，一定就是這麽說，原生控件好處多(duō)多(duō)最好能(néng)用(yòng)它。不用(yòng)擔心出問題，不用(yòng)維護怕麻煩。

2. 圖标隻要81rpx

還是一個安(ān)靜的晚上，還是我在做設計，這次我真的按耐不住，和其它小(xiǎo)程序一樣。聽說你又(yòu)再搞什麽原創，中(zhōng)間圖标變大大，破形破形再破形，燃燒開發腦細胞。

但是，要知道，圖标隻要81rpx，小(xiǎo)于大于都變形，一定記得規格框。數量隻能(néng)2至5，多(duō)了少了不算數，你隻能(néng)去改圖标，其它組件說了算。

五、彈窗不覆蓋導航跟标簽

在小(xiǎo)程序裏導航欄跟标簽欄的層級是最高的，以至于享受慣最高待遇的彈窗在這裏，也要臣服于他(tā)們。

六、視頻限時多(duō)

小(xiǎo)程序對視頻的支持不是特别的好，原則上在滾動控件裏不能(néng)放視頻，而且微信官方文(wén)檔裏是這樣要求的。這點我也像我們開發小(xiǎo)哥(gē)哥(gē)求證，确實是這樣，優酷和騰訊視頻都是将視頻固定。

但其實吧，這點已經被有些公司攻克了，比如開眼跟京東。攻克是攻克了，但是體(tǐ)驗不怎麽好。如果公司産(chǎn)品需要放視頻，建議專門新(xīn)開一個頁面，視頻部分(fēn)最好不要有左右滾動。

七、一稿适配

iPhone X 怎麽辦(bàn)，安(ān)卓怎麽辦(bàn)，這些都不用(yòng)再設計了，開發小(xiǎo)哥(gē)哥(gē)都能(néng)搞定，相信他(tā)們。

八、關于設計資源

微信官方雖然有提供，但是更新(xīn)時間停留在了2016年，沒有現在新(xīn)版的小(xiǎo)程序樣式，和現在的區(qū)别就在頂部導航欄上。