Wepy-小程序踩坑記

tinna 發布于2019-08-22 15:34 / 2338人閱讀

摘要：引言用過原生開發的小程序也知道除了其他功能性的內容并不多對于需要做大型項目來說是比較難入手的，因此朋友推薦的我就入坑鳥。。。開發還是和部分有出入，因此如下記錄，入手的教程就不發了只發踩坑。

引言

用過原生開發的小程序也知道除了api 其他功能性的內容并不多對于需要做大型項目來說是比較難入手的，因此朋友推薦的wepy我就入坑鳥。。。
這么一個跟vue的開發方式類似的框架，不過說起來跟vue類似，但是用起來還真不是那么簡單。api開發還是和部分vue有出入，因此如下記錄，入手的教程就不發了只發踩坑。

官方文檔

小程序的官方文檔
wepy官方文檔

下面是已經踩過的坑

wepy 問題查找

https://github.com/Tencent/we...
比較建議在這里查找下遇到的問題之后在提問畢竟這里都是收集比較齊全

標簽中的指令簡寫

跟Vue類似

對于動態賦值的屬性可以使用 :attr="value" 的方式

對于綁定事件可以使用@click="fn"的方式

data使用注意點

對于視圖中需要用到的數據，應該事先在data中定義一下，哪怕此時沒有數據，也應該定義一個空值

WePY中的methods的使用

只能聲明頁面的bind、catch事件，不能聲明自定義方法

自定義方法應該跟methods平級

this 運用

小程序里修改data 里面的屬性或者賦值都需要利用this.setdata()而wepy 基本就是利用this.屬性即可。如果是異步返回或者更新dom需要this.$apply()觸發臟值檢測

頁面跳轉

navigateTo() 和 redirectTo() 的差別。

navigateTo()保留當前頁面，跳轉到應用內的某個頁面(即：顯示頂部導航欄左上角返回按鈕，可以有返回路徑）
redirectTo()關閉當前頁面，跳轉到應用內的某個頁面（即：不顯示左上角返回按鈕，如需要返回在頁面內自己添加按鈕寫路徑或者利用wx.navigateBack()和 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

簡單來說如果你需要tabbar有返回就用navigateTo，不需要就用redirectTo

只能用 switchTab() 跳轉到 tabbar 頁面

文件上傳

上傳文件沒有傳統html中的文件域()，要想上傳文件只能使用API： uploadFile()

更新DOM$apply

如果需要更新DOM，應該在隨后調用組件實例的$apply方法，才能更新到頁面中

this.name="abc";
this.$apply()

PS：對于性能要求較高的應用，不要頻繁的調用$apply()更新DOM，可以根據實際情況更新父組件向子組件傳遞數據，通過props的方式傳遞

如果需要傳遞動態數據，加上.sync的修飾符就可以解決（:prop.snyc="item"）

如果需要子組件數據同步到父組件，需要在定義props的時候設置twoWay:true

(所有異步數據傳遞必須用$apply，同步的話才能使用.sync)

mixin

wepy的mixin，與vue中的mixin執行順序相反

wepy中，會先執行組件自身的，再執行mixin中的

vue中對于鉤子函數，會先執行mixin中的，再執行組件自身的；vue中methods如果和mixin同名，那么只會執行自身的方法

關于canvas和base64

小程序中可以進行canvas相關操作，但是跟純html中的canvas有所不同（api差異），canvas的使用都應該參照：小程序中的canvas

arrayBuffer和base64互轉

本段內容在文檔中是搜索不到的，但是確實是支持的，使用如下2種方式：

wx.arrayBufferToBase64(arrayBuffer)
wx.base64ToArrayBuffer(base64)

命名規范

小程序內部定義的實例API都以$開頭，所以我們在定義實例屬性、方法的時候不能以$開頭，以便區分

同名組件共享同一實例及數據

循環渲染組件時，容易出現組件數據相互污染。可以用最外層的組件監聽事件冒泡以修改數據，同時觸發事件的組件用setTimeout包裹，保證執行順序。

循環渲染組件：

wepy的循環渲染組件，必須使用標簽，或者微信官方的標簽(這兩個標簽都是不會渲染到dom的）否則就不會渲染成功。

組件component 沒有 onLoad 等頁面事件

頁面中設置好 this.$broadcast("someEvent", option);

組件監聽事件則可以解決

page

頁面類，繼承自wepy.component，擁有頁面所有的屬性與方法。
全部屬性繼承自wepy.component。而wepy.component沒有onLoad 等方法

未完待續-----------------

云服務器 GPU云服務器踩坑記 wepy 小程序小程序小程序附近小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93546.html

小程序初踩坑

摘要：寫在前面一直有在關注小程序，也做過一些，不過一直沒上正式項目，剛好這次公司有小程序的項目就入坑了。是美團剛出的小程序框架，也很不錯，可以直接用的寫法去進行開發，學習成本較低，缺點是剛推出，雖然美團內部有在使用，不過社區還沒起來。寫在前面一直有在關注小程序，也做過一些demo，不過一直沒上正式項目，剛好這次公司有小程序的項目就入坑了。項目開發完，記錄一下遇到的一些坑吧。框架選用框...

RyanHoo 2019-08-26 11:53 評論0 收藏0
微信小程序海報生成踩坑記

摘要：最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。剛開始的思路是這樣的：后臺根據小程序傳過來的參數獲取對應的小程序碼，然后與背景圖合成之后將base64格式的圖片傳給小程...

lidashuang 2019-07-01 10:45 評論0 收藏0
wepy框架開發小程序文檔

摘要：目錄項目構建文件使用優化之處組件通信的使用注意事項報錯記錄踩坑記錄項目構建官方文檔地址鏈接項目源碼地址鏈接項目資料地址鏈接簡單介紹是一個微信小程序框架，支持模塊化開發，開發風格類似。使用的方式請求小程序原生都將化。目錄 wepy項目構建 wepy文件使用 wepy優化之處 wepy組件通信 wepy的API使用 wepy注意事項 wepy報錯記錄 wepy踩坑記錄 1. wep...

Luosunce 2019-08-23 12:27 評論0 收藏0
Notadd 2.0 全新 Node.js 版本～（開發中） [從 PHP 到 node 的踩坑記

摘要：有著最全的協議支持，同時有各種非阻塞拓展，可以說是最符合要求的，但是異步需要對做很大的改動。的計劃將基于開發，同時也提供一些無法提供的功能和特性。一點小遺憾對于 Notadd 我們本來期望它實現更多... 盡管我們也嘗試做了很多努力，但是由于 PHP 本身的局限，以及考慮到開發環境配置的復雜程度，最終使用了折中方案。接下來，我們談談整個技術選型歷程，也供今后相關開發者做借鑒和參考：...

Tonny 2019-06-28 14:31 評論0 收藏0