微信小程序 错题记事本 111111
radio 设置大小
style="transform:scale(0.7)"
接口遇到问题
export const uploadFile = data => { //上传文件
return AjaxuploadFile({
url: '/xxxx/xxxx?directoryName=miniapp',
filePath: data.filePath
})
}
export const getBusiness = (data) => { // 模板字符串
return Ajax({
url: `/xxxx/xxxxx/xxxxx/${data.xxx}`,
data
})
}
转义工具链接
https://c.runoob.com/front-end/3602/
https://tool.ip138.com/base64/
https://www.bejson.com/enc/urlencode/
微信小程序js 上拉刷新，下拉加载
思路：1.列如：初次请求10条数据，拿到总共的数据和页面页数，
2.判断是否是初次请求，如果不是，就将请求的数据添加至原本的数据中
3.如果数据的长度 大于 总条数 ，那么不再请求
data{
current: 1,
total: 0,
list:[]
}
onPullDownRefresh() {
this.data.current = 1;
this.getNocite()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("pppp")
this.data.current++
if (this.data.total > this.data.list.length) {
this.getNocite()
} else {
console.log("到底了")
wx.showToast({
title: '我也是有底线的',
icon: 'none',
duration: 2000
})
}
},
getNocite() {
getNoticeList({
current: 1,
size: 10
}).then((res) => {
console.log(res)
this.setData({
current: res.data.data.current,
total: res.data.data.total
})
if (this.data.current == 1) {
this.setData({
list: res.data.data.pageData
})
} else {
that.data.list.push(...res.data.data.list);
this.setData({
list: this.data.list
})
}
wx.stopPullDownRefresh({
success: (res) => {},
})
})
},
json对象转字符串，字符串转json 对象
JSON.stringify(xxxx) //对象转字符串
JSON.parse(xxxx) //字符串转json 对象
微信小程序 链接 h5 页面
<web-view src="https:// baidu.com">web-view>
rich-text的换行 图片100%
<rich-text :nodes="rich" style="word-break:break-all;">
js
res.data.data.content = res.data.data.content.replace(/![]()
,'![]()
)
button border去除
button::after{ border: none; }
长按图片分享
<image src="xxxx" show-menu-by-longpress="{{true}}">image>
动态修改标题
onShow(options) {
// this.GetIcon()
wx.setNavigationBarTitle({
title: this.data.title
})
},
文本溢出隐藏省略号
单行
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行
{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
tabbar 隐藏显示
wx.showTabBar()
wx.hideTabBar()
点击复制内容
qrUrl(e) {
console.log(e)
let index = e.currentTarget.dataset.index
this.setData({
fileUrl: this.data.imgUrl + this.data.list[index].fileUrl
})
wx.setClipboardData({
data: this.data.fileUrl,
success:function(){
// wx.showToast({
// title: '内容已复制，请到手机浏览器打开下载',
// })
msg("内容已复制，请到手机浏览器打开下载")
}
})
},
flex width 无效
width 改为 如下
flex:0 0 500rpx
点击分享给朋友
button 里面的 open-type=“share” 属性
<button open-type="share" class="btns">
<image src="../../img/icon/fh.png">image>
button>
字体倾斜，竖排输出
transform:rotate(-45deg);
writing-mode:tb;
隐藏滚轮
::-webkit-scrollbar {
display: none
}
内容复制
function(){
let address = 123456789
wx.setClipboardData({
data: address,
success: function () {
msg("地址已复制，请到手机地图导航打开")
}
})
}
图片上传
chooseImg: function (e) {
let that = this;
wx.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
success: function (res) {
wx.showLoading({
title: '加载中',
mask: true
})
uploads({
filePath: res.tempFilePaths[0]
}).then(res => {
wx.showToast({
title: '上传成功',
mask: true,
icon: 'none'
})
console.log(res)
that.setData({
show6: true,
logo: res.data.link
})
})
}
});
},
文件上传，从聊天记录获取
onClose10() {
this.setData({
show: false,
seconds: 5,
show10: true
});
var that = this;
wx.chooseMessageFile({
count: 10,
type: 'all',
success(res) {
console.log(res);
uploads({
filePath: res.tempFiles[0].path
}).then((res) => {
console.log(res.data.link)
if (res.data.link.substr(-3) == 'rar' || res.data.link.substr(-3) == 'zip' || res.data.link.substr(-3) == 'doc' || res.data.link.substr(-4) == 'docx' || res.data.link.substr(-3) == 'xls' || res.data.link.substr(-4) == 'xlsx' || res.data.link.substr(-3) == 'ppt' || res.data.link.substr(-4) == 'pptx' || res.data.link.substr(-3) == 'pdf') {
console.log('loo');
that.data.business_license_img1.push(res.data.link)
} else {
that.data.business_license_img.push(res.data.link)
}
that.setData({
business_license_img: that.data.business_license_img,
business_license_img1: that.data.business_license_img1,
})
msg('上传成功')
})
}
})
},
隐藏显示input 密码
<input placeholder="请输入登录密码" placeholder-style="font-size:28rpx; color:#999" password="{{active}}"
bindinput="paw" value="{{password}}" />
轮播图指示点 样式
/* 轮播图圆点 */
/* 圆点的样式 因为大小不一样。所以按钮设置大小之后，背景色记得设置完全透明*/
swiper .wx-swiper-dot {
width: 10rpx;
height: 10rpx;
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
background: rgba(255, 255, 255,0);
}
/* 未选中 */
swiper .wx-swiper-dot::before {
width: 20rpx;
height: 10rpx;
content: '';
border-radius: 50%;
/* flex-grow:1; */
background: rgba(255, 255, 255,0.5);
}
/* 选中 */
swiper .wx-swiper-dot-active::before {
width: 30rpx;
height: 10rpx;
border-radius: 50%;
background: rgba(255, 255, 255,1);
}
.wx-swiper-dots {
position: relative;
left: unset !important;
right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal {
margin-bottom: -10rpx;
}
// 样式二
.wx-swiper-dots {
top: 350rpx;
}
.wx-swiper-dot {
width: 9rpx !important;
height: 9rpx !important;
background: rgba(255,255,255,0.6) !important;
}
.wx-swiper-dot-active {
width: 32rpx !important;
height: 8rpx !important;
border-radius: 20rpx !important;
background: rgba(255,255,255,1) !important;
}
判断对象是否为空
JSON.stringify(this.data.obj) === '{}'
字符串裁剪 返回数组
xxxx.split(',')
时间转换
let xxx = new Date(xxx).getTime();
setInterval(() => {
this.getTimes()
}, 1000)
// 倒计时
getTimes() {
let times = this.data.xxx - Date.now()
if (times < 0) {
this.setData({
countdown: '00:00:00'
})
} else {
// console.log(times)
let time = times / 1000;
let hour = Math.floor(time / 60 / 60);
hour = hour.toString().padStart(2, "0");
let minute = Math.floor(time / 60) % 60;
minute = minute.toString().padStart(2, "0");
let second = Math.floor(time) % 60;
second = second.toString().padStart(2, "0");
// console.log(hour+':'+ minute+ ':'+ second);
this.setData({
countdown: hour + ':' + minute + ':' + second
})
}
},
密码输入框
js
//获取应用实例
const app = getApp()
Page({
data: {
showPayPwdInput: false, //是否展示密码输入层
pwdVal: '', //输入的密码
payFocus: true, //文本框焦点
},
/*** 获取焦点*/
getFocus: function () {
this.setData({
payFocus: true
});
},
/*** 输入密码监听*/
inputPwd: function (e) {
console.log(e);
this.setData({
pwdVal: e.detail.value
});
console.log(this.data.pwdVal);
if (e.detail.value.length >= 6) {
console.log('opop');
}
}
})
css
/* 密码掩码模拟 */
.input_row {
width: 360rpx;
margin: 0 auto;
height: 60rpx;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
border: 1rpx solid #000;
}
.input_row .pwd_item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 100%;
border-right: 1rpx solid #000;
position: relative;
}
.pwd_item:nth-last-of-type(1) {
border-right: 0;
}
.pwd_item text {
width: 15rpx;
height: 15rpx;
border-radius: 30rpx;
background-color: #191919;
}
.forget_pwd {
float: right;
margin: 30rpx;
width: 100rpx;
text-align: right;
font-size: 24rpx;
color: #ff7800;
}
/* 文本输入框位置: 设置到左边隐藏 */
.input_control {
position: relative;
left: -300rpx;
bottom: 0;
width: 100rpx;
height: 100rpx;
}
html
<view class='input_row' catchtap='getFocus'>
<view class='pwd_item' wx:for='{{6}}' wx:key='item' wx:for-index='i'>
<text wx:if='{{pwdVal.length>i}}'>text>
view>
view>
<input class='input_control' password type='number' focus='{{payFocus}}' bindinput='inputPwd' maxlength='6' />
去除空格
xxxx = xxx.replaceAll(' ','')
图片预览
// 预览图片
copyImg() {
var that = this
let img = that.data.imgUrl + that.data.license_img
wx.previewImage({
urls: [img] // 需要预览的图片 http 链接列表
})
},
css iphone 底部安全距离设置
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
渲染长度限制
wx:if="{{index<2}}"
海报分享
wxml
生成海报
微信好友
取消
wxss
/* 分享 */
.menubox {
display: flex;
align-items: center;
justify-content: space-around;
padding: 50rpx 0 50rpx;
}
.menubox>.block {
position: relative;
}
.menubox>.block>.sharebtn {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
opacity: 0;
}
.menubox>.block>.icon {
width: 100rpx;
height: 100rpx;
margin: auto;
}
.menubox>.block>.title {
text-align: center;
margin-top: 10rpx;
font-size: 24rpx;
}
.menubtn {
text-align: center;
color: #666666;
font-size: 36rpx;
padding: 20rpx 0;
border-top: 20rpx solid #F2F2F2;
}
.icons {
width: 42rpx;
margin: 0 auto;
}
.icons image {
width: 100%;
}
.canvas-big-box {
position: fixed;
top: -1000000rpx !important;
left: 0;
bottom: 0;
right: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* background-color: pink; */
}
.canvas-box {
width: 100%;
height: 100%;
background: #fff;
z-index: 99;
position: relative;
top: -1000000px;
}
.haibaoimg {
position: absolute;
width: 100%;
height: 100%;
}
.haibaoimgs {
position: absolute;
z-index: 9999999999;
width: 80%;
top: 200rpx;
left: 10%;
}
image {
width: 100%;
}
放置信息详情下方
wx.downloadFile({
url: res.data.data.img,
success: function (res) {
console.log('封面图下载')
console.log(res)
that.setData({
main_banner: res.tempFilePath
})
wx.getImageInfo({
src: that.data.main_banner,
success(res) {
console.log('图片信息')
console.log(res)
that.setData({
main_width: res.width,
// main_height:res.height,
main_height: res.height / (res.width / that.data.width)
})
that.setData({
dataheight: that.data.main_height + 150
})
that.goodsqrcode()
},
fail(err) {
console.log(err)
}
})
},
fail(err) {
console.log(err)
},
})
goodsqrcode() {
var that = this
let pages = getCurrentPages(); //获取加载的页面
let currentPage = pages[pages.length - 1]; //获取当前页面的对象
let url = currentPage.route + '?id=' + that.data.options.id; //当前页面url
console.log(url, '当前页面路径')
wx.downloadFile({
url: 'http://xpj10blj.signalpha.cn/api/server-shop/wap/goods/share/code?appId=wx900492c0dced62e1' + '&url=' + url,
header: {
token: app.globalData.token,
Authorization: "d2FwOlpNOUtuNU50SA==",
},
success(res) {
console.log(res)
that.setData({
user_QRs: res.tempFilePath
})
that.huizhi();
},
fail(err) {
console.log(err)
}
})
},
huizhi() {
var that = this
var context = wx.createCanvasContext('canvas');
context.setFillStyle('#fff')
context.fillRect(0, 0, that.data.width, that.data.dataheight)
context.drawImage(that.data.main_banner, 0, 0, that.data.width, that.data.main_height);
context.drawImage(that.data.user_QRs, that.data.width - 130, that.data.dataheight - 130, 120, 120);
context.setFontSize(16) //字体大小
context.setFillStyle('#333') //字体颜色
context.font = 'normal bold 18px sans-serif';
context.textAlign = "left"; //文字居中
context.fillText(that.data.info.name.substring(0, 10), 20, that.data.dataheight - 100)
context.setFontSize(16) //字体大小
context.setFillStyle('#333') //字体颜色
context.font = 'normal bold 18px sans-serif';
context.textAlign = "left"; //文字居中
context.fillText(that.data.info.name.substring(10, that.data.info.name.length), 20, that.data.dataheight - 80)
context.setFontSize(16) //字体大小
context.setFillStyle('#FF0018') //字体颜色
context.font = 'normal bold 18px sans-serif';
context.textAlign = "left"; //文字居中
context.fillText('￥' + that.data.info.priceTotal, 20, that.data.dataheight - 50)
context.stroke()
context.draw()
setTimeout(() => {
console.log('执行绘画')
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.width,
height: that.data.dataheight,
canvasId: 'canvas',
success(res) {
console.log(res.tempFilePath);
that.setData({
haibaoimg: res.tempFilePath
})
console.log(that.data.haibaoimg)
wx.hideLoading();
},
fail(err) {
wx.hideLoading();
// wx.showToast({
// title: '生成失败',
// icon: 'none'
// })
console.log(err)
}
})
}, 500)
},
getshare() {
// wx.navigateTo({
// url: '/pages/realEstateDetails/realEstateDetails',
// })
//显示分享码
console.log('op000----------');
this.setData({
sheetshow: true
})
},
shengchenghaibao() {
var that = this
//保存海报
wx.showLoading({
title: '保存中',
mask: true
})
wx.getImageInfo({
src: that.data.haibaoimg,
success(res) {
console.log(res)
let path = res.path;
wx.saveImageToPhotosAlbum({
filePath: path,
success(res) {
console.log(res)
msg('保存成功')
},
fail(err) {
console.log(err)
if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
goOpenSettingPhotos();
}
},
complete() {
wx.hideLoading({
success: (res) => {},
})
},
})
}
})
},
sheetclose() {
this.setData({
sheetshow: false
})
},
onShareAppMessage: function (e) {
let that = this
return {
title: that.data.info.goodsName,
imageUrl: that.data.imgUrl + that.data.info.main_banner,
path: '/pages/general_merchandise_details/general_merchandise_details?id=' + that.data.options.id + '&type=' + that.data.options.type
}
},
data数据
sheetshow: false,
dataheight: '',
haibaoimg: '',
main_banner: '',
width: wx.getSystemInfoSync().windowWidth,
height: wx.getSystemInfoSync().windowHeight,
imgactive: false,
img_detail: ''
onload 获取
let menu = wx.getMenuButtonBoundingClientRect();
let titleHeight = 'top:-' + (Number(menu.top) + Number(menu.height) + 10) + 'px;';
that.setData({
titleHeight,
menu
})