說有點神奇的微信應用號出來了韧涨，就好奇跟風看看微信小程序到底是怎樣的吧劲室，網(wǎng)上教程暫時不是很多，不過微信官方的開發(fā)者文檔非常詳細娄蔼，基礎的基本夠用了怖喻，菜鳥也不會做什么底哗，只會簡單的計算器。锚沸。
demo動態(tài)圖（GitHub地址：https://github.com/Tiquiero/wxapp-calculator）
微信小程序的的各種寫法相對于傳統(tǒng)前端更簡單跋选，高度封裝了，就按照他們的規(guī)范來寫就行哗蜈，因為沒有內測權限前标，目前的微信小程序都是在開發(fā)者工具的模擬器中運行的。
文件類型：xxx.wxml , xxx.wxss , ?xxx.js , xxx.json
1.xxx.wxml 和xxx.wxss
這兩個文件幾乎等同于前端中的HTML和CSS文件距潘，wxml是微信自己開發(fā)的一套標記語言炼列，界面構建都是在這個文件里編寫，只是沒有HTML標簽了音比，只有wxml標簽了俭尖，而wxml標簽數(shù)量也是很少的。wxss是微信自己開發(fā)的一套樣式文件格式硅确，等同于我們的CSS文件目溉，寫法也是一樣的明肮，只是換了個文件后綴菱农，以前我們怎么寫CSS的在微信小程序中我們依然怎么寫。
2.xxx.js和 xxx.json
xxx.js文件就是寫js的地方柿估，每個xxx.js對應一個同名的xxx.wxml文件循未，xxx.js文件必須有Page對象。輸入關鍵詞Page后微信Web開發(fā)者工具會自動生成一些列空方法待你實現(xiàn)秫舌，當然你可以不實現(xiàn)的妖，只是把你把骨架搭好而已。
xxx.josn文件就是配置文件足陨，一般是全局配置才用嫂粟，比如根目錄的app.josn，定義了小程序由哪些頁面構成墨缘，小程序導航Bar樣式等星虹，屬性看名字就知道什么意思了。
pages屬性配置的是頁面镊讼，位置第一個就是啟動頁宽涌，所有頁面都必須在這里配置，如果你建了一個頁面千萬千萬別忘記在這里添加了蝶棋，因為到時候頁面跳轉的時候onLoad方法不會執(zhí)行卸亮，這坑爬了好久。玩裙。兼贸。
整體結構：
一個頁面是一個文件夾段直，通常都有js、wxml溶诞、wxss坷牛，wxml和js文件是必須的，可以有沒有樣式很澄。index（小程序首頁京闰、啟動頁），calc（計算器頁面）甩苛、history（歷史記錄）蹂楣、logs（日志信息）、utils（js工具類）,logs和utils是自帶的讯蒲，可以有可以沒有痊土。
代碼部分：
用CSS Flexbox布局，貌似微信官方也是這么推薦的（官方文檔中就是使用Flexbox）墨林。
計算器的按鍵赁酝，都是用標簽來做的，加上wxss樣式即可旭等，當然也可以直接用button組件酌呆。
這里bindtap，看名字就知道是用來綁定事件的搔耕，跟我們在HTML中使用onclick一個道理隙袁。id={{id9}}雙大括號中的值來自js文件中data屬性定義的同名屬性
wxss就沒什么好說的了，唯一需要注意的是微信提供了一個尺寸單位rpx弃榨，responsive pixel 菩收，可以根據(jù)屏幕寬度進行自適應，官網(wǎng)文檔有詳細解析?鲸睛。
主要涉及API：
1.wx.navigateTo娜饵，導航，跳轉官辈，在當前頁面打開新頁面
2.Storage箱舞，本地存儲，保存計算歷史記錄用到了钧萍，它有setStorage褐缠、getStorage，同時還有帶Sync結尾的異步方法（setStorageSync,getStorageSync）
注意事項:
1.每新建一個頁面一定要記得去app.josn的pages屬性中添加风瘦，不然的話使用navigateTo跳轉到新頁面后新頁面的onLoad方法不會執(zhí)行队魏。
2.微信小程序中沒有window等JavaScript對象，所以在寫js前想好替代方案，本來使用js的eval函數(shù)可以方便的計算表達式胡桨，結果沒法用官帘，只能另找?guī)椭?/p>
3.微信小程序中的js并不是真正的js，wxss也并不是真正的CSS昧谊，所以寫的時候還是要注意一下刽虹。
4.本計算器存在不完善和bug，因為重點不是實現(xiàn)全部功能呢诬，而是搞清楚微信小程序開發(fā)方法涌哲，所以非關注點不用在意。
