用 wepy 作完一個小程序，總結一下遇到的一些小程序和 wepy 的問題和解決

前言

距離開始寫小程序已通過了一個半月了，項目也差很少寫完了。當時選擇的是 wepy 框架，我使用的wepy版本是 1.7.1，如下是我開發時遇到的一些問題。

一

background 圖片不能用本地圖片，能夠把圖片上傳至CND，再使用，並且也有助於減小包體積。不過在開發者工具裏是能用本地圖片的~

二

wepy 使用 pug 作 html 預編譯，在用 wx:if 作條件渲染時，不能使用 < 或 > 作判斷，會解析錯誤。點擊查看相關Issues

三

我有一次出現 wepy 編譯完以後，一個組件每一個屬性開頭都會少一個字母，致使沒法給子組件傳數據，以下

解決辦法：說出來你可能不信。把每個的屬性排列順序調換一下就能夠了。好比，本來我是這些寫屬性

wxc-card(
    title="{{ refundInfo.orderItem.item_name }}"
    desc="{{ refundInfo.orderItem.sku_props_str }}"
    num="{{ refundInfo.orderItem.quantity }}"
    price="{{ filter.yuan(refundInfo.orderItem.price, '') }}"
    thumb="{{ refundInfo.orderItem.pic_url }}"
)

只要我把全部屬性的順序都打亂一次，從新排列。就編譯成功了。至於爲何，我也不知道~

wxc-card(
    num="{{ refundInfo.orderItem.quantity }}"
    thumb="{{ refundInfo.orderItem.pic_url }}"
    price="{{ filter.yuan(refundInfo.orderItem.price, '') }}"
    desc="{{ refundInfo.orderItem.sku_props_str }}"
    title="{{ refundInfo.orderItem.item_name }}"
)

四

用 wepy 編譯組件的 .sync 同步傳值時，不能用對象，以下

component( :title.sync="obj.title" )

解決辦法：
就是用 computed 定義一個變量，return obj.title， 或者直接在data下定義一個變量，這樣也只要傳一層，反正就是不能用 . 操做符。例如

component( :title.sync="title" )

<script>
...略

computed = {
    title() {
        return obj.title
    }
}
</script>

點擊查看相關 Issues

五

相關報錯截圖與代碼

我最後解決的代碼

還有一次也是這個報錯可是還有一種解決方法，就是直接修改你要修改的對象，而不是一個屬性一個屬性的去修改。好比

// 原本是一個個修改的, 這種狀況下也出現了上述報錯
this.obj.title = "xxx"
this.obj.obj= {}
this.obj.array = []
this.$apply()
// 最後直接修改 obj，也是不報錯了
this.obj = { 
    title: 'xxx',
    obj: {},
    array: []
}
this.$apply()

因爲不是很瞭解 wepy 的源碼和小程序的報錯緣由，因此具體緣由不是很清楚。

查看小程序社區報錯有關的討論：Expect END descriptor with depth 0， Expect FLOW_CREATE_NODE

六

wepy 執行 npm run build js未壓縮，提示 [WARNING] 找不到插件：wepy-plugin-uglifyjs。，而後會自動下載插件，再 build。結果仍是未壓縮。

解決方法：手動下載 npm i wepy-plugin-uglifyjs wepy-plugin-imagemin -D便可。

由於 wepy.config.js 裏配置了壓縮，可是模板內的 package.json 沒有這兩個插件的配置項。不過 imagemin 的配置能夠刪除，由於你最好把圖片都放到線上了，因此應該用不上圖片壓縮，wepy-plugin-imagemin 也能夠不用裝。可是不刪除的話，仍是要裝 wepy-plugin-imagemin 插件才行。

相關ISSUS

七

若是你決定使用 pug 來作 html 的預編譯的話，要記住，若是出現語法錯誤的狀況下，會致使啓動的服務崩潰，須要從新啓動 npm run dev。若是出現頁面不更新的狀況，就立刻去看命令行的報錯信息吧~

八

在一個 display：flex 的元素內，子元素設置絕對定位。 在開發者工具裏，子元素會受 align-items 等影響定位，安卓手機也是。可是在 Iphone 裏絕對定位子元素不受影響，因此最好設置 top 值和 left 值。

九

使用 wepy 編譯組件時，不要在 repeat 循環的組件裏寫 computed 和 watch，會致使列表全部須要的計算數據，只使用第一個的計算屬性裏的數據。

十

用 scroll-view 若是要橫向滾動的話，除了要設置 scroll-x 屬性，還要設置 white-space: nowrap; 的樣式，子元素設置 display: inline-block

十一

若是你用了一個定時器，在退出頁面的時候要記得清除，否則這個定時器還會一直執行。

十二

一切的結果以真機爲準，開發者工具不必定能完美模擬真機，有時候仍是會出現佈局的問題。