小程序
爱吃鱼的宇
冲冲冲
展开
-
9.小程序时间戳转化日期过滤器(wxs)
一般后台给时间数据是给时间戳留给前端自己转,而小程序页面展示又可能会有很多种例:2020年12月、2020.12、2020-12、2020.12.12.8.08为了方便转化这里封装一个js方法到小程序的wxs过滤器里面1.time.wxs//timestamp给默认时间 YYYY/MM/dd hh:mm:ss 为默认时间格式 中间字符都可以替换var dateFormat = function (timestamp = 1598255706000, format) { if (!format)原创 2021-08-24 16:13:13 · 563 阅读 · 0 评论 -
8.小程序简单吸顶效果
之前有个小程序项目需要做一个导航栏吸顶的需求个人理解:主要通过小程序方法onPageScroll(页面滚动事件)来做,当滚动距离顶部高度大于设定高度的时候显示固定定位的导航栏记录一下1.先要计算出页面滚动条滚动到哪里才弹出导航栏wx.createSelectorQuery()文档链接地址 onLoad: function (options) { let that = this; //获取屏幕高度 预留胶囊高度 //wx.createSelectorQuery()返回一个获原创 2021-08-24 15:47:14 · 1065 阅读 · 0 评论 -
7.微信小程序做按比例截取图片
项目需求是需要做一个上传图片按1:1,16:9 ,3:4一个图片截取,网上查了好久,找到一个cropper截取组件 ,现在把接入以及修改步骤记录一下截取组件原地址找不到了,贴一下代码吧(谢谢大佬分享了!!!)wxml<view class="wx-cropper-info" wx:if="{{isShowCropper}}"> <view class='cropper-content'> <view class="wx-corpper" style原创 2021-08-24 11:55:45 · 1423 阅读 · 2 评论 -
6.关于小程序单图多图上传以及压缩
小程序图片上传:上传图片 wx.uploadFile()文档地址小程序压缩图片可以使用小程序自己的压缩,但是好像只能压缩JPG文件(可以通过限制文件后缀来进行压缩),网上大多都是canvas压缩,这里也是canvas压缩。小程序用户发布信息上传文件需要过一遍安全接口,一般在选择完图片去检验1.单图上传带压缩//选择图片 个人最近做的图片上传 choiceImage() { let that = this; wx.chooseImage({ count: 1, //最多上传选择几原创 2021-08-23 17:27:30 · 1027 阅读 · 0 评论 -
5.关于小程序组件方面
小程序组件和VUE组件类似,闲来得空还是总结一下1.创建组件及引入(1).先建一个comcoponents文件夹(2).comcoponents文件夹下创建一个组件(如下图)(3).在页面的.json文件下引入{ "usingComponents": { "showmodel-wx":"/components/showmodel-wx/index" }}//wxml文件内使用<showmodel-wx> </showmodel-wx>1.组件传值原创 2021-08-23 10:26:42 · 81 阅读 · 0 评论 -
4.js节流、防抖以及小程序内应用
1.防抖:(1).需要监控频繁触发的事件,例如许多网站上的返回顶部按钮,这个需求就是监控浏览器滚动事件,距离顶部高度大于一定高度的时候才会显示出返回顶部按钮,如果要结合后台接口来记录用户行为(看了哪些文章,停留了多久等),但是滚动条滚动事件会非常频繁触发,就会一直请求接口。这种情况下就需要对事件做防抖了。(2).定义:对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限内,事件处理函数只执行一次。(3).话不多说,直接上代码 /* * fn [function] 需要防原创 2021-08-21 14:27:21 · 194 阅读 · 0 评论 -
3.关于微信小程序地理位置方面的问题以及解决方案
1.如何获取用户地理位置的授权,以及如何在用户拒绝授权后进行二次设置授权因为需求是页面需要获取经纬度以及地理位置所以第一次授权放onLoadwx.getLocation({ type: 'wgs84', success(res) { let latitude = res.latitude let longitude = res.longitude that.setData({ latitude ,原创 2021-08-20 17:14:04 · 2164 阅读 · 0 评论 -
2.小程序封装请求及使用(基础版)
1.先在小程序app.js设置一个全局data用于存放接口地址globalData: {apiHost:'https://www/xxx/xxx/'}2.在utils包里面建一个request.js文件用于封装各类请求(1).获取全局变量(接口地址)const app = getApp();var serverUrl = app.globalData.apiHost;let flag = true; //flage是判断用户是否登录以及token过期后再次登录的参数(2).封装请求头原创 2021-08-20 16:14:01 · 497 阅读 · 1 评论 -
1.解决小程序遮罩层遮住页面后滚动穿透问题
小程序遮罩层遮住页面后滚动穿透问题分为两种情况:1.蒙层mask没有滚动事件的情况可以在mask这个view上直接添加事件catchtouchmove="ture"来防止滚动或者写一个方法也可以代码如下: <view class="mask" wx:if="{{showModelcontact}}" catchtouchmove="prevent"></view> <!-- js --> prevent:function(){}2.如果原创 2021-08-20 15:58:58 · 8381 阅读 · 1 评论