2020年微信小程序開發(fā)中遇到的一些坑

1,快速建立小程序文件夾文件(js/json/wxml/wxss)

一開始在編輯器上右鍵,一個一個建這4個文件;

后來,選擇在硬盤打開,直接拷貝其他文件夾,然后改名;

直到某天網(wǎng)上無意發(fā)現(xiàn)一篇文章,原來你可以在app.json中使用一行代碼添加4個文件。

如圖:只要在app.json的pages里面添加一行新的路徑,開發(fā)者工具就會自動創(chuàng)建該路徑以及配套的4個文件(js里還貼心準(zhǔn)備各種事件響應(yīng)代碼)

就是這么神奇!對我這種新手來說,太方便了!

PS:當(dāng)時網(wǎng)上發(fā)現(xiàn)的那篇文章地址?http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1656

2,小程序頁面不能分享

打開小程序,發(fā)現(xiàn)點(diǎn)右上角的功能鍵(3個點(diǎn))后,底部提示“當(dāng)前頁面不可轉(zhuǎn)發(fā)”。

我一度以為是小程序首頁(index)不支持分享轉(zhuǎn)發(fā),直到不小心在js里添加了下面這行事件代碼:

/** * 用戶點(diǎn)擊右上角分享 */

onShareAppMessage: function () {

}

原來js里是要有分享事件才能出現(xiàn)轉(zhuǎn)發(fā)!我自己之前各種改代碼,js里沒了分享事件,所以頁面就不能分享轉(zhuǎn)發(fā)了。

PS:這個事件里還可以設(shè)置轉(zhuǎn)發(fā)的頁面名稱、圖片、URL參數(shù)等。

3,設(shè)置小程序頂部選項卡(TAB)

很多微信小程序頂部都是好幾個選項卡,可以點(diǎn)擊切換,這個實現(xiàn)起來也很容易。

在app.json中,直接添加下面這行代碼即可。

"tabBar": {

? ? "color": "black",

? ? "borderStyle": "white",

? ? "selectedColor": "rgb(176,170,168)",

? ? "backgroundColor": "white",

? ? "list": [

? ? ? {

? ? ? ? "pagePath": "pages/index/index",

? ? ? ? "text": "底部TAB1",

? ? ? ? "iconPath": "images/tabBar/tab1_unsel.png",

? ? ? ? "selectedIconPath": "images/tabBar/tab1_sel.png"

? ? ? },

? ? ? {

? ? ? ? "pagePath": "pages/usercenter/usercenter",

? ? ? ? "text": "底部TAB2",

? ? ? ? "iconPath": "images/tabBar/tab2_unsel.png",

? ? ? ? "selectedIconPath": "images/tabBar/tab2_sel.png"

? ? ? }

? ? ]

? },

可以很方便設(shè)置底部選項卡的顏色、邊框、ICON圖標(biāo)(選擇前&選擇后)、名稱、跳轉(zhuǎn)路徑(需要在pages集合中已添加的路徑)等。

4,為什么代碼里一些地方要用that.setData({})而不是this.setData({})

首先that是需要提前定義的一個變量名,你也可以叫別的。

this在一些地方,代表的含義是不同的,舉例如下:

/**

? * 生命周期函數(shù)--監(jiān)聽頁面加載

? */

? onLoad: function (options) {

? ? let that = this;

? ? wx.request({

? ? ? url: "https://你的后端域名/api/get_xxx",

? ? ? header: {

? ? ? ? "Content-Type": "application/json"

? ? ? },

? ? ? success: function (res) {

? ? ? ? //this.setData({})? 此時不能用this設(shè)置整個page頁面的data值,因為此時this的上下文作用域是里層事件,不再是page頁。

? ? ? ? that.setData({

? ? ? ? ? num1: res.code //隨便的一個頁面data定義

? ? ? ? });

? ? ? }

? ? });

},

也就是說,主要是因為作用域的變化,在里層事件里,this已不能獲取整個page的data信息,所以才在外層事件的開始給起個別名,以便后面調(diào)用設(shè)置page頁面的data數(shù)據(jù)等。

5,在js里獲取wxml頁面textarea控件的輸入值

比如說下面的textarea,綁定了一個input輸入事件,方法名字叫searche_txt,

<textarea bindinput='search_txt' focus='{{true}}' value="{{from_content}}" placeholder="輸入文字" style="height: 7.3em" />

在js代碼中,增加這個方法:

search_txt: function (res) {

? ? this.setData({

? ? ? search_content: res.detail.value,

? ? })

? },

這樣就能實現(xiàn)在page頁面的data中一直更新存儲頁面輸入框的值,在和接口交互時,可以直接使用page頁面的data值,不用再考慮前端控件輸入值的取得。

放上示例小程序供參考。


工具類小程序示例

TODO 暫時先寫到這里,會陸續(xù)添加。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容