微信小程序-知识总结
微信小程序项目知识总结
你管我管你疯啊
没有解决不了的技术问题,只有解决不了问题的人。
展开
-
微信小程序 列表局部刷新以及二次支付倒计时(兼容苹果和安卓)
项目中1.实现订单二次支付功能用户已下单用户未支付代码// replace(/-/g, '/') 时间兼容 苹果不支持- 只支持/var m, s;let {createTime} = this.data.orderData, //下单时间 currentTime = (new Date()).getTime(), //当前时间的毫秒值 createTime1 = (new Date(createTime.replace(/-/g, '/')).getTime()) + 1原创 2021-12-23 10:55:06 · 1859 阅读 · 0 评论 -
微信小程序----Vant Weapp组件库的坑
创建项目cmd 进入项目根目录 执行npm init -y 一直回车勾选微信小程序开发工具 详情-本地配置-npm 构建npm在app.json中 "usingComponents": { "van-notify": "@vant/weapp/notify/index", "van-tag": "@vant/weapp/tag/index", },页面直接使用<van-cell-group inset> <van-cell title="单元.原创 2021-10-25 15:49:29 · 8546 阅读 · 2 评论 -
微信小程序引入echarts 过大最佳解决方案
引入echarts以后,单echarts代码包已经973KB,如何能压缩大小?使用自定义的方法 压缩文件大小 官网地址可以根据实际项目情况选择用到的echarts组件进行构建,如下图所示:选择完成以后,点击【下载】就可以下载我们自定义构建的echart文件注:勾选代码压缩以后下载的文件名称为:echarts.min.js未勾选代码压缩以后下载的文件名称为:echarts.js将下载的echarts.min.js重命名为echarts.js替换项目ec-canvas目录下的echart.原创 2021-10-21 17:37:46 · 6477 阅读 · 8 评论 -
微信小程序 动画效果切换菜单
<view class="box" style="position:relative;"> <view class="move-item" style="transform:translateX({{transX}}px);width:{{width}}px;"></view> <view class="item {{active===index?'active':''}}" wx:for="{{list}}" key='*this' bindtap=...原创 2021-10-19 16:54:17 · 929 阅读 · 0 评论 -
微信小程序 云开发一
开发准备注册一个企业小程序账号 获取到appid创建一个项目 选择默认模板(在默认模板基础修改)开通云开发 创建云环境 获取云环境Id(cloud1-4gh5ex65c3e23134)初始化云开发环境配置云函数环境创建并部署云函数调用云函数 获取对应数据 进行对应操作1.注册账号 :https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%原创 2021-04-11 22:07:22 · 237 阅读 · 0 评论 -
微信小程序登录获取用户ID(openid和unionid)
微信小程序登录获取用户ID(openid和unionid)一、前端开发操作:1、配置电脑的hosts 文件具体操作流程地址:https://jingyan.baidu.com/article/425e69e6e479a2be15fc16e1.html2、配置如下:添加内容:127.0.0.1 www.yanxiaoxiao.com192.168.3.12 ...原创 2020-04-23 14:37:23 · 4024 阅读 · 0 评论 -
微信小程序 下拉展开动画
效果图如下:<block wx:for-items="{{list}}" wx:key="{{item.id}}"> <view class="kind-list-item"> <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle"> <view class="k原创 2021-04-29 08:34:50 · 983 阅读 · 0 评论 -
微信小程序 动画之一(侧边菜单展开和闭合)
1.效果如下:2,全部代码1.jsPage({ data: { choose: false, animationData: {}, stopBtn: true, //动画未执行完之前禁用按钮 }, showContent: function (e) { var that = this; // 创建一个动画实例 var animation = wx.createAnimation({ duration: 500, //原创 2020-10-28 15:56:28 · 1116 阅读 · 0 评论 -
微信小程序 swiper无限循环
.swiper-item { width: 100%; display: flex; align-items: center; justify-content: space-evenly;}.swiper-item-box { width: 90%; height: 430rpx; border-radius: 10rpx; border: 1px solid #eee; padding: 2rpx; box-sizing: border-box;}.swi.原创 2021-07-09 15:45:39 · 1389 阅读 · 0 评论 -
微信小程序-web-view组件
微信小程序-web-view组件1.web-view组件的使用?2.cover-view组件的使用?3.实现需求(在web-view组件上面添加按钮,实现分享、拨打电话功能)1.web-view组件的使用?每个页面只能有一个web-view组件,web-view组件会铺满整个屏幕,并且覆盖其他组件;web-view,个人类小程序暂不支持;2.cover-view组件的使用?覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-play原创 2020-09-24 13:20:24 · 1961 阅读 · 3 评论 -
微信小程序中使用canvas 绘制文本时,如何实现位置不改变,文字长度动态改变?
微信小程序中使用canvas 绘制文本时,如何实现位置不改变,文字长度动态改变?原创 2020-12-26 09:26:20 · 983 阅读 · 0 评论 -
微信小程序返回顶部效果
作者:你管我管你疯啊代码直接贴出来,以便于大家的使用,html图片自行替换 html: <view bindtap="goTop" class="widget-goTop" hidden='{{!floorstatus}}'> <image src="../../image/back.png" class="bac-img"></image> &...原创 2020-03-13 15:41:07 · 125 阅读 · 0 评论 -
微信小程序 在IOS 系统中,语音只能播放一次,第二次播放没有声音。
微信小程序 在IOS 系统中,语音只能播放一次,第二次播放没有声音。解决办法:1 在语音文件路径url+Date.now(),代码如下:const innerAudioContext = wx.createInnerAudioContext()//播放声音 play: function () { innerAudioContext.autoplay = true innerAudioContext.src = this.data.filePath + '?'+Date.now()原创 2020-09-24 13:32:17 · 1246 阅读 · 0 评论 -
flex 实现上下固定中间可以滚动布局
.boxs { display: flex; height: 100%; flex-direction: column}.footer,.nave { width: 100%; height: 50px; text-align: center; line-height: 50px; background-color: #999;}.intro { flex: 1; background-color:#fff; overflow: scroll;}原创 2021-09-23 17:07:17 · 367 阅读 · 0 评论 -
微信小程序(将临时图片文件转为base64)
1.获取图片临时文件地址 obj.url;2.获取唯一的全局文件管理器 wx.getFileSystemManager().;3.转为哪一类型 encoding=“base64”;wx.getFileSystemManager().readFileSync(obj.url, “base64”)4.更多详细请参考https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.readFileSync.htm原创 2021-05-25 14:43:26 · 1609 阅读 · 1 评论 -
微信小程序组件中(获取元素节点信息)
wx.createSelectorQuery().in(that).selectAll('.tag-box-wrap').boundingClientRect(function (rect) { that.setData({ tagHeight3: rect[0] &&rect[0].height , }) }).exec()*不添加 .in(that) rect[0].height返回的永远是null重点:将选择器的选.原创 2021-07-16 14:58:17 · 1807 阅读 · 0 评论 -
微信小程序 flex布局
.box { padding:20rpx 30rpx; box-sizing: border-box; height: 240rpx; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}.item { background-color: #ccc; width: 200rpx; height: 200rpx; text-align: cen.原创 2021-07-12 14:25:10 · 112 阅读 · 0 评论 -
微信小程序 头像裁剪功能
下载文件所需文件 https://github.com/we-plugin/we-cropper找到对应文件,并导入小程序中文件中核心模块4. 页面中使用//wxml<import src="../../we-cropper/we-cropper.wxml"/> // 导入模板<view class="cropper-wrapper"> <template is="we-cropper" data="{{...cropperOpt.原创 2021-04-12 20:41:22 · 1070 阅读 · 0 评论 -
微信小程序 (横向滚动Tab切换选项卡,使用scroll-view和swiper实现)
思路1.写基础布局2.获取屏幕宽度,计算每个tab的宽度(var singleNavWidth = this.data.windowWidth / 5)3.tab选项居中 ,每次移动距离(navScrollLeft: (cur - 2) * singleNavWidth);4.swiper 高度设置为(100vh)<scroll-view scroll-x enable-flex class="nav" scroll-left="{{navScrollLeft}}" scroll-wi.原创 2021-07-12 14:21:22 · 1615 阅读 · 0 评论 -
微信小程序 解决时间只显示年月日的问题(手机端显示NAN-NAN-NAN)
const iosTime=(date)=>{ date = new Date(date.replace(/-/g, "/")); let year = date.getFullYear(); let month = (date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1); let day = (date.getDate())<10?'0'+(date.getDate()):(date原创 2021-07-09 09:47:31 · 1363 阅读 · 0 评论 -
微信小程序 图片裁剪(兼容性最强)
思路点击上传图片,调用api wx.chooseImage() 获取到图片的本地临时文件路径列表将获取的图片地址传入组件中,进行比例裁剪获取裁剪之后的图片,上传到真实的资源地址流程:1.下载组件(image-cropper) 详细操作步骤以及实现各种效果链接: https://github.com/1977474741/image-cropper.2. "usingComponents": { "image-cropper": "../component/im.原创 2021-04-28 10:29:52 · 3560 阅读 · 0 评论 -
微信小程序---生成二维码插件
详细文档:https://github.com/yingye/weapp-qrcodewxml:<view style="width:100%;text-align:center;margin:50% auto;"> <view style="margin:10px auto;">小程序生成码</view> <canvas style="width: 200px; height: 200px;margin:0 auto;" canvas-id="myQr转载 2020-11-02 10:35:24 · 1031 阅读 · 0 评论 -
微信小程序使用(moment.js)
1.微信小程序 使用moment.js;2.搭建项目。进入项目根目录执行 npm init npm install npm install moment --save3.勾选开发工具的 构建npm4.点击工具 构建npm5.页面中使用import moment from ‘moment’;(此时需要点击工具 构建npm)let sFromNowText = moment(new Date()).format(‘YYYY年M月DD日 HH:mm:ss’)...原创 2021-07-09 09:43:21 · 6960 阅读 · 0 评论 -
微信小程序 压缩图片并上传
直接上代码<view bindtap='uploadImg'>上传</view><canvas style="width: {{cw}}px; height: {{ch}}px;" canvas-id="firstCanvas"></canvas><button bindtap="seeImg">预览</button>const app = getApp()Page({ data: { uploadPic:.原创 2021-06-19 09:13:36 · 1192 阅读 · 1 评论 -
微信小程序之----语音录制功能
完整代码,请耐心读者耐心看注意首先创建录音对象const recorderManager = wx.getRecorderManager()const innerAudioContext = wx.createInnerAudioContext()录音功能,授权与拒绝授权的逻辑处理 wx.authorize({ scope: 'scope.record', success() { that.stratRecordAudio() },原创 2020-11-06 15:16:05 · 2083 阅读 · 0 评论 -
微信小程序 实现微信支付界面效果
效果图代码片段.setMoney-wrap-top { padding: 68rpx 60rpx; box-sizing: border-box; background-color: #ffffff;}.collection-title { color: #333333; font-size: 28rpx; padding-bottom: 30rpx;}.money-danwie { font-size: 80rpx; font-weight: bo.原创 2021-03-23 15:51:49 · 3601 阅读 · 0 评论 -
微信小程序 跳转到目标页面,滚动到最底部
创建一个元素<view id='time-mo'></view>创建一个方法 链接: (https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html). //详细说明 wx.createSelectorQuery() //创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内 .select('#time-mo') //.原创 2021-03-23 11:50:34 · 994 阅读 · 0 评论 -
微信小程序 share-element page-container 组件的使用
js 逻辑层处理 data: { list: [{ id: 20, info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是' }, { id: 21, info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是' }, { id: 22, inf.原创 2021-06-10 11:14:26 · 4397 阅读 · 0 评论 -
微信小程序之----视频上传
1. 选择视频 (wx.chooseVideo()的使用方法)官网链接地址: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html.2. 上传视频大小限制处理 if (res.size > 1024 * 1024 * 10) { wx.showToast({ title: "上传视频不能超过10M!", icon: 'non原创 2020-11-06 15:31:18 · 3235 阅读 · 0 评论 -
微信小程序 自定义组件(使用以及传值)
根目录新建components 文件夹在components文件中创建 hedader footer 文件(对应四个文件)页面中引入 “usingComponents”:{ 输入组件路径 } Hedder 或footer页面中显示组件组件之间通信组件中使用插槽slot组件中(启用多slot支持)1.前面的1、2、3、4 就不详细说了,相信这是基础操作5.组件之间通信详细地址可以参考 微信官方文档链接: https://developers.weixin.qq.com/mini.原创 2021-05-13 11:48:20 · 272 阅读 · 0 评论 -
微信小程序 数字文本在ios上的表现和安卓不一致
font-family: -apple-system,Helvetica,sans-serif;font-feature-settings:“tnum” 1;原创 2021-08-25 10:57:23 · 535 阅读 · 0 评论 -
scroll-view实现滑动效果
.box { width: 100%; display: flex; align-items: center; justify-content: space-between;}.bannerWrap { width: 85%; height: 240px; flex-direction: column; display: -webkit-box;}.imgItem { height: 240px; margin-right: 10rpx;}.left.原创 2021-09-23 17:01:19 · 348 阅读 · 0 评论 -
微信小程序 导航横向滚动
actionList:[ {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'}, {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'}, {name:.原创 2021-04-23 07:55:58 · 231 阅读 · 0 评论 -
微信小程序--图片左右滑动
css.bannerWrap { width: 100%; padding:5px; box-sizing: border-box; height: 160px; display: flex; flex-direction: column; display: -webkit-box;}.imgItem{ width: 100%; padding-right: 10px;}.imgSize { width: 100%; height: 160px;}原创 2020-12-18 17:21:43 · 1118 阅读 · 1 评论 -
微信小程序 富文本解析利器(mp-html 兼容性最好的)
一.在项目中构建npm详细地址:https://jin-yufeng.gitee.io/mp-html/#/1.在项目根目录 打开命令窗口(执行npm init)2.再npm install3.最后npm install mp-html二.在小程序 配置中 勾选npm配置 点击工具栏开始构建npm三.使用mp-html// 引入组件1.{ "usingComponents": { "mp-html": "mp-html" } }// 使用组件2.<mp-html content=原创 2021-09-09 17:29:57 · 1277 阅读 · 0 评论 -
微信小程序 锚点定位案例
菜单和列表都 使用scroll-view组件通过下标 动态绑定元素添加点击事件 实现切换效果效果如下:<!--导航滚动 --><scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true"> <text bindtap="getStatus" id="NAV{{index}}" cl.原创 2021-03-23 14:14:04 · 526 阅读 · 0 评论 -
微信小程序之----图片上传、删除功能(单张、多张)
1.上传多张图片 //上传图片 uploadImg(){ var imgs=[] //图片介绍数据 wx.chooseImage({ count:9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { let tempFilePaths=res.tempFilePaths //选择的图片列表原创 2020-11-06 15:46:03 · 1116 阅读 · 2 评论 -
微信小程序--animate.css
地址:https://github.com/animate-css/animate.css/blob/main/animate.css1.将下载的文件放入小程序根目录utils文件夹下//在app.wxss下引用@import "/utils/animate.wxss";2.修改animate.wxss:root修改为page3.使用<view class="animate__animated animate__bounce">效果展示</view>4.复制动画原创 2021-10-09 16:50:16 · 144 阅读 · 0 评论 -
微信小程序 swiper组件中图片显示问题
1.swiper 有默认高度150px2.image 的默认高度是320px 240px3.计算显示图片的宽高比为 2.34.把图片的宽高比例 写为swiper标签样式5.swiper-item默认宽高都是100%6.swiper的高度为height:calc(750rpx/2.3) image的height为100%(全局样式先重置image标签的默认样式 width:100%;display:block;)...原创 2021-05-21 21:05:34 · 731 阅读 · 0 评论 -
微信小程序 分享功能(先获取分享内容,再实现分享)
存在问题:1.不想进入界面就直接调接口提前获取分享内容;(后台需要合成分享图片,需要耗时);2.请求是异步操作,无法同步实现效果:1.点击分享时,再调接口获取分享内容;解决思路: onShareAppMessage: function () { return getCardShareInfo(getApp().globalData.userId).then(res => { return { title: res.data.shareSummar.原创 2020-12-11 10:22:50 · 2099 阅读 · 2 评论