小程序
关注
分享
扫一扫
文章平均质量分 61
一天一天积累
这个作者很懒，什么都没留下…
展开
-
小程序camera组件设置前前置摄像头无效
定位到低端机上使用resolution="high"时会出现无法使用前置摄像头的问题，低端机可以先将resolution值设为medium来过渡一段时间<camerawx:if="{{cameraStatus}}"class='camera'style="width:100%;height:{{caremaHeight}}px;"device-position="front"flash="off"binderror="error"resolution='medium'><...原创 2021-04-26 14:12:38 · 1960 阅读 · 0 评论 -
webview内嵌h5怎么跳转到指定的小程序界面
先引入微信sdk：https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6<script type="text/javascript" src="/js/jweixin-1.3.2.js"></script&原创 2020-11-23 17:40:19 · 3454 阅读 · 4 评论 -
小程序webview内嵌H5
html部分：<web-viewsrc="{{url}}"></web-view>js部分： /** * 页面的初始数据 */ data: { url:'', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; console.info("options",options) let id = opt.原创 2020-11-23 15:05:41 · 788 阅读 · 0 评论 -
小程序 摄像头二次授权
html：<camerawx:if="{{cameraStatus}}"class='camera'style="width:100%;height:{{caremaHeight}}px;"device-position="front"flash="off"binderror="error"></camera><!-- start 拒绝授权 --><view class="mask {{openSetingStatus}}"> &...原创 2020-11-19 11:41:03 · 1702 阅读 · 0 评论 -
小程序canvas多行文本（可以兼容英文）
效果图：/***【drawTxt】canvas绘制多行文本*【TODO:中英混排且考虑单词截断...】**@param{*}context绘制上下文环境【必传】*@param{*}text文本内容*@param{*}broken单词是否截断显示【true如果不考虑英文单词的完整性适用于所有情况】【false考虑英文单词的完整性仅适用于纯英文】*@param{*}fillStyle文本颜色...原创 2020-10-10 18:03:19 · 352 阅读 · 0 评论 -
小程序自定义导航栏
记录下大神写的导航栏组件源自：https://juejin.im/post/5d557e2e5188255af1619716小程序改组件的下载链接：https://github.com/lingxiaoyi/miniprograms-navigation-bar原创 2020-07-01 15:30:15 · 244 阅读 · 0 评论 -
小程序实现瀑布流（无tab）
效果图：html部分：<!--pages/waterfall/waterfall.wxml--><block wx:for="{{imagesList}}"><image src='{{item.pic}}' data-id='{{item.id}}' class='hide' bindload='reserveimg'></image></block><scroll-view style="height:{{sc原创 2020-06-11 17:17:15 · 849 阅读 · 6 评论 -
小程序实现标尺滑动
效果图：html部分：<!--pages/test-rules/test-rules.wxml--><view><view class="ageCon"><view class="title">年龄</view><view class="ageOut"><view class="hr"&g...原创 2019-10-28 15:37:20 · 1730 阅读 · 1 评论 -
小程序富文本WxParse插件
参考https://blog.youkuaiyun.com/loveyoulouyou/article/details/83413628下载WxParse插件，插件地址https://github.com/icindy/wxParsecss部分：@import "../../utils/wxParse/wxParse.wxss";html部分：<import src="../../u...原创 2019-09-09 15:58:28 · 410 阅读 · 0 评论 -
小程序canvas画虚线圆
效果：封装：/*** 画虚线园* cxt_arc 画布* thex 画的x坐标* they 画的y坐标* raduis 圆半径* space 虚线的间隔 默认值 2 * Math.PI / 100 即一百空白点*/drawDashCircle: function (cxt_arc, thex, they, raduis, space) {space ...原创 2019-07-09 09:59:01 · 1993 阅读 · 2 评论 -
小程序 获取页面滚动的高度
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐...原创 2019-05-27 16:33:12 · 8978 阅读 · 1 评论 -
小程序input输入框键盘弹出使得布局上移问题
注意点：1.style='bottom:{{inputBottom}}px'单位用px2.input的 adjust-position='{{false}}'要用falsehtml部分：<!-- start 输入框 --><view class='inputBottom' style='bottom:{{inputBottom}}px'><in...原创 2019-04-28 15:40:02 · 13635 阅读 · 1 评论 -
小程序canvas多行文字
效果：使用：var that = this;const ctx = wx.createCanvasContext('savePic');varcolorText = '肤色晶莹白皙，肤质细腻有透明感，适合搭配一些颜色明亮、轻快一点的色彩，营造轻盈感。';that.draw_long_text(colorText, ctx, 46, 1271);封装：//ca...原创 2019-04-11 15:24:27 · 854 阅读 · 1 评论 -
小程序多张图片下载问题
再网上找了小程序如何保存多张图片的方法，方法是for循环，配合使用回调函数callback，没有领悟到精髓，于是换了一种方式去实现，手机测试可以依次保存全部的图片。思路：使用wx.downloadFile()获取图片临时路径，wx.saveImageToPhotosAlbum()将改临时路径保存到手机相册。如果保存成功，就i++调用dow_temp(i++),如果失败就继续dow_temp...原创 2019-03-12 11:28:52 · 4850 阅读 · 2 评论 -
微信小程序图片实现宽度100%，高度自适应
图片设置宽度.img{width:100%;}给image增加属性mode="widthFix"<image class="img" src="/../../images/welcome.png" mode="widthFix">mode详解：mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。模式 值 说明 缩...原创 2019-03-07 20:46:36 · 10331 阅读 · 1 评论 -
小程序实现图片垂直居中，水平居中并且自适应宽高
效果如下图：html部分：<view class='imgCon'><image src='{{goods.goodsPhotoUrl}}' bindload='imgLoad' style='width:{{width}}rpx;height:{{height}}rpx;' ></image><!-- 改动态对应的商品图 -->...原创 2019-02-21 11:19:20 · 5204 阅读 · 0 评论 -
微信小程序图片裁剪
插件下载网站https://github.com/dlhandsome/we-cropper在wxml页面添加<!--start 用户自动截取正方形照片 --><template name="we-cropper"> <canvas class="cropper {{cutImage}}" disable-scr...原创 2018-02-22 11:21:08 · 29809 阅读 · 24 评论 -
微信小程序圆形进度条倒计时效果
效果如下图：var initNum = 7; //倒计时数var spaceNum = 1000; //文字倒计时间隔var space =1000; //环倒计时间隔一、封装canvas画圆环 begin: - (1 / 2 * Math.PI), pai2: 2 * Math.PI, //canvas画圆环 drawRang: function (precent) { var w...原创 2018-02-22 14:44:22 · 6440 阅读 · 4 评论 -
canvas画圆形图片
效果图：实现环境在微信小程序中参考网站https://www.jianshu.com/p/9a6ee2648d6f先封装circleImg（）方法 circleImg: function (ctx, img, x, y, r){ ctx.save(); var d = 2 * r; var cx = x + r; var cy = y + r; ctx.beginP...原创 2018-05-02 17:49:04 · 7925 阅读 · 0 评论 -
小程序文字变化动画
小程序中要求几处文案一直变化，并在最后固定一个文案，一开始想使用多个setInterval来控制这几处文案，但是发现多线程总是出问题，现在改成了一个线程来控制这几处文案的变化效果图：wxml文件： <view class='detailTopTextCon'> <label class='detailTopText detailTopText1 detailTop...原创 2018-05-03 16:02:51 · 4003 阅读 · 0 评论 -
小程序 canvas旋转文字
效果如下图：js部分： //canvas画图片 savedetailCanvas: function () { //['消费者', '知性', '形象力', '形象力', '靓丽', '逛街中', '魅力四射', '小姐姐'] var that = this; const ctx = wx.createCanvasContext('savePic'); ctx.draw...原创 2018-07-02 11:02:37 · 9652 阅读 · 0 评论 -
小程序手机兼容问题
在小程序中直接使用媒体查询功能是不起作用的，即@media screen and (max-device-width:320px) and (max-device-height:568px){ .fashiontribeListBtn{ font-size: 18rpx; }}如果要针对iphone x做css兼容需要使用js //iphonex下的css兼容 w...原创 2018-07-02 12:02:18 · 3049 阅读 · 0 评论 -
下程序input框letter-spacing失效，模拟实现
要实现这样的效果，但是input下的letter-spacing不起作用，只能模拟实现。参考文章https://blog.youkuaiyun.com/luoyumeiluoyumei/article/details/81509694 html部分：<!--此处input要隐藏起来 --><input type='number' class='codeInput' p...原创 2018-08-21 15:23:39 · 1585 阅读 · 0 评论 -
小程序自定义相机
1.要求相机是圆形的，因为小程序调用原生相机，永远在屏幕最顶层，只能在camera标签里使用cover-view和cover-image标签，用一张图片盖在相机上，效果如下图：<!-- 调用摄像头的组件--><view class='cameraBox' ><camera class='camera' device-position="front" f...原创 2018-10-29 17:39:05 · 7385 阅读 · 3 评论 -
小程序知识点总结
小程序组成部分： 一个入口文件：app.js 一个全局样式：app.wxss 一个全局配置：app.json 页面：pages下，每个页面再按文件夹划分，每个页面4个文件 视图：wxml，wxss 逻辑：js，json（页面配置，不是必须）小程序原理和加载运行的过程：小程序其实就是微信定制化的h5页面，规定了页面可以使用的标签，单位rpx，并且微信app提供一些开放的api接口。...原创 2018-11-23 10:54:35 · 1204 阅读 · 0 评论 -
wx-charts图表滑动功能
插件下载地址已经api文档https://github.com/xiaolin3303/wx-charts要实现滑动页面部分需要绑定这三个事件bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"<canvas canvas-id='areacanvas' class='canva...原创 2018-12-12 11:18:24 · 4232 阅读 · 2 评论 -
小程序模仿抖音
效果图： 一开始思路是使用swiper来实现上下滑的效果，并且在swiper-item里嵌套video，但是一直有莫名其妙的问题，后来在小程序API文档里也看到video无法在swiper中使用。转换思路改成监听用户上下滑，view上绑定如下事件bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="t...原创 2019-01-07 11:13:58 · 9575 阅读 · 81 评论 -
小程序流式布局
这只是一个取巧的方式来实现流式布局，有潜在bug，原理是布局分成两列，将要显示的数据也分成奇数列和偶数列，左侧展示偶数列数据，右侧展示奇数列数据。潜在的bug是如果偶数列里的图片高度一直比奇数列的高，就会两列一列特别长的情况。修复此潜在bug的博客链接https://blog.youkuaiyun.com/u012011360/article/details/88051196效果图：htm...原创 2019-02-21 14:18:52 · 3699 阅读 · 2 评论 -
小程序瀑布流
上个写的有潜在bug，这个是修复此bug的。思路：布局依然是两列col1，col2，利用image标签的bindload函数，监听图片加载完成事件，加载完成后，转化改图片宽高，并且判断应该放到col1里还是col2里。并分别记录col1和col2的高度，以便下次判断。效果图：html 部分：<block wx:for="{{imagesList}}"><...原创 2019-03-01 11:03:12 · 1995 阅读 · 4 评论 -
微信小程序雷达图
手机上测试效果：主要参考网站：http://blog.youkuaiyun.com/lecepin/article/details/60466711但是有些地方不适用在小程序上，需要修改以下几点1，函数的修改；比如将ctx.strokeStyle = mColorPolygon;修改为ctx.setStrokeStyle(mColorPolygon);将ctx.fillStyle = mColorText;修...原创 2018-02-26 10:03:08 · 8195 阅读 · 10 评论