
小程序
文章平均质量分 74
codeyun.top
来了 老弟
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
微信小程序 性能优化
使用小程序时,是否会经常遇到如下问题?打开是一直白屏打开是loading态,转好几圈我的页面点了怎么跳转这么慢?我的列表怎么越滑越卡?我们优化的方向有哪些?启动加载性能渲染性能启动加载性能首次加载你是否见过小程序首次加载时是这样的图?这张图中的三种状态对应的都是什么呢?小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:下载小程序代码包、加载小程序代码包、初始化小程序首页。下载到的小程序代码包不是.转载 2021-04-14 13:34:54 · 835 阅读 · 1 评论 -
mp-html (小程序富文本组件)
功能介绍支持在多个主流的小程序平台和uni-app中使用 支持丰富的标签(包括table、video、svg等) 支持丰富的事件效果(自动预览图片、链接处理等) 支持设置占位图(加载中、出错时、预览时) 支持锚点跳转、长按复制等丰富功能 支持大部分html实体 丰富的插件(关键词搜索、内容编辑等) 效率高、容错性强且轻量化(≈24.5KB,9KB gzipped)查看功能介绍了解更多使用方法原生平台 npm方式 在项目目录下安装组件包 ...转载 2021-04-10 17:18:18 · 19911 阅读 · 7 评论 -
微信小程序背景加水印 简单版
小程序页面增加水印效果因为所有页面都要加水印,所以肯定是要用自定义组件实现。思考路程第一种最开始考虑的是canvas生成图片,转换成base64做一张背景图,然后才了解到水印不能直接在元素上作为背景作为页面的最底层,很容易被其他东西覆盖,所以水印一定是要要fixed在页面的最顶层。 canvas生成图片,但是要借用其他插件转成base64第二种可以采用DOM元素靠样式实现,也不需要依赖插件,感觉这个更加的不错。于是就代码撸起来,然后每个页面都能有水印...转载 2021-03-27 17:50:34 · 2479 阅读 · 0 评论 -
小程序数字滚动效果
数字 ##效果展示##使用方式 // pages/main/index.jsimport NumberAnimate from "../../utils/NumberAnimate"; // pages/main/index.js let n1 = new NumberAnimate({ from:num1,//开始时的数字 speed:2000,// 总时间 refreshTime:100,// 刷新一次的时间 .转载 2021-03-27 16:57:09 · 597 阅读 · 0 评论 -
微信小程序朋友圈分享图片、海报
在小程序界里,生成图片分享到朋友圈这个功能,是如此得光芒耀眼,以至于各个小程序都趋之若鹜地前来跪倒在她的石榴裙下。不幸的是,微信爸爸并没有提供给我们很好很便捷的相关工具;恰恰相反,屏幕截屏的功能被残忍丢进历史的垃圾桶,只留下一个Canvas组件以及围绕在其周围的深渊巨坑们。所以我们准备了一套名为Painter的工具, 为开发者提供一种简单实用的“绘制”图片的解决思路,让开发者可以自由地生成自己想要的图片文件。github传送门:github.com/Kujiale-Mob…如果直接使用canva转载 2021-03-27 16:25:28 · 3118 阅读 · 0 评论 -
微信小程序学习用demo:数字累加,动态效果
微信小程序-数字累加效果1、wxml代码<!--pages/main/index.wxml--><view class="animate-number"><view class="num num1">{{num1}}{{num1Complete}}</view><view class="num num2">{{num2}}{{num2Complete}}</view><view class="num...转载 2020-12-05 18:00:33 · 3100 阅读 · 0 评论 -
微信小程序图片缓存策略
昨天,后端给我提了一个问题:他更换了CDN上的图片,但是他打开小程序来看,还是旧图片,他尝试过删除小程序,重新进,还是旧图片。我第一反应是:“你有没有清CDN缓存?“他说:”我在阿里云CDN控制台刷新缓存了,都两三天了,还是旧图片。”(后来我看过刷缓存记录,一天前刚刷的,他夸张了。。。)我说:“那不应该呀,CDN刷新缓存,5分钟就生效了。”当即拿出我的手机,进小程序看了一下,是新的图片。他赶紧拿出他的手机给我看,果然,不管试多少次,都是旧图片。我说:”你这个图片是文件名没改,请求地址转载 2020-09-01 11:18:29 · 5604 阅读 · 0 评论 -
微信小程序cover-view的坑
原生组件在真机的表现不同显示层级问题原生组件不支持z-index改变显示层级,后面的标签会在顶层显示iOS cover-view文字显示不出来的问题iOS上部分CSS样式不支持,如果使用了会导致文字显示不出来,可能造成影响的有display: flex;flex-direction: column;justify-content: center;align-items: center;iOS cover-view文字显示半截iOS上计算宽高有问题,解决办法是使用固.转载 2020-06-24 13:43:03 · 1221 阅读 · 0 评论 -
微信小程序使用echarts
官网文档官网有详细介绍,只需要下载组件,引入小程序,再去官网熟悉echarts常用配置就可以了。【demo】import echarts from '../../components/ec-canvas/echarts.js'注意点1:在要使用的页面js先引入,官网好像说漏了这点。不过是这个会包含所有图表,体积会有七百多Kb,导致项目体积过大,可以根据自己使用的功能选择对应图表...原创 2020-05-07 22:35:32 · 1080 阅读 · 1 评论 -
vue和微信小程序的区别、比较
一、生命周期先贴两张图:vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。onLoad: 页面加载 一个页面只会调用一次,可以在onLoad中获取打开当前页面所调用的query参数。 onShow: 页面显示 每次打开页面都会...转载 2020-03-31 23:51:27 · 307 阅读 · 0 评论 -
小程序使用async-await
随着业务的增加,前端需要处理多个非依赖(如:ABC三个接口相互没有关联)或依赖(如:B需要拿到A请求后的参数,C需要拿到B请求后的参数)的接口。大多数可能都是依赖接口,为了更优雅的写代码,我们应该使用什么方式去优化呢?方案:ES5的多层嵌套 ES6的Promise多层then ES7的async-await技术方案:之前选择的是Promise,当我看着越来越多层的then,心中有...转载 2020-01-10 17:44:15 · 533 阅读 · 0 评论 -
微信小程序绑定银行卡功能
https://github.com/ZBK1nger/bankCard-wechat如上图所示,基本的页面就是这样,在这主要有这么几个点验证手机号的正确(手机号位数,正则判断手机号格式) 输入银行卡号后在卡类型下自动匹配成当前银行卡所属银行以及卡类型(如中国建设银行储蓄卡) 点击提交像服务器提交数据时进行判断(比如收款人姓名填没填写,银行卡号填没填写等等)这里主要说下说下...转载 2019-12-30 00:30:50 · 8190 阅读 · 0 评论 -
小程序裁剪图片上传
本篇博客用于解决微信小程序图片裁剪问题图片裁剪常用于头像选择和图片合成等。图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cropper文件夹,拷贝到小程序目录,可以放在pages列表中。 第一步:wxml中引入插件的wxml,使用模板,编写按钮绑定事件。 第二步,js中引入插件的js,设置参数,...转载 2019-11-21 01:38:13 · 426 阅读 · 0 评论 -
小程序使用腾讯地图选择位置
1、实现打开一个地图页,用户可以自己选择位置,可以搜索联想位置,并获取选择后的位置信息和经纬度2、腾讯key需要到腾讯地图开发者去注册申请,个人账号和企业的调用量有很大差别。3、引入js文件,传一个事件处理的回调函数。用户未授权位置时会触发提醒开启位置授权模态框var key = 'Xkkkkkkkkkkskdkktkkk'; //腾讯地图申请的keyexport const ...原创 2019-11-04 23:34:36 · 1147 阅读 · 0 评论 -
小程序使用阿里字体图标 iconfont
去阿里iconfont官网找自己需要的字体图标,将需要的字体图标添加入库 从库中点击“下载代码”至本地 将.tff格式的字体文件转换格式为base64 把转换后的.css文件中的代码和原来.css文件中的代码拼接,并复制进微信小程序相应的.wxss文件中去 具体步骤[附截图] 登陆网址:http://iconfont.cn/ 将需要的icon加入库在库中下载代码下载...转载 2019-11-04 23:24:19 · 313 阅读 · 0 评论 -
小程序使用高德定位
入门指南最后更新时间: 2017年06月21日本指南是使用微信小程序SDK的快速入门指南。第1步:下载并安装微信小程序开发工具按照微信小程序开发文档下载并安装微信小程序开发者工具。第2步:获取高德Key点我获取Key>>点我查看申请高德Key的方法>>第3步:创建项目按以下步骤新建一个本地小程序项目。1、启动 "微信web开发...原创 2019-10-19 16:58:20 · 1828 阅读 · 0 评论 -
小程序与H5互相跳转
由于小程序官方没有提供外部H5网页直接跳转到小程序的api,所以目前只支持小程序内嵌H5,并且只有内嵌的H5才能跳回小程序小程序跳转H5需要用到小程序的web-view,官方文档链接web-view是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。写法如下:<view class="page-body"> <web-view ...转载 2019-10-17 09:58:50 · 1467 阅读 · 0 评论 -
微信小程序template模板与component组件的区别和使用
前言:除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义。而component组件则有自己的业务逻辑,可以看做一个独立的page页面。简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了。一. template模板...转载 2019-10-17 09:53:17 · 202 阅读 · 0 评论 -
wxs处理时间戳为年月日 时 分 秒
1、定义一个wxs的后缀文件。wxs不支持js高级语法。不支持使用now Data.要使用getData( )var filter = { getDateTime: function (value, type = 0) { //不能使用 new Date() var time = getDate(value); var year =...原创 2019-10-15 15:15:33 · 2055 阅读 · 1 评论 -
小程序项目配置文件project.config.json
小程序开发者工具在每个项目的根目录都会生成一个project.config.json,在工具上做的任何配置都会写入到这个文件,当重新安装工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。可以在项目根目录使用project.config.json文件对项目进行配...原创 2019-08-15 00:06:40 · 7139 阅读 · 1 评论 -
小程序基础
一、原生UI组件1、文本组件 <text> </text> 行内组件 属性名 类型 默认值 说明 selectable Boolean false 文本是否可选,除了text组件之外,其它组件都无法长按选中...原创 2019-08-26 11:19:44 · 1049 阅读 · 0 评论 -
小程序判断用户进入渠道
通过小程序场景值。对于小程序,可以在 App 的 onLaunch 和 onShow,或wx.getLaunchOptionsSync或 页面调用wx.onAppShow(function callback) 中获取场景值//app.jsApp({ onLaunch: function () { // 小程序初始化 }, onShow: function (option...原创 2019-08-21 11:31:49 · 5029 阅读 · 0 评论 -
微信小程序template模板与component组件的区别和使用
前言:除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义。而component组件则有自己的业务逻辑,可以看做一个独立的page页面。简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了。一. template模板...转载 2019-09-03 11:42:15 · 377 阅读 · 0 评论 -
小程序多个input实现数据同步
在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听。但是我们如果有多个表单时,需要写多个事件来同步数据。这样做很麻烦。方法一、<view class='form'> <view class='item_box'> <input class="input" bindinput='inp...原创 2019-09-06 01:10:47 · 2110 阅读 · 0 评论