好久沒有寫代碼了皮壁，今天自己開發(fā)了一個(gè)快遞查詢的微信小程序，把自己心得記錄下來方便以后鞏固哪审。ps蛾魄，小程序?qū)W的太晚了，人家去年好多都會(huì)了湿滓，我那時(shí)在干啥滴须。。
1叽奥、學(xué)習(xí)腦圖和思路：
2扔水、學(xué)習(xí)資源：
A、微信小程序官方文檔：https://mp.weixin.qq.com/debug/wxadocs
B朝氓、視頻教程：
http://m.bilibili.com/video/av9085879.html?from=singlemessage#page=8
C铭污、案例，Demo
3膀篮、學(xué)習(xí)腦圖中的一些需要詳細(xì)了解的地方：
A、小程序?qū)崿F(xiàn)原理和程序架構(gòu)：
見這篇?文章：寫的很詳細(xì)岂膳。
還有這篇
B誓竿、Flex布局和相對(duì)絕對(duì)定位
包括了解容器元素、屬性及屬性值谈截、屬性應(yīng)用場(chǎng)景筷屡。
Flex布局：其中有display,主軸和交叉軸，flex-direction排列方向簸喂，flex-wrap是否換行毙死，justify-content元素在主軸上的對(duì)其方式，align-items在交叉軸的對(duì)其方式喻鳄，align-self元素自身的對(duì)其方式扼倘，order定義元素的排列順序，flex-grow當(dāng)有多余空間時(shí)該元素放大比列除呵，flex-shrink當(dāng)空間不足時(shí)放大縮小比列再菊，flex-basis元素在主軸上占據(jù)的空間。
相對(duì)和絕對(duì)定位：相對(duì)定位是和自身來比較颜曾，絕對(duì)定位是和離他最近的已經(jīng)設(shè)置定位的上級(jí)元素比纠拔。
C、視圖層要熟悉有哪些組件泛豪，組件對(duì)應(yīng)屬性稠诲，組件對(duì)應(yīng)事件：
1）視圖容器：View侦鹏，scroll-view含滾動(dòng)條的視圖，swipe幻燈片臀叙，畫布canvas略水；
var context = wx.createContext()
? ?context.setStrokeStyle("#00ff00")
? ?context.setLineWidth(5)
? ?context.rect(0, 0, 200, 200)
? ?context.stroke()
? ?context.setStrokeStyle("#ff0000")
? ?context.setLineWidth(2)
? ?context.moveTo(160, 100)
context.stroke()
? ?// 調(diào)用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制匹耕，通過 actions 指定繪制行為
? ?wx.drawCanvas({canvasId: 'firstCanvas',actions: context.getActions() // 獲取繪圖動(dòng)作數(shù)組})}
2）自定義組件和表單組件：自定義有icon,text,process,navigator：url聚请；表單組件有l(wèi)abel：for,picker:range和value,picker-view,slider:,switch等；
3）媒體組件：audio:src,image:src,video:src稳其；
4）地圖：map 驶赏，markers，longitude既鞠，latitude煤傍，scale，markers嘱蛋。
5）操作反饋小工具：action-sheet從底部彈出來,modal確認(rèn)框,toast會(huì)自動(dòng)消失,loading加載
6）組件數(shù)據(jù)綁定蚯姆，組件數(shù)據(jù)內(nèi)容展示（變量，if洒敏，for）龄恋，組件事件綁定，引用凶伙，尺寸郭毕。引用案例如下：
<include src="../templates/header" />或
<import src="../templates/footer" />
<template is="footer2" />
D、邏輯層要熟悉的內(nèi)容有：
1）組件數(shù)據(jù)怎么賦值：data及this.setdata（{x:y}）方法函荣。
2）組件事件怎么處理：各個(gè)組件對(duì)應(yīng)的常用事件要熟悉掌握显押，如：bindtap，bindchange（復(fù)選框傻挂，單選框乘碑，日期選擇器，滑動(dòng)選擇器,交互反饋小工具）金拒，bindsubmit兽肤，bindreset，bindinput殖蚕，bindfocus轿衔，bindblur，bindconfirm睦疫，bindplay播放時(shí)害驹，bindpause暫停時(shí)，bindended結(jié)束時(shí)蛤育，bindload加載完畢時(shí)宛官，bindmarkertap點(diǎn)擊地圖標(biāo)記時(shí)觸發(fā)葫松，bindcontroltap點(diǎn)擊地圖時(shí)觸發(fā)，bindtouchstart手指觸摸動(dòng)作開始底洗，bindtouchmove手指觸摸后移動(dòng)腋么，bindtouchend手指觸摸動(dòng)作結(jié)束，bindtouchcancel手指觸摸動(dòng)作被打斷如來電亥揖，bindViewTap珊擂。
另外，注意的是組件事件區(qū)分冒泡和非冒泡费变，基本事件如下：
事件對(duì)象屬性有：
3）組件之間數(shù)據(jù)怎么傳輸摧扇。
4）頁面與頁面之間數(shù)據(jù)怎么傳輸（在navigateto方法里？后傳參數(shù)）挚歧。
5）網(wǎng)絡(luò)怎么傳輸（和服務(wù)器扛稽，包括web socket等）：
向服務(wù)器發(fā)起請(qǐng)求：wx.request({
?url: 'http://baidu/com', ? data: {x: '' , y: '' //請(qǐng)求參數(shù)},header: { ?'content-type': 'application/json'},success: function(res) { console.log(res.data) }})；
6）web socket：連接滑负，發(fā)送消息在张，收到消息，關(guān)閉連接矮慕。服務(wù)器代碼部分如下：
@ServerEndPoint(value="/websocket/{user}")定義路徑
public class MyWebSocketServlet{
? ?private Session session;
@OnOpen接收消息
public void open(Session session,@PathParam(value="user")String user){
this.session=session;
.........}
@OnMessage發(fā)送消息
public void inMessage(String msg){this.session.....;var t=message;....
try{session.getBasicRemote().sendText('msg') catch(Exception e){e.....}}
}
}
客戶端代碼部分：開啟連接,發(fā)送消息帮匾，收到消息，關(guān)閉連接
開啟連接wx.connection(){url:"www.baidu.com",data:{},methed:'GET',success:function(){},fail:functon(){},complete(){}}
發(fā)送消息：wx.sendSocketMessage(){data:'您好',sucess:function(){},fail:function(){},complete(){}}
收到消息：wx.onSocketMessage(function(res){var msg=this.date.testStr msg.push(res.data) ? this.setData({testStr:msg})})
關(guān)閉連接：wx.closeSocket()
? ?
7）數(shù)據(jù)緩存（讀取痴鳄，保存辟狈，刪除，數(shù)據(jù)異步操作）夏跷。
獲取和保存數(shù)據(jù)：var logs=wx.getStorageSync('logs')[][] ? logs.unshift(Date.now()) ? wx.setStoreSync('logs',logs)
刪除數(shù)據(jù)：wx.removeStoreage({key:'',success:function(){'key:'',success:function(res)(),fail:function(){},complete:function(){}}})
數(shù)據(jù)異步：wx.setStorage({key:"",data:"",success:function(res){},fail:function(){},complete:function(){}}) ? wx.getStorage({key:"String",success:function(res){}})
8）媒體及其他文件怎么傳輸：
客戶端代碼部分：
wx.chooseImage({
?success: function(res) {
? ?var tempFilePaths = res.tempFilePaths
? ?wx.uploadFile({
url: 'http://localost:8080/iprest/test', //僅為示例，非真實(shí)的接口地址
? ? ?filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test'},
? ? ?success: function(res){
? ? ? ?var data = res.data} })}})
如果是上傳圖片呢明未？客戶端上傳圖片代碼又是怎么樣
wx.chooseImage({
?count:1,//選擇第一張圖片
?sizeType:['ariginal','compressed'],
? sourceTpe:['album','camera'],
?success: function(res) {
? ?var tempFilePaths = res.tempFilePaths
? ?wx.uploadFile({
url: 'http://localost:8080/iprest/test', //僅為示例槽华，非真實(shí)的接口地址
? ? ?filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test'},
? ? ?success: function(res){
? ? ? ?var tempPath = res.tempFilePaths ?this.setData({imgUrl:tempPath})} })}})
保存下載音頻或圖片wx.downloadFile({
?url: 'http://example.com/audio/123.jpg',
?success: function(res) {wx.playVoice({filePath: res.tempFilePath }) }})
服務(wù)器端代碼部分：收到上傳的文件。
E趟妥、其他語法點(diǎn)必記：
返回：wx.navigateback({delta:1,success:function(res){},fail...,complete..}).
設(shè)置導(dǎo)航文本：.setNavigationBarTitle
頁面加載時(shí)猫态，加載完，展示時(shí)事件：onload和onready,onSHow
登錄：wx.login()
打電話;wx.makePhoneCall
獲取網(wǎng)絡(luò)類型：wx.getNetworkType披摄，如wifi亲雪，4G等，如果網(wǎng)絡(luò)正常就success疚膊。
? ? ? ? ? ? wx.getNetworkType({success.function(res){var t=tes.networkTpye}})
獲取設(shè)備信息：wx.getSystemInfo(){success义辕；function(res){resmodel,res.pixelRatio,res.windoeWidth,rex.windowHeight,rex.language,res.version}}
交互反饋工具事件監(jiān)聽：wx.showModal和wx.showActionSheet，wx.showToast寓盗。
? ? ? ? ? ? 如wx.showToast({title:'加載中灌砖，icon:"成功",duration:1000})
? ? ? ? ? ? ? ? setTimeout({function(){wx.hideToase(),1000}});
地圖獲取地理位置和查看位置：wx.getLocationres.latitude和longitude,wx.openLocation璧函。
wx.getLocation({type:"wgs84",success:function(res){var latitude=res.lastitude ? var lagitude=res.longitude ? wx.openlocation({latitude:latitude,longitude:longitude,sacle:28})}})
F、實(shí)戰(zhàn)：
產(chǎn)品設(shè)計(jì)--》框架搭建基显，配置-》界面設(shè)計(jì)和開發(fā)-》API設(shè)計(jì)和開發(fā)-》部署上線
G蘸吓、數(shù)據(jù)統(tǒng)計(jì)：
用戶分析，圖文分析撩幽，菜單分析颇玷，消息分析，接口分析误甚，網(wǎng)頁分析瞧预。
有時(shí)間要做一個(gè)公益產(chǎn)品，做一點(diǎn)小小貢獻(xiàn)酱虎。
