微信小程序
唤起拨号
wx.makePhoneCall({
phoneNumber: '1340000' // 仅为示例，并非真实的电话号码
})
过滤器
创建 xxx.wxs 文件
// 使用var定义一个json开头 将所有的过滤器写在unit中
var unit = {
// 定义一个函数作为过滤器 参数text为传来的原始值
reduceSecond: function(text) {
if(text !== '' && text != undefined) {
// 操作之后再将值return回去
return text.substring(0, text.length - 3);
} else {
return text
}
}
}
// 导出过滤器 这段代码必写
module.exports = {
// 格式为 导出的名字: json名字.函数名字
reduceSecond: unit.reduceSecond
}
wxss中
<!-- src为filter.wxs的路径 绝对相对都可以 -->
<wxs module="filter" src="../../../../filter/filter.wxs" />
<view>{{filter.reduceSecond(item.text)}}</view>
监听页面滚动
onPageScroll(e) {
//创建节点选择器
let query = wx.createSelectorQuery();
//选择id
let that = this;
query.select('.pay-btn').boundingClientRect(function (rect) {
if (e.scrollTop > rect.height + 430) { // 页面上卷高度 大于页面固定按钮位置
that.setData({
fixedInputPhone: true // 显示指定区域
})
} else {
that.setData({
fixedInputPhone: false // 隐藏指定区域
})
}
}).exec();
},
控制页面滚动
wx.pageScrollTo({
scrollTop: 149,
duration: 300
})
小程序中图片预览
<image mode="aspectFill" class="photo-items" wx:for="{{photoList}}" wx:key="index" src="{{item}}" data-src="{{item}}" bindtap='previewImage'></image>
<view catchtap="chooseImg" class="camera"></view>
previewImage(e) {
let _this = this
wx.previewImage({
urls: _this.data.photoList,
current: e.target.dataset.src
})
}
可拖动悬浮图标
// wxml
<view style="top:{{cameraTop}}rpx;left:{{cameraLeft}}rpx;"
bindtap="chooseImg"
catch:touchmove="cameraMove"
bindtouchstart="cameraStart"
bindtouchend="cameraEnd"
class="camera">
</view>
// js
data: {
cameraTop: 0,
cameraLeft: 0
},
onLoad: function (options) {
let multiple = parseFloat(750 / app.globalData.localWidth)
this.setData({
multiple: multiple,
cameraTop: app.globalData.localHeight * multiple - 181 - 118,
cameraLeft: 750 - 15 - 118
})
},
cameraStart(e) {
this.startPoint = e.touches[0] //获取拖动开始点
},
cameraMove(e) {
let multiple = this.data.multiple
var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
//计算在X轴上拖动的距离和在Y轴上拖动的距离
var translateX = (endPoint.clientX - this.startPoint.clientX) * multiple
var translateY = (endPoint.clientY - this.startPoint.clientY) * multiple
this.startPoint = endPoint //重置开始位置
var cameraTop = this.data.cameraTop + translateY
var cameraLeft = this.data.cameraLeft + translateX
//判断是移动否超出屏幕
if (cameraLeft + 118 >= 750) {
cameraLeft = 750 - 118;
}
if (cameraLeft <= 0) {
cameraLeft = 0;
}
if (cameraTop - 96 <= 0) {
cameraTop = 0 + 96
}
if (cameraTop + 230 >= app.globalData.localHeight * multiple) {
cameraTop = app.globalData.localHeight * multiple - 230;
}
this.setData({
cameraTop: cameraTop,
cameraLeft: cameraLeft
})
},
cameraEnd(e) {}
显示2行多出部分显示省略号
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
px rpx 转换
// rpx转px:
var px = rpx / 750 * wx.getSystemInfoSync().windowWidth;
// px转rpx:
var rpx = px * 750 / wx.getSystemInfoSync().windowWidth;
自定义单个导航栏
xxx.json
"navigationStyle": "custom",
xxx.js
onReady: function () {
let data = wx.getMenuButtonBoundingClientRect()
console.log('菜单按键宽度：',data.width)
console.log('菜单按键高度：',data.height)
console.log('菜单按键上边界坐标：',data.top)
console.log('菜单按键右边界坐标：',data.right)
console.log('菜单按键下边界坐标：',data.bottom)
console.log('菜单按键左边界坐标：',data.left)
let h = data.bottom * 750 / wx.getSystemInfoSync().windowWidth
let top = data.top * 750 / wx.getSystemInfoSync().windowWidth
this.setData({
barHeight: (h + 26) + 'rpx',
paddingT: top + 'rpx'
})
},
组件样式暴露
// 组件的js文件
Component({
externalClasses: ['number','unit'],
})
// 引用的组件
<horizontalList number='newnumber' unit='newunit'></horizontalList>
禁用分享
onLoad: function (options) {
wx.hideShareMenu({
success: (res) => {},
})
},
打开分享
wx.showShareMenu()
跳转其他小程序
wx.navigateToMiniProgram({
appId: 'wxd1b5bd8a397e969f',
path: '/pages/training-order/training-order',
extraData: {
},
envVersion: 'release',
success(res) {
// 打开成功
}
})
解析富文本图片超大问题
改写接口富文本
res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto" ')
禁用页面滚动
蒙版view catchtouchmove="move"
move(){return false}
scroll-view隐藏横向滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
在小程序中使用
// 只有text标签中有效且 decode="{{true}}"
<text decode="{{true}}">六节课 - 欧洲同步 本领全面</text>
监听全局变量
// app.js
globalData: {
IsAuthorization: false,
},
// 监听是否获取到城市id
watch: function (method) {
var obj = this.globalData
Object.defineProperty(obj, 'IsAuthorization', { // IsAuthorization就是监听的变量
configurable: true,
enumerable: true,
set: function (value) {
this._name = value;
method(value);
},
get: function () {
return this._name
}
})
// index.js
onLoad: function () {
getApp().watch(this.watchBack) //注册监听
},
watchBack: function (value) {
// value 就是app.js中监听的变量
if (value) {
// 执行
}
},
参数中文乱码
decodeURIComponent(text)
rpx px 转换
px = rpx / 750 * wx.getSystemInfoSync().windowWidth;
rpx = px * 750 / wx.getSystemInfoSync().windowWidth;
横划不对齐
滑动元素增加顶部对齐
vertical-align:top;
滚动
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
}).exec()
onPageScroll: function (e) {
this.setData({
scrollTop: e.scrollTop
})
let query = wx.createSelectorQuery()
query.select('#index-nav').boundingClientRect( (rect) => {
let top = rect.top
if (top <= 53) { //临界值，根据自己的需求来调整
this.setData({
fixedNav: true, //是否固定导航栏
showToTop: true //是否回到临界值的状态
})
} else {
this.setData({
fixedNav: false,
showToTop: false
})
}
}).exec()
},
//回到临界值的函数
setScrollTop() {
let query = wx.createSelectorQuery()
let scrollTop = this.data.scrollTop
query.select('#index-nav').boundingClientRect((rect) => {
let top = rect.top
// 这里是关键
wx.pageScrollTo({
scrollTop: scrollTop + top - 56,
duration: 0
})
}).exec()
},
//触底加载
onReachBottom () {
if (this.data.AJAXLock && this.data.page < this.data.totalPage) {
let page = this.data.page + 1
this.setData({
page: page
})
this.getLock()
this.getHomieData()
}
},
// 动态设置页面标题
wx.setNavigationBarTitle({title: '约球订场'})
