小程式技巧合集(持續學習更新中……)
阿新 • • 發佈:2019-02-02
- 如何去掉button的邊框?
使用偽類
/*——————————html——————————*/
<button>點選</button>
/*——————————css——————————*/
button:after {
border: none;
}
- 如何雙向資料繫結?
小程式的資料響應使用setData
,類似react的setState
的寫法,分別繫結。與vue的v-model
繫結不同了
<input class="weui-input"
type='number'
maxlength="11" placeholder="請輸入手機號碼" value='{{guiderTel}}' bindinput="bindPhoneInput"/>
/*——————————js——————————*/
Page({
data: {
tel:""
},
bindPhoneInput: function (e) {
this.setData({
tel: e.detail.value
})
},
})
方法 | 描述 |
---|---|
navigateTo | 保留當前頁面,跳轉到應用內的某個頁面(注意:目前頁面路徑最多隻能十層。) |
redirectTo | 關閉當前頁面,跳轉到應用內的某個頁面 |
reLaunch | 關閉所有頁面,開啟到應用內的某個頁面 |
switchTab | 跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面(跳轉的 tabBar 頁面的路徑,不能帶引數) |
navigateBack | 關閉當前頁面,返回上一頁面或多級頁面,通過delta設定返回的頁面數(如果 delta 大於現有頁面數,則返回到首頁) |
navigator | 上面都為js中設定,navigator是微信提供的元件 |
wx.navigateTo({
url: 'test?id=1'
})
wx.redirectTo({
url: 'test?id=1'
})
wx.reLaunch({
url: 'test?id=1'
})
wx.switchTab({
url: '/test'
})
wx.navigateBack({
delta: 2
})
<view class="btn-area">
<navigator url="/page/test?id=1">對應 wx.navigateTo</navigator>
<navigator url="/page/test?id=1" open-type="redirect">對應 wx.redirectTo</navigator>
<navigator url="/page/test?id=1" open-type="reLaunch">對應 wx.reLaunch</navigator>
<navigator url="/page/test" open-type="switchTab" >對應 wx.switchTab</navigator>
</view>
tip: wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面,只能用 wx.switchTab 跳轉到 tabbar 頁面
-獲取跳轉引數
Page({
onLoad: function(option){
console.log(option.id)
}
})
- 跳轉小程式?
①、navigator:基礎庫 2.0.7 開始支援
// envVersion:develop(開發版),trial(體驗版),release(正式版)
<navigator
target="miniProgram"
open-type="navigate"
app-id="XXXXXXXX"
path="pages/invite/invite?id={{id}}"
extra-data=""
version="release"
hover-class="none">
跳轉小程式
</navigator>
②、wx.navigateToMiniProgram:基礎庫 1.3.0 開始支援,此介面即將廢棄
openChat: function () {
wx.navigateToMiniProgram({
appId: 'XXXXXXXX',
path: 'pages/invite/invite?id=' + id,
extraData: '',
envVersion: 'release',
success(res) {
}
})
}
-下拉重新整理
①、當前json檔案
{
"enablePullDownRefresh": true,
}
②、當前js檔案
onPullDownRefresh: function () {
that.XXX();
},
-下拉重新整理ios出現一塊空白
1、外層div
position: fixed;
height: 100%;
2、在 onPullDownRefresh 事件里加setTimeout事件延遲下下拉重新整理的事件。
setTimeout(function () {<br> // 這裡寫重新整理要呼叫的函式,比如:
_This.pullRefresh();
}, 500);
3、app.json
"disableScroll": true