微信小程序筆記篇

優點

一、無需下載，經過搜索和掃一掃就能夠打開。
二、良好的用戶體驗：打開速度快。
三、開發成本要比App要低。
四、安卓上能夠添加到桌面，與原生App差很少。
五、爲用戶提供良好的安全保障。小程序的發佈：微信擁有一套嚴格的審查流程，不能經過審查的小程序是沒法發佈到線上的。javascript

劣勢

一、限制較多。頁面大小不能超過1M。不能打開超過5個層級的頁面。
二、樣式單一。小程序的部分組件已是成型的了，樣式不能夠修改。例如：幻燈片、導航。
三、推廣面窄，不能分享朋友圈，只能經過分享給朋友，附近小程序推廣。其中附近小程序也受到微信的限制。
四、依託於微信，沒法開發後臺管理功能。css

文件結構

pages文件夾： 書寫各個頁面代碼以及組件。內部js文件書寫js ; wxml文件爲HTML ; wxss文件爲css樣式 ； json文件爲配置當前頁面的默認項，如title等html

utils文件夾： 書寫做用在全局的js共用方法等前端

app.js文件： 全局js配置文件，這裏定義的變量爲全局變量，可在頁面內經過 getApp() 獲取vue

app.json文件： 全局默認配置項，如路由、小程序的狀態欄、導航條、標題、窗口背景色。java

app.wxss文件： 全局css樣式文件web

project.config.json 項目配置文件，用得最多的就是配置是否開啓https校驗；json

index.json (配置當前頁面標題和引入組件等)；小程序

index.wxml (頁面結構)；微信小程序

index.wxss (頁面樣式表)；

index.js (頁面的邏輯，請求和數據處理等)；

移動設備的分辨率與rpx

在小程序中，通常使用iPhone6的設計稿，iPhone6下 1px = 1rpx = 0.5pt

使用rpx，小程序會自動在不一樣的分辨率下進行轉換，簡單理解爲咱們適配屏幕的rem

pt 也稱爲邏輯分辨率，pt的大小和屏幕尺寸有關係，簡單能夠理解爲長度和視覺單位

px 指物理分辨率，和屏幕尺寸沒有關係，表示一個點

一個pt 能夠由1個px構成，也能夠是2個、3個。這個就是移動設備屏幕上的Reader倍數關係，如iPhone六、iPhone5的 @2x ; iPhone6 Plus的 @3x

iPhone6 上的一個pt就由2個px點構成，咱們的設計稿通常是以px值進行設

配置文件

"pages": [//設置頁面的路徑
 "pages/index/index", //不須要寫index.wxml,index.js,index,wxss,框架會自動尋找並整合
"pages/logs/logs" 
],
 "window": { //設置默認窗口的表現形式
"navigationBarBackgroundColor": "#ffffff",//頂部導航欄背景色
 "navigationBarTextStyle": "black",//頂部導航文字的顏色 black/white
 "navigationBarTitleText": "微信接口功能演示", //頂部導航的顯示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh":"false"，//是否支持下拉刷新 ，不支持的話就直接不寫！
"disableScroll":true,// 設置true不能上下滾動，true/false，注意！只能在page.json中有效，沒法在app.json中設置該項。
}, 
"tabBar": { //底部tab或者頂部tab的表現，是個數組，最少配置2個，最多5個
"list": [{//設置tab的屬性，最少2個，最多5個
 "pagePath": "pages/index/index",//點擊底部tab跳轉的路徑
 "text": "首頁",//tab按鈕上的文字
"iconPath":"../img/a.png",//tab圖片的路徑
  "selectedIconPath": "../img/a.png"//tab在當前頁，也就是選中狀態的路徑
 },   { 
"pagePath": "pages/logs/logs",
 "text": "日誌"
 }] ，
"color":"red",//tab的字體顏色
    "selectedColor":"#673ab7",//當前頁tab的顏色，也就是選中頁的
    "backgroundColor":"#2196f3",//tab的背景色
    "borderStyle":"white",//邊框的顏色 black/white
    "position":"bottom"//tab處於窗口的位置 top/bottom
},
 "networkTimeout": {//默認都是60000秒一分鐘
 "request": 10000,//請求網絡超時時間10000秒
 "downloadFile": 10000，//連接服務器超時時間10000秒
"uploadFile":"10000",//上傳圖片10000秒
"downloadFile":"10000"//下載圖片超時時間10000秒
 }, 
"debug": true//項目上線後，建議關閉此項，或者不寫此項
}

小程序的雙向綁定和vue哪裏不同？

小程序直接this.data的屬性是不能夠同步到視圖的，必須調用：

this.setData({
	noBind:true
})

wxml與標準的html的異同

都是用來描述頁面的結構；
都由標籤、屬性等構成；
標籤名字不同，且小程序標籤更少，單一標籤更多；
多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
WXML僅能在微信小程序開發者工具中預覽，而HTML能夠在瀏覽器內預覽
組件封裝不一樣， WXML對組件進行了從新封裝，
小程序運行在JS Core內，沒有DOM樹和window對象，小程序中沒法使用window對象和document對象。

小程序的生命週期函數

onLoad() 頁面加載時觸發，只會調用一次，可獲取當前頁面路徑中的參數。
onShow() 頁面顯示/切入前臺時觸發，通常用來發送數據請求；
onReady() 頁面初次渲染完成時觸發, 只會調用一次，表明頁面已可和視圖層進行交互。
onHide() 頁面隱藏/切入後臺時觸發, 如底部 tab 切換到其餘頁面或小程序切入後臺等。
onUnload() 頁面卸載時觸發，如redirectTo或navigateBack到其餘頁面時。

怎麼封裝微信小程序的數據請求的

1.在根目錄下建立utils目錄及api.js文件和apiConfig.js文件；
2.在apiConfig.js 封裝基礎的get, post 和 put， upload等請求方法，設置請求體，帶上token和異常處理等；
3.在api中引入apiConfig.js封裝好的請求方法，根據頁面數據請求的urls, 設置對應的方法並導出；
4.在具體的頁面中導入；

使用哪些方法，來提升微信小程序的應用速度

一、提升頁面加載速度
二、用戶行爲預測
三、減小默認data的大小
四、組件化方案

小程序調用後臺接口遇到哪些問題

1.數據的大小有限制，超過範圍會直接致使整個小程序崩潰，除非重啓小程序； 2.小程序不能夠直接渲染文章內容頁這類型的html文本內容，若需顯示要藉助插件，但插件渲染會致使頁面加載變慢，因此最好在後臺對文章內容的html進行過濾，後臺直接處理批量替換p標籤div標籤爲view標籤，而後其它的標籤讓插件來作，減輕前端的時間。