微信小程序知识点总结-1
bug收集：专门解决与收集bug的网站 背景：
最近，在做微信小程序，将一些知识点汇总如下：
（ps: 之后，还会继续更新）
1. 自定义导航
如下图：
1.1 窗口配置
页面json文件中，加如下配置
"navigationStyle": "custom" //自定义导航1.2 关于微信小程序自定义导航栏时，如何获取手机状态栏和导航栏高度
https://www.yii666.com/blog/360110.html
let res = wx.getSystemInfoSync();
let statusHeight = res.statusBarHeight;// 注意：此时获取到的值的单位为 'px'
2. 返回上一页
<button bindtap="navigateBack">返回上一页</button>
navigateBack: function () {
wx.navigateBack({
delta: 1, // 返回的页面数，1表示返回上一级页面
success: function(res) {
console.log("返回成功");
},
fail: function(res) {
console.log("返回失败");
},
complete: function(res) {
console.log("返回完成");
}
})
}3. 微信小程序设置页面高度为屏幕高度的方法
方法1：
.page{
height:100vh;
}方法2 ：
<view class="container" style="height: {{containerHeight}}px"></view>
Page({
data: {
containerHeight: 0
},
onLoad() {
wx.getSystemInfo({
success: (res) => {
this.setData({
containerHeight: res.windowHeight
})
}
})
}
})4. 原生的微信小程序实现判断用户左滑动与右滑动
<!-- index.wxml -->
<view class="container">
<view class="box"
bindtouchstart="touchStart"
bindtouchend="touchEnd">
向左滑动或向右滑动
</view>
</view>// index.js
Page({
touchStart(e) {
this.startX = e.changedTouches[0].pageX
this.startY = e.changedTouches[0].pageY
},
touchEnd(e) {
const endX = e.changedTouches[0].pageX
const endY = e.changedTouches[0].pageY
const deltaX = endX - this.startX
const deltaY = endY - this.startY
if (Math.abs(deltaX) > 20 && Math.abs(deltaY) < 50) { // 判断是否左右滑动
if (deltaX > 0) {
console.log('向右滑动')
} else {
console.log('向左滑动')
}
}
}
})5. 微信小程序中获取节点的方法（未测试）
具体的方法如下：
在要获取节点信息的页面中，
通过 this.createSelectorQuery() 方法创建一个选择器对象。
使用选择器对象的 select(selector) 方法
或 selectAll(selector) 方法来获取节点信息。
调用选择器对象的 boundingClientRect(callback) 方法
或 exec(callback) 方法来获取目标节点的信息，
其中 boundingClientRect 方法获取节点的位置和尺寸信息，
exec 方法可获取自定义属性、样式等信息。
<!-- index.wxml -->
<view class="container">
<view id="box" class="box">我是一个盒子</view>
<button bindtap="getNodeInfo">获取节点信息</button>
</view>// index.js
Page({
// 获取节点信息
getNodeInfo() {
const query = wx.createSelectorQuery()
query.select('#box').boundingClientRect(rect => {
console.log('节点信息：', rect)
}).exec()
}
})6. 微信小程序 wx.switchTab 跳转页面，不刷新问题
解决方案：
wx.switchTab({
url: '/pages/exam/exam',
success:function () {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad(); //重新刷新页面
}
})7. getphonenumber 获取手机号的方法个人小程序是不能获取手机号的，企业小程序账号可以
获取小程序账号的方法更新，只需要传 code 到后台即可.
注：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用
获取方法如下：
<button open-type="getPhoneNumber"
bindgetphonenumber="getPhoneNumber">
微信一键登录
</button>Page({
getPhoneNumber (e) {
console.log(e.detail.code) //将此code 传入后台服务器，获取电话
}
})8. 发布成体验版，进行测试
体验版测试，需要开发调试下，去测试；不会检查https
9. 微信小程序页面标题对齐设置
微信小程序页面标题，没有提供设置对齐的方式；
默认情况andriod 手机标题将左对齐，ios手机则是居中对齐