个人博客里面阅读起来可能要清楚一些
个人博客
常用UI库
推荐使用：https://github.com/weilanwl/ColorUI
微信官方：https://github.com/wechat-miniprogram/miniprogram-demo
有赞组件库：https://github.com/youzan/vant-weapp
有赞文档：https://youzan.github.io/vant-weapp
控件绑定事件并传参
wxml
<button bindtap="clickMe" data-index='1'>clickMe</button>
js
Page({
data: {
motto: ''
},
clickMe(e) {
var index = e.currentTarget.dataset.index
this.setData({
motto: index
})
}
})
网络请求
js
Page({
data: {
motto: ''
},
clickMe(e) {
wx.request({
url: 'http://10.8.50.97:8888/api/dynamics',
data: {
x: '1',
y: '2'
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
that.setData({
dynamicList: res.data.data
})
}
})
}
})
文本自动多行显示css
word-break: break-all
js中引入其他js
1.init.js
var menu=[
{
"url": "../dynamic/list",
"name": "朋友圈",
"color": "#1296db",
"image": "../../resources/images/friend.png",
"openType": "navigate"
},
{
"url": "../logs/logs",
"name": "日志",
"color": "#333333",
"image": "../../resources/images/log1.png",
"openType": "switchTab"
}
]
module.exports = {
menu: menu
}
2.其他js中使用
var init=require("../../resources/json/init.js")
var menu= init.menu
延时执行
setTimeout(function () {
//要延时执行的代码
}, 1000) //延迟时间 这里是1秒
字符串去除空格
str.replace(/\s+/g, '')
按钮置底
position: fixed;
bottom: 0;
width: 100%;
提示框
wx.showToast({
title: '服务结果不能为空!',
icon: 'none',
duration: 2000
})
给之前的任意界面传值
var pages = getCurrentPages();
var Page1 = pages[pages.length - 1]; //当前页面
var Page2 = pages[pages.length - 2]; //上一个页面
var backPage = pages[pages.length - 3]; //上两个页面
backPage.setData({
tagsIsLoad: true
});
wxml页面使用的wxs函数
1.subutil.wxs
var sub = function (val,start,end) {
if (val.length == 0 || val == undefined) {
return;
}
return val.substring(start, end);
}
var toString = function (val) {
return String(val);
}
module.exports = {
sub : sub,
toString: toString
}
2.在wxml中引入使用
<wxs src="../../wxs/subutil.wxs" module="tools" />
加载动画
wx.showLoading({
title: '加载中...',
mask:true
})
wx.hideLoading();
JSON序列化和反序列化
//对象转JSON
var peopleJson = JSON.stringify(people);
//JSON转对象
var people = JSON.parse(peopleJson);
从点击处，弹出菜单栏
wxml
<button bindtap="showModal" data-target="menuModal"></button >
<view wx:if="{{modalName=='menuModal'}}" style='width:100%;height:calc(100vh + {{scrollTop}}px);position: absolute;top:0px;left:0px' bindtap='hideModal'>
<view class="menu" style='top:{{y-96}}px;left:{{x}}px'>
<view style='height:50%;color:#E6E6E6' bindtap='update'>
编辑
</view>
<view style='height:50%;color:#E6E6E6' bindtap='cancel'>
取消
</view>
</view>
</view>
wxss
.menu{
height:192rpx;
width:216rpx;
background-color: #333333;
position: absolute;
border-radius: 8rpx;
}
js
data: {
scrollTop: 0
},
/**
* 获取当前顶部坐标
*/
onPageScroll: function (e) {
this.setData({
scrollTop: e.scrollTop
})
},
showModal(e) {
var pageX = e.detail.x
var pageY = e.detail.y
this.setData({
modalName: e.currentTarget.dataset.target,
x: pageX,
y: pageY
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
阻止事件冒泡
catchtap
设置页面顶部位置
wx.pageScrollTo({
scrollTop: 0
})
设置input光标和提示文字位置
text-align:left;
padding-left:24rpx;
确认取消模态框
wx.showModal({
title: '删除优惠券',
content: '确定删除这个优惠券吗？',
cancelText:'取消',
confirmText:'删除',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
本地图片做背景
js添加
data: {
background: 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync('images/bg.png', 'base64')
},
wxml添加
<view style="background-image: url({{background}});background-size:100%;height:100vh"></view>
商品图文详情折叠
折叠时添加以下wxss
max-height: 400px;
overflow: hidden;
this.setData优化技巧,修改参数部分属性，部分重新渲染
var str = 'list['+index+'].checked';
this.setData({
[str]: false
})
grid布局css
display: grid;
grid-template-columns: 160rpx auto;
scroll-view的scroll-x（横向滚动）
croll-view标签需要添加样式
white-space: nowrap;
croll-view标签的子标签需要滚动的标签需要添加样式，及需要其子标签为行内块级元素
display:inline-block;
弹框后阻止下层页面滚动
<van-popup catchtouchmove='true' />
