（我的博客網站中的原文：http://www.xiaoxianworld.com/archives/305，歡迎遇到的小伙伴常來瞅瞅，給點評論和建議，有錯誤和不足，也請指出。）
最近接觸了一下微信小程序的開發，雖然項目中的頁面很簡單，但是最后做出成果來，也是費了一番周折。作為一個偏前的前端，小程序的開發對我來說，在習慣上的改變還是巨大的。一開始做時，不適應感蠻大的。現在把自己的一點點總結歸納一下，微信小程序畢竟不是自己擅長的領域，真怕時間長了遺忘，寫一篇文章做為備忘錄也好。
先說明，本文不涉及數據綁定的任何內容，如果你和我一樣是一名偏前的前端人員，那這篇文章一定非常有用，如果不是，那么可以忽略。
一、開發前的准備
首先要注冊，在微信開發平台的官網上，https://mp.weixin.qq.com/，按照提示，一步步來，注冊一個小程序帳號，然后登錄。
接着是安裝開發者工具，
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201822
裝好后，設置項目的目錄、名稱等信息，有一個重要的AppId要填，在管理平台的設置-開發設置里面
建好之后，就是這樣一個界面：
左邊是界面演示區，中間是文件目錄，右面是代碼編輯區
二、重要文件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中寫行為代碼了。
三、與html5既相同又不同
以上說的，可以說全是准備工作，真正的寫代碼，剛剛開始，怎么寫呢，其實原理和寫H5頁面完全一樣，不同的只是標簽換了，寫法換了，有一些特殊注意的地方，我們按照原來的習慣，對應的轉換過來，即可。
1、標簽更換
小程序中的標簽，沒有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了啊，才能分別設置樣式。
2、單位更換
寫H5頁面，一般用rem，px，百分比等，在小程序中，有自己的單位rpx，我自己的理解就是，一個div，寬度是100%，就是常說的通欄，那么他的寬度就是750rpx。50%寬的，就是375rpx。
這個rpx可以自動適應不同的屏幕尺寸，所以說，小程序中的頁面，兼容性無需擔心。那么效果圖最好是按750px去設計嘍。
3、全面支持flex布局
flex布局之前也接觸過，因為瀏覽器兼容性還沒有全覆蓋，所以沒有用，還是用的float，在小程序中，可以放心的用了。實際用過后，感覺比float強大很多呀。我相信，過不了幾年，flex布局就會成為主流，這將是前端布局的一場革命，因為他完全改變了現有模式。還不熟悉flex的小伙伴，抓緊去學學吧。
4、關於背景圖
先說明，小程序中是不支持背景圖的。不要說什么可以使用網絡地址呀，base64呀，對前端人員來說，這兩種方法是完全不現實的。所以，就等於不支持背景圖。
那么，怎么辦，我的解決方法是：小圖，用字體圖標寫。大圖，用image寫，再寫絕對定位。目前沒發現更好的辦法。
5、字體圖標的使用
小程序有自己的字體圖標，但是，也太少了吧，這根本不夠用好嘛。
我們還是要借助大阿里的圖標庫，但不能直接用，要把ttf字體轉化成base64，具體方式百度一下就有。參考這一篇，可以說很詳細了：
http://blog.csdn.net/nongweiyilady/article/details/74244362
6、關於標簽閉合
小程序對於標簽閉合，要求的特別嚴格，太精確，可以說，差了一點，都會報錯，有點像xhtml，標簽必須要閉合，尤其注意像input這種單標簽 ，后面的 / 不寫，那是絕對行不通的。
四、模板和文件引用
只要遇到重復使用的代碼塊，就可以建成一個模板，來到處引用它，例如頭部、底部、列表。模板的用法也不難，就是把代碼放到<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
五、用好官方文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
前端人員主要看組件，和框架的一部分內容，就夠用了。
小程序有自己的官方開發文檔，很詳細，就是吧，對於第一次接觸的人來說，有點無從下手，而且容易看的頭疼。我就是這樣的，以上寫的這些，也是我花了多少精力，百度了多少次，並在實踐中，慢慢領會的。所以我寫的這些，不是說，看完了，就會寫出一個小程序模板了，只是一點點入門指點，一點點經驗之談。我個人體會，小程序和AngularJS，Vue.js，這些最近崛起的框架，迷之相似，最核心的在於數據綁定。但是我此次沒有涉及這方面內容，只是給前端的小伙伴一點幫助而已。說白了，小程序也是一套框架，任何框架都有其詳細的開發文檔，我們一定要學會查看它，用好它，讓它更好的服務於我們自己的項目。
就寫這些吧，有些地方寫的較倉促，但是，入門足夠了。