相關(guān)資源
官方文檔蛋铆,一定要讀!(API 部分留意底部的 Bug & Tip)
微信公眾平臺 | 小程序小程序示例
微信小程序搜索 “小程序示例”蜕青,查看官方提供的組件及接口示例再来。-
微信訂閱號:知曉程序 (微信號:zxcx0101)
發(fā)布各種小程序相關(guān)資訊,更新頻率高挠他。
-
小程序商店:minapp.com
顧名思義拢军,小程序應(yīng)用商店结执±校可以多看多用,看看小程序都能實現(xiàn)什么神奇的功能。
-
《微信小程序入門指南》
小程序電子書,已在多看閱讀每强、微信讀書辨绊、QQ 閱讀默蚌、亞馬遜上架。有空可以過一遍绣硝。
以下兩個論壇基本可以覆蓋大部分問題:
微信公眾平臺 | 開發(fā)者社區(qū)
微信小程序聯(lián)盟
常用代碼
1. 關(guān)于引入
樣式導(dǎo)入
引入 css:
@import "../templates/list-item/list-item.wxss";
WXML 提供兩種文件引用方式 import 和 include
引入 wxml template:
<import src="../templates/share/share.wxml" />
拷貝 wxml:
<include src="../templates/share/share.wxml" />
2. 方法如何傳參數(shù)
沒法直接傳參數(shù),都要通過 dataset 獲取,代碼示例如下:
wxml:
<view class="delete" data-id="{{id}}" catchtap="deleteItem">刪除</view>
js:
deleteItem: function(e){
var id = e.currentTarget.dataset.id;
......
}
3. 修改數(shù)組對象的某個元素的屬性
var param = {};
var string = "list[" + index + "].text";
param[string] = 'changed data';
this.setData(param);
微信小程序 setData 的坑
setData的靈活應(yīng)用
(愚蠢的)錯誤
1. 微信的某個固定方法未生效
問題:
在某個頁面的 js 中定義 onShareAppMessage 函數(shù),設(shè)置該頁面的轉(zhuǎn)發(fā)信息,但是設(shè)置的屬性卻沒有生效财边。
原因:
初始化頁面時微信開發(fā)者工具會自己將部分生命周期及其他方法(包括 onShareAppMessage 函數(shù))定義在頁面里紧索,我自己在代碼前面又重新定義了 onShareAppMessage 函數(shù),導(dǎo)致該函數(shù)被后面的空函數(shù)覆蓋冈敛,因此設(shè)置的屬性方法等未生效。
解決:
刪除空函數(shù)集侯。
引以為戒汹碱,不要犯類似的愚蠢錯誤。
2. navigateTo 跳轉(zhuǎn)失敗
問題:
報錯:navigateTo:fail url "" is not in app.json
解決:
檢查下頁面是否已經(jīng)在 app.json
的 pages
屬性下注冊了轴术。
或者該頁面的 js 文件是否已經(jīng)定義了 page 方法:Page({})
,
或者 json 文件中是否為空(不能為空,至少要有 {}
)。
問題:
點擊按鈕觸發(fā) wx.navigateTo
方法笙瑟,但沒有任何反應(yīng)秉宿。
解決:
wx.navigateTo
方法不能跳轉(zhuǎn)到存在 tabBar 的頁面忱叭,即那些已經(jīng)在 app.json
的 tabBar
字段下定義的頁面。
要想跳轉(zhuǎn)到 tabBar 頁面铲掐,可以使用 wx.switchTab
携栋。
真機測試
1. 模仿微信消息的左滑刪除功能效果不佳
問題:
小程序:模仿微信左滑動,出現(xiàn)標為未讀和刪除按鈕,好不容易實現(xiàn)的功能奸攻,在真機上測試時卻發(fā)現(xiàn)動畫效果很差,滑塊同滑塊中的文字會以不同的速率移動表牢,很奇怪崔兴。
解決:
只能改成點擊出現(xiàn)操作菜單的方式了位谋,提供一個按鈕,點擊就使用 wx.showActionSheet
顯示操作菜單陶缺。
2. tabBar 圖標 81px*81px 顯大
問題:
配置 tabBar 的 iconPath 時泥畅,官方說明為:圖片路徑有决,icon 大小限制為40kb闸拿,建議尺寸為 81px * 81px,當(dāng) postion 為 top 時书幕,此參數(shù)無效新荤。
我理所當(dāng)然讓 UI 制作了該尺寸的 icon,在開發(fā)者工具上查看時效果還行台汇,但在真機上調(diào)試時卻發(fā)現(xiàn)圖標過大苛骨,不好看。
解決:
最后 UI 將實際 icon 大小調(diào)為 62px62px苟呐,加上空白區(qū)域仍舊導(dǎo)出 81px81px 的圖片給我痒芝。
3. 顯示用戶默認頭像
問題:
一般小程序都會獲取用戶的基本信息如昵稱和頭像,但同時也要考慮到用戶拒絕授權(quán)的情況(wx.getUserInfo 接口需要用戶授權(quán)牵素,請兼容用戶拒絕授權(quán)的場景)严衬,如果拒絕,原本應(yīng)該顯示頭像區(qū)域的地方可以顯示一個默認的頭像笆呆,但真機測試時我使用的測試賬號連頭像都沒設(shè)置请琳,因此即使同意授權(quán)了頭像區(qū)域還是一片空白。
解決:
做好判斷腰奋,即使授權(quán)成功獲取到的用戶頭像信息仍舊可能為空单起。
奇怪的坑
1. margin-bottom
在 ios 下無法撐起頁面
問題:
某個頁面底部有一個 fixed 元素,會遮住頁面一部分劣坊,而我希望能夠完整看到當(dāng)前頁面的內(nèi)容嘀倒,因此就對當(dāng)前頁面的內(nèi)容包裹元素加了個 margin-bottom: 140rpx;
以此撐起一定高度,希望可以通過滾動看到完整的頁面內(nèi)容。
但是在 ios 下該 margin-bottom
未起作用测蘑,頁面無法向下拉到底灌危,而在安卓下效果正常。
解決:
新增一個隱藏的(background-color:transparent;
)元素碳胳,設(shè)置高為 140rpx;