- 如何去掉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
-模态对话框怎么换行
使用\r\n,微信开发者工具不生效但是真机可生效
wx.showModal({
title: 'showModal换行',
content: '你好\r\n我叫切图',
success(res) {
}
})
-跳转其他小程序失效
版本更新之后需要在app.json中加入如下代码
"navigateToMiniProgramAppIdList": [
其他小程序的appid
],