【原創】前端開發人員如何製做微信小程序模板

（個人博客網站中的原文：http://www.xiaoxianworld.com/archives/305，歡迎遇到的小夥伴常來瞅瞅，給點評論和建議，有錯誤和不足，也請指出。）

 

最近接觸了一下微信小程序的開發，雖然項目中的頁面很簡單，可是最後作出成果來，也是費了一番周折。做爲一個偏前的前端，小程序的開發對我來講，在習慣上的改變仍是巨大的。一開始作時，不適應感蠻大的。如今把本身的一點點總結概括一下，微信小程序畢竟不是本身擅長的領域，真怕時間長了遺忘，寫一篇文章作爲備忘錄也好。

先說明，本文不涉及數據綁定的任何內容，若是你和我同樣是一名偏前的前端人員，那這篇文章必定很是有用，若是不是，那麼能夠忽略。

1、開發前的準備
首先要註冊，在微信開發平臺的官網上，https://mp.weixin.qq.com/，按照提示，一步步來，註冊一個小程序賬號，而後登陸。
接着是安裝開發者工具，
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201822
裝好後，設置項目的目錄、名稱等信息，有一個重要的AppId要填，在管理平臺的設置-開發設置裏面

建好以後，就是這樣一個界面：

左邊是界面演示區，中間是文件目錄，右面是代碼編輯區

2、重要文件app.json的設置和項目目錄的配置
我先說一個觀點，凡是遇到新技術、新工具，我都是把他儘可能和本身現有的知識技能體系相靠攏，這樣至少能夠儘快上手。
小程序中的文件類型，和html也能夠一一對應起來，.wxml就對應着.html文件，.wxss就對應着.css文件，.js文件也有，不用多說。
新建一個項目後，根目錄下除了文件夾，有四個文件，其中3個以app命名，這三個文件但是至關有用。特別是app.json，是對小程序作全局配置的，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。app.wxss，寫在這個裏面的css代碼能夠做用到全部頁面上，app.js，寫在這個裏面的js代碼一樣能夠做用到全部頁面上。展開pages目錄，有一個index目錄，裏面也有三個文件，

那麼，寫在index.wxss裏面的css樣式，和寫在index.js裏面的js代碼，就只做用於index.wxml。
個人經驗之談：每一個頁面都單獨建一個目錄，例如常見的會有這些：index，list，detail，news，product等，這樣利於管理，文件清晰好查找。
而後我要說一個重要的問題，每當建一個目錄，並建了一個.wxml文件後，就在app.json的pages參數中寫上這個文件的路徑，

這裏面的每一條，對應着一個頁面，就按照這個格式寫，不要寫錯，注意最後一條沒有逗號。第一條，會顯示在左邊演示界面中，也就是說，想調試哪一個頁面，就把哪一個頁面的路徑移到最上方。
寫完以後，保存，就能夠看到，剛纔咱們新建的目錄下，自動多了三個文件，

而後就能夠在.wxml中寫結構代碼，在.wxss中寫樣式代碼，在.js中寫行爲代碼了。

3、與html5既相同又不一樣
以上說的，能夠說全是準備工做，真正的寫代碼，剛剛開始，怎麼寫呢，其實原理和寫H5頁面徹底同樣，不一樣的只是標籤換了，寫法換了，有一些特殊注意的地方，咱們按照原來的習慣，對應的轉換過來，便可。
一、標籤更換
小程序中的標籤，沒有html那麼豐富，用於包裹的塊元素標籤，最最經常使用的div，在小程序中寫成view，內聯元素標籤則是text。
那麼，div，section，article，p，h1到h6，ul，li等，統統寫成view，
span，em，i，b，font，strong，del等，統統寫成text

連接，比較特別，<a href=""></a>，到小程序中是
<navigator url=""></navigator>

圖片，原來是img，換成image，並且須要加一個aspectFit屬性，不然圖片的比例會失調，固然，還有不少其餘屬性，查詢開發文檔，都很好理解：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html

表單元素，改變也很大，具體就不說了，在官方文檔都有說明。

因此，既然小程序的標籤比較單一，那麼就須要咱們添加更多的class了啊，才能分別設置樣式。

二、單位更換
寫H5頁面，通常用rem，px，百分比等，在小程序中，有本身的單位rpx，我本身的理解就是，一個div，寬度是100%，就是常說的通欄，那麼他的寬度就是750rpx。50%寬的，就是375rpx。

這個rpx能夠自動適應不一樣的屏幕尺寸，因此說，小程序中的頁面，兼容性無需擔憂。那麼效果圖最好是按750px去設計嘍。

三、全面支持flex佈局
flex佈局以前也接觸過，由於瀏覽器兼容性尚未全覆蓋，因此沒有用，仍是用的float，在小程序中，能夠放心的用了。實際用事後，感受比float強大不少呀。我相信，過不了幾年，flex佈局就會成爲主流，這將是前端佈局的一場革命，由於他徹底改變了現有模式。還不熟悉flex的小夥伴，抓緊去學學吧。

四、關於背景圖
先說明，小程序中是不支持背景圖的。不要說什麼可使用網絡地址呀，base64呀，對前端人員來講，這兩種方法是徹底不現實的。因此，就等於不支持背景圖。
那麼，怎麼辦，個人解決方法是：小圖，用字體圖標寫。大圖，用image寫，再寫絕對定位。目前沒發現更好的辦法。

五、字體圖標的使用
小程序有本身的字體圖標，可是，也太少了吧，這根本不夠用好嘛。

咱們仍是要藉助大阿里的圖標庫，但不能直接用，要把ttf字體轉化成base64，具體方式百度一下就有。參考這一篇，能夠說很詳細了：
http://blog.csdn.net/nongweiyilady/article/details/74244362

六、關於標籤閉合
小程序對於標籤閉合，要求的特別嚴格，太精確，能夠說，差了一點，都會報錯，有點像xhtml，標籤必需要閉合，尤爲注意像input這種單標籤 ，後面的 / 不寫，那是絕對行不通的。

4、模板和文件引用
只要遇到重複使用的代碼塊，就能夠建成一個模板，來處處引用它，例如頭部、底部、列表。模板的用法也不難，就是把代碼放到<template></template>中，起個名字name，就是一個模板了，引用模板用is屬性，具體查看官方文檔吧。（哈哈，越日後寫越想偷懶，什麼都是「請查看官方文檔」了）
我本身的習慣是，建一個名爲template的目錄，專門存放模板文件。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html

前面說的，每一個頁面有本身的樣式表文件和js文件，那麼別的頁面想使用這個頁面的樣式和js，有辦法麼，固然有，用文件引用啊，和css中的文件引用差很少，import和include兩種方式。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html

5、用好官方文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
前端人員主要看組件，和框架的一部份內容，就夠用了。

小程序有本身的官方開發文檔，很詳細，就是吧，對於第一次接觸的人來講，有點無從下手，並且容易看的頭疼。我就是這樣的，以上寫的這些，也是我花了多少精力，百度了多少次，並在實踐中，慢慢領會的。因此我寫的這些，不是說，看完了，就會寫出一個小程序模板了，只是一點點入門指點，一點點經驗之談。我我的體會，小程序和AngularJS，Vue.js，這些最近崛起的框架，迷之類似，最核心的在於數據綁定。可是我這次沒有涉及這方面內容，只是給前端的小夥伴一點幫助而已。說白了，小程序也是一套框架，任何框架都有其詳細的開發文檔，咱們必定要學會查看它，用好它，讓它更好的服務於咱們本身的項目。

就寫這些吧，有些地方寫的較倉促，可是，入門足夠了。