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