
小程序笔记
玩烂小程序
写程序前先写DEMO
展开
-
小程序笔记—image中如何显示一张图片的指定部分
image中可以调整mode属性来调整图片要显示的上、中、下、左、右等各个区域,但是在使用过程中并不能精确指定,比如要实现如下效果:怎么办呢?就是在一整张表情中根据点击显示点击区域的表情。体验:上代码,一看就会:.emoji { background: url('https://6e598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c29...原创 2020-03-08 20:26:15 · 2972 阅读 · 0 评论 -
小程序笔记—手指画一条线,如何判断自相交
在小程序canvas上画一条曲线,如何才能知道这条曲线是否自相交呢?焦点又在哪呢?因为项目需要,不得已问出这样一个问题?本来以为很简单,可是好难啊?实现效果:体验:分析:1、这条曲线是由touchmove所返回的点通过连接绘制而成的2、也就是这条曲线是由好多条短短的线段组成的3、如果能判断任意两条线段是否有交点,就表明曲线相交了,线段的焦点也就是曲线的焦点4、判断两条线段是否有交...原创 2020-03-07 10:59:55 · 1319 阅读 · 0 评论 -
小程序笔记—动画的同步执行与异步执行
小程序动画执行的顺序关键点在于step,即动画执行步骤:动画使用 <image style="width:80rpx;height:80rpx;" src="./float.png" bindtap="showAnimate" animation="{{animation}}"></image>异步执行,即一起执行showAnimate(e) { var ...原创 2020-02-28 13:20:36 · 600 阅读 · 0 评论 -
云函数(nodejs)中Buffer、ArrayBuffer、DataView互相转化
我们都知道小程序云函数是基于nodejs开发,小程序前端是基于es开发,所以前端有ArrayBuffer这个类型,却没有Buffer这个类型,这样使用时很不方便,例如非法图片鉴定imgSecCheck这个api就需要Buffer参数调用,所以其中一个思路就是可以将前端获取到的ArrayBuffer传递给云函数,再转化成Buffer,另一种思路可以参考小程序imgSecChec云函数调用这篇文章,因...原创 2020-02-19 09:40:02 · 1548 阅读 · 0 评论 -
小程序笔记—ArrayBuffer、base64、url互转
小程序中经常会返回ArrayBuffer类型的数据,如获取小程序码时就返回如下数据:乍一接收到,有些懵逼,但仔细想想图片无外乎是去展示的,image展示主要可以用base64格式或者url格式,那就需要把接收到buffer转化为base64或者url。buffer转base64:that.setData({ imgBase64: wx.arrayBufferToBase64(res....原创 2020-02-18 15:58:05 · 9997 阅读 · 3 评论 -
小程序云函数输出的日志在哪儿?有两种方式
使用云函数时,发现其中调试的日志并不能在Console面板中输出,这就带来很大的不便!云函数中日志输出查看位置:小程序开发工具>>云开发>>云函数>>日志或者高级日志小程序Demo尽在Demo集中营...原创 2020-02-18 09:36:25 · 4599 阅读 · 0 评论 -
100个微信官方小程序片段
音乐播放列表渲染组件模板组件:host选择器组件styleIsolation样式隔离wxs响应事件—movable、右滑显示左侧侧边栏、滚动菜单栏贴顶、跟随swiper的图片切换效果界面动画的常见方式关键帧动画滚动驱动的动画外部样式类组件间触发事件组件间触发事件的选项组件中使用behaviors组件中使用内置 behaviors: ['wx://form-field']...原创 2020-02-17 14:50:33 · 938 阅读 · 1 评论 -
小程序笔记—抽离公共样式,@import导入common.js
此前有两篇文章分别介绍了js的公共函数抽离、wxml的公共布局抽离,可直接点击查看:小程序笔记—模块化,抽离公共函数,common.js小程序笔记—wxml布局文件的模板,使用template抽离公共布局本篇文章开始介绍wxss的公共样式抽离,也可以叫外联样式,其实都非常简单,但对于精简代码却又非常重要,所以不差这一篇。//文件common.js.view-row{ width:10...原创 2020-02-16 15:09:32 · 1112 阅读 · 0 评论 -
小程序允许被打包上传的15种文件
wxs:小程序的一套脚本语言,结合 WXML,可以构建出页面的结构png:图片格式jpg:图片格式jpeg:图片格式gif:动图格式svg:可缩放的矢量图形格式json:配置文件cer:证书格式mp3:音频格式aac:音频格式m4a:音频格式mp4:视频格式wav:音频格式ogg:音频格式silk:音频格式——录音文件...原创 2020-02-16 10:15:51 · 897 阅读 · 0 评论 -
通过小程序性能体验报告,我们早知道小程序开发过程中应该注意哪些问题
体检项详情1.启动性能: 待优化描述:根据近期小程序的启动耗时、打开率等数据综合评估建议:减少代码包体积(如使用分包、独立分包),提高启动性能。 查看加载性能监控2.页面加载性能: 性能良好描述:根据近期小程序的页面加载耗时数据评估3.JS接口性能: 性能良好描述:根据近期小程序的JS接口错误数等数据综合评估4.网络性能: 待优化描述:根据近期小程序的网络请求成功率、请求耗时...原创 2020-02-16 09:26:12 · 1466 阅读 · 0 评论 -
小程序笔记—性能测试下的定时器:setTimeout与setInterval
小程序中有两个定时器:setTimeout与setIntervalsetTimeout:可延时回调setInterval:可定时循环回调第一次这样使用:setTimeout(function(){ console.log("延时1秒回调")},1000)setInterval(function(){ console.log("每隔2秒回调一次")},2000)但性能测试...原创 2020-02-15 10:52:31 · 823 阅读 · 0 评论 -
小程序笔记—wxml布局文件的模板,使用template抽离公共布局
在上一篇[小程序笔记—模块化,抽离公共函数,common.js](https://blog.youkuaiyun.com/WeiHan_Seven/article/details/104295663)文章中,我们了解到一些公共的函数可以抽离到统一的模块中,那么这篇我们就来看一下wxml中一些公共布局如何抽离。原创 2020-02-14 22:05:35 · 623 阅读 · 0 评论 -
小程序笔记—wxml中的条件逻辑渲染
单条件显示隐藏<view wx:if="{{isShow}}"> True </view>多条件显示隐藏<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 3}}"> 2 </view><view wx:elif="{{...原创 2020-02-14 21:25:18 · 383 阅读 · 0 评论 -
小程序笔记—亲测小程序实时日志功能,远程监控小程序日志
调试小程序最常用的就是console.log了,但是小程序上线后,如果出了问题,尤其一些bug很难复现,这是开发经常会遇到的问题,好在小程序提供了实时日志功能,简单点就是通过调用api输出日志,微信客户端会定时打包上报这些日志,方便远程定位问题。使用方式第一步:新建log.js模块化文件var log = wx.getRealtimeLogManager ? wx.getRealtimeLo...原创 2020-02-14 16:16:03 · 4196 阅读 · 0 评论 -
小程序笔记—模块化,抽离公共函数,common.js
前言模块化这个词总是觉得不够形象,其实我觉得公共类更容易理解,就是把一些很多页面或地方都会用到的方法抽离到一个js文件中,用到的地方可直接获取一个该类的对象,再去调用其中的方法。如何使用使用起来很简单,可以在小程序内任意目录下新建js文件,然后将用到的方法抽离进到文件,接下来再把该方法暴漏出去就可以使用了。如下:1、新建common.js2、抽离的方法放至进去并暴漏//抽离的公共方法...原创 2020-02-13 14:53:10 · 865 阅读 · 0 评论 -
小程序笔记—回调函数(typeof cb == "function" && cb(obj)),success、fail、complete方法是怎么写出来的
先看使用回调函数的代码: this.testCallmethod({ type:0, success:function(res){ console.log(res) }, fail:function(e){ console.log(e) }, complete: function(res) ...原创 2020-02-13 10:06:34 · 1813 阅读 · 0 评论 -
小程序笔记—下拉刷新三个点
小程序下拉刷新可以自带三个点,但并不能自动显示出来,原因有两点:一是因为enablePullDownRefresh默认为false二是因为点的颜色默认为白色与背景颜色重叠如图:若要显示并使用,需要在配置文件window内添加"backgroundColor":"#ed3ed3", //window背景颜色"backgroundTextStyle": "light", //三个点的颜色,...原创 2020-02-12 14:54:00 · 2667 阅读 · 0 评论 -
小程序方法—正则表达式校验十六进制与十六进制色值
是否十六进制,如edcB123返回true,arq123返回falseisHex(str) { var reg = /^[A-Fa-f0-9]+$/ return reg.test(str)}是否十六进制色值,如#ed2Faa返回true,arq123返回falseisHexColor(str){ var reg = /^#[A-Fa-f0-9]{6}$/ ...原创 2020-02-11 10:18:56 · 928 阅读 · 0 评论 -
小程序笔记—一个view覆盖另一view的两种方式
flex布局是不同的弹性项目占用弹性盒子的x/y两个方向的空间,但是在经常会遇到需要一个view覆盖另一个view的场景,这时候怎么办呢?现有两种方式处理,总结如下。原创 2020-01-20 12:17:46 · 6539 阅读 · 0 评论 -
小程序笔记—横向scrollview失效解决方案
最近使用横向scrollview,发现失效,究其原因是因为包含内容使用了flex布局,这很好理解,一个弹性的容器内包含了弹性盒子,该怎么弹?原创 2020-01-17 21:57:09 · 804 阅读 · 0 评论