遇到的問題:
小程序不支持長按識別二維碼
小程序不支持長按識別二維碼,所以遇到產(chǎn)品要求要做成小程序頁面但是需要長按識別二維碼的場景需要注意下。
解決方式:
- h5方案:改成小程序嵌h5方案褥傍,將需要長按識別二維碼的頁面做成h5頁面孕惜,h5中可長按識別二維碼
- 小程序方案:使用小程序接口
wx.previewImage
點擊圖片進行預(yù)覽,圖片預(yù)覽后可以長按識別二維碼
小程序web-view可打開小程序關(guān)聯(lián)公眾號文章
小程序web-view中可以打開小程序關(guān)聯(lián)的公眾號的文章,但不能是短鏈形式打開的文章锻梳,需要是 https://mp.weixin.qq.com/ 開頭的鏈接
一些會跳轉(zhuǎn)到發(fā)布版本小程序的場景
- 小程序URL link打開跳轉(zhuǎn)的是已發(fā)布的小程序(只能生成已發(fā)布的小程序的 URL Link)
- 從消息訂閱模板點擊跳轉(zhuǎn)小程序頁面,為已發(fā)布小程序頁面
css
- 設(shè)置input的disabled净捅、placeholder顏色
input[disabled]{
background: unset;
color: #6b6b6b;
-webkit-opacity: 1;
opacity: 1;
-webkit-text-fill-color: #6b6b6b;
}
input[disabled] .placeholder-class{
color: #C8C8C8;
-webkit-text-fill-color: #C8C8C8;
}
.placeholder-class{
color: #C8C8C8 !important;
}
// wxml
<input
v-model="form.name"
placeholder="請輸入您的姓名"
placeholder-class="placeholder-class"
:disabled="isDisabledInput"
>
</input>
本地資源無法通過 WXSS 獲取疑枯,
background-image:可以使用網(wǎng)絡(luò)圖片,或者 base64蛔六,或者使用image標(biāo)簽能使用
calc
:height: calc(100% - 100rpx);
官方組件的樣式可以通過
!important
覆蓋-
button組件默認都加了一個border荆永,該button控件上有一個偽元素(::after),設(shè)置了border国章,只要把button::after 的border 屬性去掉就可以了具钥,
/*去掉按鈕邊框*/ button::after { border: 0; } /*去掉button默認樣式*/ button { border-radius: 0; background-color: transparent; padding: 0; margin: 0; }
-
修改radio框的樣式:先把radio組件隱藏起來,自己寫自定義樣式和選中樣式捉腥,再在data中設(shè)置一個選中的變量氓拼,來顯示是否顯示選中樣式
<radio-group class="radioGroup" bindchange="radioChange"> <label class="radio" wx:for="{{items}}" wx:key="id"> <!-- 自定義的radio樣式 --> <view class='radioPoint'> <view class='radioDefault'> <view class="{{radioCheckVal==item.id?'radioActive':''}}"></view> </view> </view> <view class='radioText'> {{item.value}}</view> <!-- 隱藏默認的radio樣式 --> <radio value="{{item.id}}" hidden="true" checked="{{item.checked}}" /> </label> </radio-group>
Page({ /* 頁面的初始數(shù)據(jù) */ data: { items: [ { id: 1, value: '選項1' }, { id: 2, value: '選項2' }, ], radioCheckVal: null }, radioChange: function (e) { this.setData({ radioCheckVal: e.detail.value }) }, })
在微信小程序內(nèi)的文字無法長按復(fù)制,除了text節(jié)點以外抵碟。但要在text標(biāo)簽內(nèi)加一個“selectable”屬性桃漾。
<text selectable='true' ><text/>
js
-
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步),同時改變對應(yīng)的 this.data 的值(同步)拟逮。
- 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的撬统,還會造成數(shù)據(jù)不一致。
- 單次設(shè)置的數(shù)據(jù)不能超過1024kB敦迄,請盡量避免一次設(shè)置過多的數(shù)據(jù)恋追。
- 請不要把 data 中任何一項的 value 設(shè)為 undefined ,否則這一項將不被設(shè)置并可能遺留一些潛在問題罚屋。
小程序里面的打開的頁面苦囱,請求需要是https協(xié)議,websocket協(xié)議需要是wss協(xié)議
按小程序右上角退出小程序和按home鍵退出微信脾猛,小程序里面的ws連接都不會斷
-
小程序通過按鈕點擊分享撕彤,無法做到先發(fā)起網(wǎng)絡(luò)請求獲取某些信息再進行分享的功能,因為onShareAppMessage方法必須要return一個對象猛拴,不能放在wx.request回調(diào)里面return羹铅,必須事先獲取。
//分享到個人/群判斷方法 Page({ onShareAppMessage: function () { //設(shè)置withShareTicket: true才能獲取shareTickets信息 wx.showShareMenu({ withShareTicket: true }) return { title: '分享標(biāo)題', path: '/pages/index/index', imageUrl: '', success: (res) => { // 轉(zhuǎn)發(fā)成功 if (res.hasOwnProperty('shareTickets')) { // 轉(zhuǎn)發(fā)到群 wx.getShareInfo({ shareTicket: res.shareTickets[0], success: (res) => { //encryptedData,iv發(fā)送給后臺解密愉昆,獲取到openGId }, fail: function (res) { console.log('獲取微信分享信息失敗') } }) } else { // 轉(zhuǎn)發(fā)到個人 } }, fail: function (res) { // 轉(zhuǎn)發(fā)失敗 } } }, })
-
隱藏小程序?qū)Ш綑诜椒ㄖ霸保赼pp.json中配置navigationStyle:
{ "pages": [], "window": { "navigationStyle": "custom" } }
微信sdk分享的鏈接中不能含有中文字符,否則不能自定義分享跛溉,一定要把分享的鏈接encode一下
處理退出小程序的操作:目前沒有提供這樣的接口焊切,但是可以用wx.navigateBack()做處理扮授,將跳轉(zhuǎn)層級設(shè)為最大跳轉(zhuǎn)數(shù)量即可。
wx.navigateBack({delta:20})
涉及到經(jīng)常切換的需要用
hidden
來實現(xiàn)樣式切換蛛蒙,不要用wx:if
糙箍,用這個切換的時候會導(dǎo)致閃爍問題自定義組件里面的wxss不會影響到頁面的樣式,所以不能繼承自定義組件里面的樣式
-
獲取dataset:獲取最外層dataset通過
event.currentTarget.dataset
就可以獲取牵祟,里面的子元素就不用寫上data-,而不用event.target.dataset獲取<view class="btn" bindtap="tapNav" data-nav="1"> </view> <view class="btn" bindtap="tapNav" data-nav="1"> <view data-nav="2"></view> </view> // 讀取當(dāng)前執(zhí)行事件的view data-nav值打印出來 // 第一個打出1 // 第二個如果點擊的位置是子view的話抖格,會打印出2. tapNav:function(event){ console.log(event.target.dataset.nav) //2 console.log(event.currentTarget.dataset.nav) //1 },
生命周期執(zhí)行順序:
onLoad->onShow->onReady
授權(quán)和登錄是兩回事诺苹。登錄是用戶無感知的,獲取到
code
和后端通信獲得openid
來定位用戶雹拄。而授權(quán)才能獲取用戶頭像和名字等信息-
在不授權(quán)的情況下收奔,可以通過open-data獲取用戶基本信息,在微信
6.6.1
版本中獲取不了滓玖,并且基礎(chǔ)庫1.9.90
版本才開始支持坪哄,遇到需要顯示用戶信息的地方還是需要手動授權(quán),不能依賴于open-data势篡。<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
無論是
bindscrolltoupper
還是bindscrolltoupper
做上拉下拉刷新都需要注意這兩個事件是會多次調(diào)用的翩肌。需要一個標(biāo)識符來攔截多次調(diào)用。下拉刷新建議用 page 的this.setData()
修改數(shù)據(jù)是異步的禁悠,因此不能用它來做上下拉刷新的標(biāo)識符頁面路徑只能是五層念祭,請盡量避免多層級的交互方式。
-
路由傳遞參數(shù)bug: 比較長的字符串作為參數(shù)應(yīng)該放在最后碍侦。
const TestUserData = { header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90", name: "哈哈哈哈", text: "紅鯉魚和綠鯉魚與驢", } // 跳轉(zhuǎn)之后只能讀取到header wx.navigateTo({ url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`, }) // 跳轉(zhuǎn)之后三個參數(shù)都能讀取 wx.navigateTo({ url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`, })
授權(quán)彈窗如果用戶很久不響應(yīng)的話粱坤,就會調(diào)用失敗
transform: translate(0,100rpx);
一個絕對定位的布局會撐開page
節(jié)點路由跳轉(zhuǎn)bug:經(jīng)過測試,因為頁面跳轉(zhuǎn)是有動畫時效的瓷产,在動畫進行中當(dāng)前頁面還能操作站玄。如果雙擊當(dāng)前跳轉(zhuǎn)按鈕機會進行兩次跳轉(zhuǎn)。第二次點擊的時候小程序內(nèi)置的路由棧是已經(jīng)定位到了新的頁面了濒旦,而這時候在按照原來的路由棧去定位當(dāng)前頁面株旷,因此會報錯。所以頁面跳轉(zhuǎn)按鈕需要進行短時間多次點擊的限制
素材
- 素材引入使用相對路徑
- 支持
image
內(nèi)src
放置svg
疤估。但是不支持直接在wxml里面直接使用svg
- 錄音音頻灾常,舊版的是
silk
格式,和公眾號開發(fā)的時候一致。而新版可以自己選擇aac