最近公司需要一個微信小程序demo去給客戶看勾给，就研究了幾天。
下面就說說開發(fā)微信小程序的時候遇到的一些問題锅知，對于小程序的開發(fā)教程就不細(xì)說了播急，很多人都寫的比我好。下面就說一些我個人覺得比較實(shí)用的售睹。
快速創(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時辜伟，在真機(jī)中有可能出現(xiàn)事件不響應(yīng)，而微信小程序又不能真機(jī)調(diào)試脊另，這時候就坑爹了导狡，不知道出現(xiàn)什么原因，模擬器運(yùn)行又沒有問題偎痛。所以當(dāng)你測試真機(jī)的時候出現(xiàn)了莫名其妙的問題時旱捧，你可以看看當(dāng)前版本的微信是否時最新的。
一般在安卓機(jī)測試是比較少問題的踩麦，安卓機(jī)使用的是QQ的內(nèi)核枚赡。而iOS就比較坑了，在不同的機(jī)型上也會有點(diǎn)問題谓谦，目前在布局上贫橙，遇到i5 ?9.0系統(tǒng)出現(xiàn)了布局不規(guī)范，暫時還沒有找到原因反粥。
wx.showToast 提示框
目前微信的showToast都一定會帶著圖片卢肃，假如知道怎么去掉圖片的同學(xué)，請告知一下才顿。
動態(tài)設(shè)置屬性
Flex布局模式
骰子布局
網(wǎng)格布局主要依賴flex屬性
百分比布局
流式布局
代碼在 https://github.com/icindy/wxflex90??
感謝WeAppDev的分享践剂。博客地址 https://weappdev.com/t/flex-wxflex/144/2
閉包概念
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)試中可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應(yīng)的 wxss 屬性德谅，也可以修改對應(yīng) wxss 屬性爹橱，在模擬器中實(shí)時看到修改的情況
Sources panel ：其實(shí)就是拿來斷點(diǎn)的。
Network panel ：可以看到請求的詳細(xì)情況窄做。
App data panel ：可以看到當(dāng)前頁面的實(shí)時數(shù)據(jù)愧驱，也可以實(shí)時修改頁面上的數(shù)據(jù)。
Storage panel ?： 用于顯示當(dāng)前項(xià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掏颊，或者使用? 等等一些小知識點(diǎn)糟红，都是開發(fā)中挺實(shí)用的? 附上網(wǎng)址 https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=20161122
