開發改圖助手 小程式過程中遇到的問題,解決方法,和具體開發流程
小程式開發流程
需求確認
確認需求的時候注意微信的一些限制條件。這裡列出來我遇到的點。
包的總大小不超過1m
頁面總數不超過5張
存在編輯器和真機部分api效果不同 (例如:canvasToTempFilePath編輯器不能執行)
只有新增appid後才能有預覽功能 並進行真機除錯。但此時所有請求必須為配置好的第三方伺服器。
前端腳手架確定
選擇腳手架原因
微信小程式自帶的編輯器 (不支援熱更新 配置檔案不支援註釋 沒有程式碼壓縮。。。。等等)
腳手架介紹
整合了
Redux
,資料管理更方便開發過程中,使用
xml
取代wxml
,對開發工具更友好開發過程中,使用
less
取代wxss
,功能更強大引入
es-promise
,以便可以建立並使用Promise
新增
promisify
工具函式,可以便捷的將官方Api
轉換成Pormise
模式引入
normalizr
,可以將資料扁平化,更方便進行資料管理引入
babel
自動進行ES2015
特性轉換對wxml/wxss/js/img壓縮,相對開發者工具提供的壓縮,會減小一丟丟體積。
建議學習redux
所有state都以物件樹形式儲存在一個單一的store裡面
唯一可改變state是用action,描述發生了什麼。
描述action如何改變state 需編寫reducers
你應該把要做的修改變成一個普通物件,這個物件被叫做 action,而不是直接修改 state。然後編寫專門的函式來決定每個 action 如何改變應用的 state,這個函式被叫做 reducer。
開發小程式
問題記錄
移動端適配問題
採用小程式rpx單位直接按照設計圖來就可以 相當於升級版rem
主題色 標題欄顏色配置
在app.json可以配置
canvas畫圖不能使用網路資源與base64,只能用本地檔案
使用自帶api儲存成本地臨時檔案 再進行生產渲染
樣式切換
1)可以直接繫結一個變數的 class 或者style 2)用wx:if wx:else
部分生成資料夾缺失
注意下編譯資訊有無報錯
放在本地伺服器 再用小程式開啟 閃退
目前原因不定 只能先放到本地