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

sunsmell發表於2017-06-20

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

小程式開發流程

需求確認

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

  • 包的總大小不超過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的中文文件

相關文章