iOS碼農(nóng)的微信小程序開發(fā)總結(jié)
最近公司需要一個微信小程序demo去給客戶看，就研究了幾天。
下面就說說開發(fā)微信小程序的時候遇到的一些問題，對于小程序的開發(fā)教程就不細(xì)說了，很多人都寫的比我好。下面就說一些我個人覺得比較實用的。
快速創(chuàng)建頁面
剛開始開發(fā)小程序的時候，一個個創(chuàng)建對應(yīng)頁面的js、json、 wxml、 wxss文件是很痛苦的，后面才發(fā)現(xiàn)在全局配置文件app.json中直接配置,然后 Ctrl+S 就會自動生成對應(yīng)的目錄文件了，如下圖所示。
全局的tabBar 和navigationBar配置
1. 全局的tabBar屬性和navigationBar屬性要盡量配齊。如果沒有配齊，在不同版本的微信中，可能會出現(xiàn)不同的情況。比如tabBar的背景顏色可能有默認(rèn)顏色，可能沒有默認(rèn)顏色，具體對應(yīng)微信哪些版本，我并沒有去測試。
2.全局文件的顏色配置只支持16進(jìn)制，不支持像red這種。
盡量使用最新版本的微信測試
在一些相對較舊版本的微信中，當(dāng)你使用了較新的API時，在真機中有可能出現(xiàn)事件不響應(yīng)，而微信小程序又不能真機調(diào)試，這時候就坑爹了，不知道出現(xiàn)什么原因，模擬器運行又沒有問題。所以當(dāng)你測試真機的時候出現(xiàn)了莫名其妙的問題時，你可以看看當(dāng)前版本的微信是否時最新的。
一般在安卓機測試是比較少問題的，安卓機使用的是QQ的內(nèi)核。而iOS就比較坑了，在不同的機型上也會有點問題，目前在布局上，遇到i5 9.0系統(tǒng)出現(xiàn)了布局不規(guī)范，暫時還沒有找到原因。
wx.showToast 提示框
目前微信的showToast都一定會帶著圖片，假如知道怎么去掉圖片的同學(xué)，請告知一下。
動態(tài)設(shè)置屬性
Flex布局模式
骰子布局
網(wǎng)格布局主要依賴flex屬性
百分比布局
流式布局
代碼在 https://github.com/icindy/wxflex90
閉包概念
var that = this 的使用。js和swift一樣存在閉包，當(dāng)我們在一個自定義方法內(nèi)使用了wx.request()時，假如用到了外部data的數(shù)據(jù)時，就需要var that = this，從而使用data的數(shù)據(jù)。
template 模版
在模版中定義代碼片段,然后在需要時調(diào)用.微信小程序的模版可以用name屬性作為標(biāo)記,在頁面中使用<template is="模版name名稱" ... 這樣就可以使用了。
支持import和include
import引用是有作用域，只能引用當(dāng)前指向文件中的template
include相當(dāng)于復(fù)制，會復(fù)制template里面的全部內(nèi)容,但是不包含template
每個頁面的XXX.js不能為空，否則下面會出現(xiàn) 1. Forgot to add page route in app.json. 2. Invoking Page() in async task. 的錯誤
條件渲染：主要是wx:if 和 block wx:if
列表渲染 ： wx:for
wx:for 綁定的是一個數(shù)組，數(shù)組當(dāng)前的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前的變量名為item。使用wx:for-item就可以指定數(shù)組當(dāng)前元素的變量名，wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名，wx:for如果嵌套的話，就需要改變默認(rèn)框架定義的名稱。
調(diào)試工具
wIxml panel ：在調(diào)試中可以看到真實的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應(yīng)的 wxss 屬性，也可以修改對應(yīng) wxss 屬性，在模擬器中實時看到修改的情況
Sources panel ：其實就是拿來斷點的。
Network panel ：可以看到請求的詳細(xì)情況。
App data panel ：可以看到當(dāng)前頁面的實時數(shù)據(jù)，也可以實時修改頁面上的數(shù)據(jù)。
Storage panel ： 用于顯示當(dāng)前項目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲情況。
Console panel ： 可以輸入和調(diào)試代碼
附上官方文檔 ： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html#console-panel
最后建議還未學(xué)或者剛開始學(xué)的同學(xué)看一下 微信小程序的 Q&A 文檔，比如 background-image：可以使用網(wǎng)絡(luò)圖片，或者 base64，或者使用 等等一些小知識點，都是開發(fā)中挺實用的 附上網(wǎng)址 https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=20161122
