小程序技巧合集（持续学习更新中……）

- 如何去掉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
	  })
	},
}）
  

- 跳转方式？
api传送门↓ 组件传送门↓

方法	描述
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
  ],