微信小程序
什么~
折腾的咸鱼
展开
-
微信小程序之跳转其他小程序 wx.navigateToMiniProgram
wx.navigateToMiniProgram 打开另一个小程序wx.navigateBackMiniProgram返回到上一个小程序(只有在当前小程序是被其他小程序打开时可以调用成功)原创 2021-06-16 17:49:20 · 5148 阅读 · 0 评论 -
22.微信小程序之富文本转化的两种方式
后端返回带样式的字符串,要求将具体样式正确显示在页面上。这时候有两种解决方式,一是使用wxParse插件,而是使用小程序自带的组件rich-text一、wxParse1.wxParse插件地址:https://github.com/icindy/wxParse2. 将其放入小程序项目中3.在js文件夹中引入4.在赋值的地方:数据绑定:var article =...原创 2020-03-22 13:46:29 · 1547 阅读 · 1 评论 -
14.微信小程序之如何引入外部字体
最近是有个需求要在canvas上使用外部字体,但是没有没有找到方法。找到了在wxml页面上的办法,好像小程序上并没有开放在canvas上使用外部字体吧,啊哈哈哈万一有就是啪啪啪打脸了。先看个效果图,我引入的是一种叫五线谱字符的,它可以把数字、字母转换成五线谱?看图就是这种效果啦。你可以引入任何一种你喜欢的字体样式,在网上下载字体包如ttf、eot、svg、woff随便一种格式文件,我下载的是t...原创 2018-11-30 15:00:55 · 1548 阅读 · 5 评论 -
15.微信小程序之 json.stringify()与json.parse()
在前后端交互的过程中难免会出现需要我们将字符串转成json的时候。 json.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串json.parse() 方法将数据转换为 JavaScript 对象( 将字符串转成json对象。 )例子:example(){ var a1 = "aa"; var a2 = "bb";...原创 2018-12-12 23:17:05 · 16692 阅读 · 3 评论 -
16.微信小程序之图片剪裁
由用户上传图片,但可能用户上传的图片尺寸不合适会导致图片变形。这时就需要可以进行图片剪裁。做了调研,可以看看1.https://www.cnblogs.com/yuanzp/p/9268861.html2.https://www.cnblogs.com/wush-1215/p/9510936.html3.https://we-plugin.github.io/we-cropper/...原创 2018-12-25 10:45:40 · 316 阅读 · 0 评论 -
17.微信小程序之Promise管理异步加载
在canvas绘制中,使用多张网络图片。由于downloadFile是异步操作,这时就需要Promise来管理 let promise1 = new Promise(function(resolve,reject){ wx.downloadFile({ url: img1, success:function(res){ c...原创 2019-01-04 21:06:53 · 626 阅读 · 0 评论 -
18.微信小程序之canvas绘制多行文本自动换行,支持换行符换行
canvas中的文本由用户输入,因此需要把一堆文字进行换行。当用户按下回车键进行换行时,也得将换行信息绘制出来。drawText:function(ctx,item,initHeight,titleHeight){ console.log('传入的initHeight is '+initHeight); console.log('传入的titleHeight is ' + t...原创 2019-01-06 22:09:43 · 1579 阅读 · 0 评论 -
19.微信小程序之canvas绘制多行文本(更新版:绘制时间更短)
之前绘制完成了canvas绘制多行文本,实现自动换行,支持换行符换行。(详情看这里:https://blog.csdn.net/panzina/article/details/85953466) 但是由于每个字要调用measureText,这样太消耗性能了,导致绘制的速度有点慢。所以在此改进 var initHeight = nowHeight+265; var tit...原创 2019-01-14 17:50:55 · 730 阅读 · 0 评论 -
21.微信小程序之动画animation
从学校回来后,已经连上了9天的班。。白天写代码,晚上回家大佬组织在线测试。。。从双休→单休→不休 [○・`Д´・ ○]好了,说说动画吧。实现一个动画效果以开红包为效果。点击旋转着出现,再点旋转着消失一.效果图1. 2. 二、代码1.redPackte.wxml<button bindtap='takeReaPacket' class="btn"&...原创 2019-01-20 00:10:25 · 1033 阅读 · 0 评论 -
20.微信小程序之从子页面退回父页面时的数据传递 wx.navigateBack()
凌晨十二点半。。。磨磨蹭蹭开了电脑的后果废话少说,要实现:1.在【父级页】调用wx.navigateTo方法到【子级页】2.然后从【子级页】返回【父级页】,并将【子级页】中的数据传回【父级页】这样做的好处是【父级页】输入的信息不会因为跳转而被清空 一.效果图1. 2. 3. 二、代码1.first.wxml<view class=...原创 2019-01-17 00:47:18 · 2827 阅读 · 0 评论 -
13.微信小程序之折叠效果
原本一腔热血准备学习es6,但是大佬让我自学php o(╯□╰)o 我,到底给了他什么错觉。。。只能说目前小程序的前端我觉得是可以胜任的,前端还是有很多需要学习的东西大佬给我两周的时间把php的语法熟悉起来,然后去熟悉tp5。11月10日到现在17号,已过去一周,学习进度缓慢。怎么感觉又回到了学校,拖到最后一刻才去写作业。。。撤回正题ヾ(◍°∇°◍)ノ゙,一个折叠效果,没什么好讲的一...原创 2018-11-17 15:29:05 · 2031 阅读 · 2 评论 -
12.微信小程序之手机号登录验证倒计时
这是一个很常见的功能啦,一般用于注册。输入姓名、手机号,获取验证码,然后提交。姓名未填写,手机号校验不正确都不可以发送验证码;当点击发送验证码之后,验证码框才可以写入;当验证码长度大于等于4时,确定按钮才可以点击。一.效果图1.2. 二.代码1.code.wxml<view class="title">请完善信息</view><form...原创 2018-11-11 22:21:20 · 312 阅读 · 0 评论 -
11.微信小程序之canvas生成图片并保存到手机
在小程序中,会有这样一种需求,保存某一个页面并将其分享到朋友圈。一般的做法是:将这个页面用canvas绘制出来,通过wx.canvasToTempFilePath,把当前画布指定区域的内容导出生成指定大小的图片。然后再通过wx.saveImageToPhotosAlbum,保存图片到系统相册。由用户发朋友圈,在相册中选择图片即可。代码展示部分,只是个逻辑,直接粘贴复制不可行。canvas....原创 2018-11-03 16:21:41 · 2733 阅读 · 0 评论 -
2.微信小程序之数据缓存Storage
用小程序Api中的wx.getStorage , wx.setStorage实现一个收藏功能。通过读取本地数据缓存,判断当前文章是否已被收藏,是则图片高亮显示,否则反之。原创 2018-10-06 16:08:50 · 869 阅读 · 1 评论 -
3.微信小程序之WXS模块
WXS( WeiXin Script)是小程序的一套脚本语言,结合wxml可以构建出页面。如何写一个wsx?要给其声明一个名字 , 如module=“tool”;exports:通过该属性,可以对外共享本模块的私有变量与函数<wxs module="tool">function createNames(names) { return names.split(',')}...原创 2018-10-08 15:27:36 · 2310 阅读 · 0 评论 -
4.微信小程序之自定义组件
来理一理自定义组件的思路距离下班还有一小时╮(╯▽╰)╭1.组件简单使用组件注意:com.json中{ "component": true, //自定义组件声明 "usingComponents": {} //可选项,用于引入其他组件}com.wxml<view class="container"> <view class='red' bin...原创 2018-10-08 17:33:42 · 197 阅读 · 0 评论 -
5.微信小程序之弹窗
点击按钮,弹出弹窗。内含三个选项,选中其中某项,点击确认后显示文字1.2.3.具体代码1.popup.wxml<view class='btn'> <view wx:if="{{today}}">今天的心情是:{{choose}}</view> <button hover-class='dark' bindtap='Pop...原创 2018-10-09 15:44:57 · 658 阅读 · 0 评论 -
7.微信小程序之跑马灯效果
跑马灯效果,简单粗暴来说就是:一行文字水平向左滚动,滚动完了之后,从屏幕右侧出现,继续滚动,一般做电商类的小程序都会用到。原理不难,一个定时器,小程序自带API中 setInterval 即可完成。一.效果图1. 2. 二.代码1.lamp.wxml<view class="box"> <text style='left:{{distance...原创 2018-10-16 12:03:02 · 776 阅读 · 0 评论 -
6.微信小程序之表单提交
用户输入内容,点击提交,提交后显示提交内容。点击确认,显示提交成功;点击取消,显示取消提交1.2.3.4. 代码展示1.modal.wxml<view class='baseInfo'> <image src='../../../image/titleTag.png'></image> <text>基本信息&...原创 2018-10-10 17:54:54 · 8831 阅读 · 0 评论 -
9.微信小程序之地图小结
今天把地图资源的页面做完了,来回忆回忆一些坑。首先,使用组件<map></map>就可以引用腾讯地图了,没错,就是辣么简单。<map>组件中有许多的属性、方法。如果你想在地图标记某些位置,不妨使用“markers”标记点进行标记,可以自定义标记点的图标样式,还可以显示气泡,或者点击图标时显示气泡。粉红色的框是callout气泡,可以选择点击的时候...原创 2018-10-19 17:53:20 · 678 阅读 · 1 评论 -
8.微信小程序之地图demo
大佬让我调研一下微信小程序的地图怎么使用,写个一demo。怎么感觉有好多坑。。。一.效果图1.用markers显示标记点,用callout自定义气泡弹窗,如图粉红框所示。点击标记点,可以打印信息;2.随便拖动地图到任意位置,点击红色框中的内容可以返回初始位置,即“你所在的位置”3.拖动结束时,获取地图中间的经纬度,控制台可看见信息二.代码1.map.wxml&...原创 2018-10-17 17:48:14 · 2045 阅读 · 1 评论 -
10.微信小程序之列表上拉加载(分页)
某个页面,有多个列表,如100行,这时需要实现分页功能,手机端的分页一般都是滑到底部时上拉刷新。使用scroll-view实现,其bindscrolltolower方法:滚动到底部/右边触发。当触发时发送请求获取新的数据,我写的时候获取的数据很快,我还给它加了个定时器啊哈哈哈,因为我想让showLoading加载弹窗转一转,让用户知道上拉刷新数据。因为没加的时候showLoading一闪而过,...原创 2018-10-27 21:52:33 · 1375 阅读 · 0 评论 -
1.微信小程序之模板使用
啦啦啦啦啦,今天来探讨一下模板的使用。1.定义模板使用name属性,定义模板的名字,在&amp;amp;amp;lt;//template &amp;amp;amp;gt;内定义模板内容,在template.wxml&amp;amp;amp;lt;template name=&amp;amp;quot;list&amp;amp;quot;&amp;amp;amp;gt; &amp原创 2018-10-04 23:10:10 · 2373 阅读 · 0 评论