![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
阿啦ala
这个作者很懒,什么都没留下…
展开
-
微信小程序实现图片懒加载的方法
使用wx.createIntersectionObserver实现,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html需要展示的列表groupGoodsList,图片是否展示用show 控制wxml:给列表元素添加class:‘other-goods-item-’ + indexjs:.........原创 2022-07-13 14:55:14 · 1806 阅读 · 0 评论 -
微信小程序\n没有换行的解决办法
wxml:使用text标签<text>{{ data }}</text>js:字符串替换data = data.replace(/\\n/g,'\n')原创 2021-09-17 09:06:32 · 894 阅读 · 0 评论 -
小程序处理iphoneX底部黑条
方法一: 根据手机型号添加单独样式wx.getSystemInfo({ success: function(res) { // 根据手机型号匹配 if (res.model.search('iPhone X') != -1 || res.model.search('iPhone Max') != -1 || res.model.search('iPhone 11') != -1 || res.model.search('iPhone 12') != -1) {原创 2021-02-05 17:34:38 · 720 阅读 · 0 评论 -
微信小程序中checkbox多选框和radio单选框的样式修改
多选框样式/*checkbox 选项框大小 */checkbox .wx-checkbox-input { width: 24rpx; height: 24rpx; border: 1rpx solid #B3B3B3; margin-right: 20rpx;}/*checkbox选中后样式 */checkbox .wx-checkbox-input.wx-checkbox-input-checked { border: 1rpx solid #4F71E7; bac原创 2021-02-05 17:00:24 · 518 阅读 · 0 评论 -
uniapp图片自适应显示,不裁剪
先看图:这是长图和方图的显示效果,都可以完全显示出来上代码:html部分:<view class="question-title" style="width: 100%"> <image @load="imageLoad" :style="{'width': images.width + 'px', height: images.height + 'px'}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/原创 2020-11-20 10:12:27 · 4204 阅读 · 0 评论 -
微信小程序换行符↵转义
第一步在js中替换所有字符串content = content ? content.replace(/↵/g, '\n') : ''第二步注意:一定要使用text标签,使用view无效<text>{{ content }}</text>原创 2020-11-02 17:57:02 · 981 阅读 · 0 评论 -
uniapp中onLaunch异步方法与onLoad执行顺序问题(登录获取token等)
问题描述app.vue里的onLaunch中如果有异步方法,比如登录方法,返回结果可能会在页面的 onLoad 之后,为了让页面的 onLoad 在 onLaunch 之后执行,使用以下解决方案1、main.js添加如下代码Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve})2、在 App.vue 的 onLaunch 中增加代码 this.$isResol转载 2020-10-20 13:54:45 · 8787 阅读 · 0 评论 -
微信小程序canvas绘制图片不变形的方法
项目中需要在canvas中绘制图片,图片大小未知已这张图片为例如果直接绘制图片将被压缩根据官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html可以设定这些参数来保证图片不会变形上代码:wxml:<view class="share"> <view style="padding-top: 65px, padding-bottom: 18原创 2020-10-15 10:14:47 · 3082 阅读 · 0 评论 -
微信小程序引导用户授权获取用户信息
微信官方公告:[https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01]现在微信小程序只能通过点击按钮的方式显示获取用户信息的弹框,根据官方文档中的方法,我们可以在按钮上设置open-type,从而获取用户信息但是用户存在拒绝授权的情况,这个时候就只能引导用户打开设置页,如果用户没有打开授权开关,则继续引导用户打开设置页上代码:wxml:<view class='login'原创 2020-09-08 10:44:18 · 879 阅读 · 0 评论 -
微信小程序实现人脸识别认证
这个项目中使用的是阿里云的实人认证接口,需要录制视频上传先说一下逻辑:获取摄像头和录音权限;调起摄像头用于录制视频,录制5s;录制结束后上传视频;取上传返回的视频地址,调用后端提供的人脸识别接口,判断视频中是否含有人脸;通过人脸识别后会返回一个图片地址,调用后端提供的实人认证接口若这个过程中出现错误,则重新录制上传,本项目中失败三次则提示认证失败,可重新识别上代码:wxml:<view class='identification'> <view class='c原创 2020-09-07 14:22:09 · 9304 阅读 · 5 评论 -
微信小程序端签名直传阿里云oss
思路:1、第一步,请求后端接口获取签名(我这里文件名是由后端返回的)2、第二步,将图片上传到阿里云oss新建一份upload.js文件export function fileUpload(path) { // path是图片地址 let _this = this; return new Promise((resolve, reject) => { wx.request({ url: '接口地址', // 请求后端签名 success (res) { // 我原创 2020-08-01 12:01:33 · 897 阅读 · 0 评论 -
微信小程序端生成小程序指定页面的二维码(base64)
微信官方文档中提供了两种方式区别在于有无数量限制注意:1、两种方式都只能生成已发布的小程序的二维码wxacode.createQRCode在开发版的带参二维码可以在开发者工具预览时生成2、页面地址有长度限制,具体可参考官方文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html这里以wxacode.createQRCode为例:首先需要原创 2020-08-01 11:44:14 · 2359 阅读 · 0 评论 -
微信小程序canvas实现文字居中
Canvas 2DonLoad: function () { // 通过 SelectorQuery 获取 Canvas 节点 wx.createSelectorQuery() .select('#canvas') .fields({ node: true, size: true, }) .exec(this.init.bind(this)) }, init(res) { const widt原创 2020-07-04 11:14:29 · 1946 阅读 · 0 评论 -
微信小程序调用摄像头实现拍照
微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/camera.html首先,需要用户授权摄像头权限,这一步是必须的具体步骤:获取用户当前授权状态,看是否已经授权,如果已经授权直接显示摄像头如果用户还没有授权,则调起授权弹框,用户允许授权则显示摄像头如果用户不允许,则提示用户去设置页面打开摄像头权限用户授权之后,就可以进行拍摄了,微信的camera组件无法显示为圆形,我这里是用一张图片遮盖了上代码:w原创 2020-07-03 15:18:52 · 19410 阅读 · 0 评论 -
微信小程序不一样的轮播图(二)
上图:wxml:<swiper class="first" indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" previous-margin="30rpx" next-margin="30rpx" skip-hidden-item-layout="true" bindchange="swiperChange"> <b原创 2020-07-03 10:01:05 · 245 阅读 · 0 评论 -
微信小程序不一样的轮播图(一)
先上图:wxml<swiper class="first" indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" display-multiple-items="5" skip-hidden-item-layout="true" bindchange="swiperChange"> <block wx:for="{{sw原创 2020-07-02 16:35:34 · 299 阅读 · 0 评论 -
微信小程序中常见的几种授权封装(可直接下载使用)
微信小程序中常见的几种授权:代码下载地址:https://download.csdn.net/download/weixin_39152200/12569931压缩包中包含两个文件:authorize.js和md5.js使用方法: 将这两个文件放到utils目录中,在需要使用的页面js文件中引入let authorize = require('../../utils/authorize.js');授权方法调用:1、登录 + 获取openID在authorize.js的login方法中,修原创 2020-07-02 14:50:29 · 1456 阅读 · 0 评论