微信小程序错题记事本 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;"></rich-text>
js
res.data.data.content = res.data.data.content.replace(/<img/g,'<img style="max-width:100%;"')

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.indexthis.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 = 123456789wx.setClipboardData({data: address,success: function () {msg("地址已复制，请到手机地图导航打开")}})}

图片上传

chooseImg: function (e) {let that = this;wx.chooseImage({count: 1, //默认9sizeType: ['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 = thislet img = that.data.imgUrl + that.data.license_imgwx.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<!-- 分享 -->
<van-action-sheet show="{{ sheetshow }}"><view class="menubox"><view class="block" bindtap="shengchenghaibao"><view class="icons"><image src="../../img/icon/share3.png" mode="widthFix"></image></view><view class="title">生成海报</view></view><view class="block"><button open-type="share" class="sharebtn">分享</button><view class="icons"><image src="../../img/icon/share4.png" mode="widthFix"></image></view><view class="title">微信好友</view></view></view><view class="menubtn" bindtap="sheetclose">取消</view>
</van-action-sheet><view class="haibaoimgs" wx:if="{{sheetshow}}"><!-- <swiper style="height:800rpx;" current="{{haibaiimgcurrent}}" bindchange="haibaichange"><swiper-item wx:for="{{haibaoimg}}"><image src="{{item.tempFilePath}}" mode="widthFix"></image></swiper-item></swiper> --><view style="height: 800rpx;"><image src="{{haibaoimg}}" mode="widthFix"></image></view>
</view><view class="canvas-big-box" wx:if="{{!haibaoimg}}"><view class="canvas-box"><canvas style="width:100%; height:{{dataheight}}px; background: #fff;" canvas-id="canvas" disable-scroll="true"></canvas></view>
</view>

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 = thislet pages = getCurrentPages(); //获取加载的页面let currentPage = pages[pages.length - 1]; //获取当前页面的对象let url = currentPage.route + '?id=' + that.data.options.id; //当前页面urlconsole.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 = thisvar 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 = thisreturn {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})

微信小程序错题记事本 111111相关推荐

微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本文章目录微信小程序项目实例--心情记事本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示心情记事本是一款可以记录当前心 ...
微信小程序开发笔记—记事本
文章目录一.前言二.实现效果 1.添加日记 2.保存日记 3.查看日记详情 4.删除日记三.程序实现 1.日记主页面程序 1.1..wxml文件 1.2..wxss文件 1.3..ts文件 2. ...
微信小程序制作-----日历记事本
因为某些原因吧,我接触到了微信小程序在这里将自己的一些理解和感悟写出来. 小程序介绍小程序其实就是前端,后端你可以使用Java去完成,小程序的目录结构,页面可以当在一个pages的文件夹里面然后注 ...
微信小程序前端备忘录记事本搜索功能
微信小程序搜索功能,小程序自带weui, 阅读文档,WeUI组件库简介 | 微信开放文档 (qq.com) 1推荐使用方法: 在//app.json中录下下列句子 "useExtendedL ...
微信小程序错误码40029 ——errcode: 40029, errmsg: invalid code, hints: [ req_id: gElDqRLnRa-744jra ]
微信小程序二次开发的时候一定要注意:分清演示版与正式版,一般的二次开发都会有一个演示版与正式版,开发一般是用的演示版,而这时,我们的调的接口也是演示版的接口,那你的APPID也要相对应,否则便会报错4 ...
php微信47001,微信小程序错误码47001是什么原因
微信小程序出现47001错误是因为格式不对导致的. 微信小程序出现47001 data format error解决办法: 看下错误: 主要原因是请求的数据不是json格式引起的. 分享下我用的代码 ...
我的第一个微信小程序（手机记事本）
写在前面--这里我借鉴了一位博客的代码,可惜我忘记他的名字了,只能匿名地道声"谢谢!". 如果你看到了感觉我侵犯了你"版权",可以告诉我,我会及时删除相关代码. ...
微信小程序记事本+后台管理系统
<微信小程序记事本+后台管理系统>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的记事本前台和Java做的后台管理系统: 微信小程序--记事 ...
微信小程序之记事本管理系统(含源码+论文+答辩PPT等)
项目功能简介: 该项目含有源码等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的记事本前台和Java做的后台管理系统: 微信小程序--记事本前台涉及技术:WXML 和 WXS ...

微信小程序错题记事本 111111

微信小程序错题记事本 111111相关推荐

最新文章

热门文章

微信小程序 错题记事本 111111

微信小程序 错题记事本 111111相关推荐

最新文章

热门文章

微信小程序错题记事本 111111

微信小程序错题记事本 111111相关推荐