微信小程序
韩大璐
大璐出奇迹~
展开
-
微信小程序获取地理位置信息
微信小程序官方文档提供了 wx.getlocation 方法来获取用户的地理位置信息,但是这个方法只能获取到用户的经度和纬度,具体城市名称还需要结合第三方地图(如腾讯地图、百度地图、高德地图等)来获取。这里就先总结一下微信小程序wx.getlocaltion方法+腾旭地图接口来获取位置信息的方法。获取位置大概分以下几步: 1.使用小程序官方提供的 wx.getlocation 方法获取到...原创 2018-09-12 11:23:47 · 7372 阅读 · 3 评论 -
小程序购物车功能实现【详解】
购物车列表的数据是调取后台接口拿到的,在这里有一个问题就是:调取购物车列表接口到底是在哪个声明周期执行???最开始我是写在onLoad里边的,后来在测试的时候发现一个问题,从购物车页面进入到商品详情页面,添加商品到购物车之后再回到购物车页面,发现刚刚添加的商品并没有显示在购物车里,但是添加到购物车这个操作确实是成功了的。这是什么原因呢?因为我的 购物车页面是tabBar的页面,只有在第一次进入...原创 2018-12-21 09:28:51 · 16275 阅读 · 0 评论 -
微信小程序setData修改数组某一项的值
假设有这样一个数据:data:[ { name:'张三',age:21 }, { name:'李四',age:20 }]如果我们需要修改张三的年龄为18,直接使用 this.setData({data[0].age:18}) 就可以。此时下标是我们已经知道的,假如说下标是个变量呢?如果按照刚刚我们的写法是会报错的那么应该怎么写呢?首先需要定义一个变量,这个变量的值就是要修改的...原创 2018-12-19 15:57:43 · 10752 阅读 · 8 评论 -
微信小程序canvas画圆环形进度条
最近做一个小程序,有用到canvas画圆环形进度条,效果图就是上图了。为了方便日后使用,我已经封装了一个独立的js文件。先简单说一下实现流程,封装好的文件下载地址:https://github.com/SuperDalu/wxCanvas.git先在wxml文件中创建画布<canvas canvas-id="runCanvas" id="runCanvas" class='ca...原创 2018-10-30 15:09:43 · 18656 阅读 · 28 评论 -
小程序解析富文本编辑器的内容
后台返回的富文本编辑器的内容是不能够在小程序里解析的,为了解决这一问题,我找了一个插件wxParse,具体使用方法如下:先下载这个插件GitHub地址:https://github.com/SuperDalu/wxParse.git把这个文件放在微信小程序assets目录下在需要解析富文本的js文件和wxml文件中分别引入并使用wxParse方法处理富文本数据,用模板去解析...原创 2018-10-26 15:21:41 · 4406 阅读 · 0 评论 -
微信小程序倒计时方法封装
最近在做一个商城小程序的时候在订单部分有用到倒计时,比如说未支付订单在一定时间后自动关闭订单,这个时候在前端页面上就要展示倒计时。先封装一个把时间戳转化成天时分秒格式数据的方法,这个方法也可以用于单纯的数据转换://timeStamp是时间戳 在这个场景下是距离订单自动关闭的时间差getTime: function(timeStamp){ var day = 0; var ...原创 2018-10-12 15:51:56 · 2912 阅读 · 0 评论 -
微信小程序动画循环执行
微信小程序提供了动画API,但是属性有限,并没有css3中动画循环播放等属性。所以要在微信小程序里实现动画的循环执行,就需要借助定时器来完成。moreToDetailAnim(){ const animation = wx.createAnimation({ duration: 300, timingFunction: 'linear' ...原创 2018-09-26 15:47:55 · 3686 阅读 · 0 评论 -
微信小程序弹出层的实现(动画)
弹出层wxml页面结构 <view class='couponLayerBox' animation="{{animMaskData}}" style='height:{{LayerBoxHeight}};'></view> <view class='couponLayer' animation="{{animContentData}}"> ...原创 2018-09-20 19:30:02 · 4530 阅读 · 1 评论 -
微信小程序方法封装
在utils文件夹下新建一个文件,用来放所有的方法。(一般共用方法的封装都会放在utils文件夹下)在文件中通过 export default{} 将里边的数据和方法暴露出去。数据和方法的写法同微信小程序的js文件。哪个文件要调用这些方法,就在该文件中引入这个共用文件。...原创 2018-09-20 19:15:18 · 8117 阅读 · 0 评论 -
微信小程序模版的使用
微信小程序模版封装了一些共用的模块,减少了开发的代码量和时间成本。首先要在 asset文件夹下新建一个名为 template 的文件夹,建好后需要新建一个名为 template 的page。在template.wxml文件中封装模版。在这个template.wxml页面中可以封装多个模版,不同的模版用其name属性加以区分。模版样式写在template.wxss文件中即可,跟一般...原创 2018-09-20 14:41:29 · 292 阅读 · 0 评论 -
微信小程序实现星星评分效果
微信小程序实现星星评分效果思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了。我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环出来的,根据flag的值确定是灰色的小星星还是黄色的小星星,点击的时候获取当下这个盒子的index值,然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。当然,也可以用类名...原创 2018-09-18 14:01:25 · 10734 阅读 · 2 评论 -
微信小程序去除button边框
在微信小程序中使用button的时候,会有一个默认的边框和背景颜色。就像这样:我给这个button按钮加了border:none; outline:none; background:transparent; 之后只是去除了按钮的背景颜色,并没有去掉其默认边框。后来在查阅了资料之后发现给button的后伪元素设置 border:none; 才可以去掉button的边框。button::a...原创 2018-12-18 15:06:00 · 1168 阅读 · 2 评论