微信小程序入門開發及問題整理

開發改圖助手 小程序過程當中遇到的問題，解決方法，和具體開發流程

小程序開發流程

需求確認

確認需求的時候注意微信的一些限制條件。這裏列出來我遇到的點。

• 包的總大小不超過1m

• 頁面總數不超過5張

• 存在編輯器和真機部分api效果不一樣 （例如：canvasToTempFilePath編輯器不能執行）

• 只有添加appid後纔能有預覽功能 並進行真機調試。但此時全部請求必須爲配置好的第三方服務器。

前端腳手架肯定

選擇腳手架緣由

• 微信小程序自帶的編輯器 （不支持熱更新 配置文件不支持註釋 沒有代碼壓縮。。。。等等）

腳手架介紹

• 集成了Redux，數據管理更方便

• 開發過程當中，使用xml取代wxml，對開發工具更友好

• 開發過程當中，使用less取代wxss，功能更強大

• 引入es-promise，以即可以建立並使用Promise

• 添加promisify工具函數，能夠便捷的將官方Api轉換成Pormise模式

• 引入normalizr，能夠將數據扁平化，更方便進行數據管理

• 引入babel自動進行ES2015特性轉換

• 對wxml/wxss/js/img壓縮，相對開發者工具提供的壓縮，會減少一丟丟體積。

這裏主要是用的一個現成的腳手架

建議學習redux

1. 全部state都以對象樹形式存儲在一個單一的store裏面

2. 惟一可改變state是用action,描述發生了什麼。

3. 描述action如何改變state 需編寫reducers

你應該把要作的修改變成一個普通對象，這個對象被叫作 action，而不是直接修改 state。而後編寫專門的函數來決定每一個 action 如何改變應用的 state，這個函數被叫作 reducer。

開發小程序

官方文檔參上：https://mp.weixin.qq.com/debu...

問題記錄

• 移動端適配問題

採用小程序rpx單位直接按照設計圖來就能夠 至關於升級版rem

• 主題色 標題欄顏色配置

在app.json能夠配置

• canvas畫圖不能使用網絡資源與base64,只能用本地文件

使用自帶api存儲成本地臨時文件 再進行生產渲染

• 樣式切換

1)能夠直接綁定一個變量的 class 或者style 2)用wx:if wx:else

• 部分生成文件夾缺失

注意下編譯信息有無報錯

• 放在本地服務器 再用小程序打開 閃退

目前緣由不定 只能先放到本地

webpack的中文文檔