分类：小程序

2021
07-17

小程序实现筛子抽奖

本文实例为大家分享了小程序实现筛子抽奖的具体代码，供大家参考，具体内容如下效果图<!--pages/shaizi/index.wxml--><viewclass="container"><viewclass="shaizi_box{{activeTrue}}"style="transform:rotateX({{rotateX}}deg)rotateY({{rotateY}}deg)rotateZ({{rotateZ}}deg);"><viewclass="shaizi">1</view><viewclass="shaizi">2</view><viewclass="shaizi">3</view><viewclass="shaizi">4</view... 继续阅读 >

2021
07-04

小程序实现简单列表功能

本文实例为大家分享了小程序实现简单列表功能的具体代码，供大家参考，具体内容如下列表组件for只要给组件增加for一个数组那么就可以实现列表组件wxml代码<blockwx:for="{{yetinglist}}"><viewclass='waibian'bindtap="readDetail"data-id="{{item.title}}"><imagesrc="{{item.smallLogo}}"class='leftimagecss'></image><viewclass='righttextcss'><textclass='titlecss'>【夜听】{{item.title}}</text>... 继续阅读 >

2021
06-12

小程序数据缓存机制应用实现

小程序数据缓存相关知识数据缓存：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的数据缓存API如下表所示：注意：将数据存储在本地缓存中指定的key中。会覆盖掉原来该key对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。参数详细参数请见https://developers.weixin.qq.com/miniprogram/dev/... 继续阅读 >

2021
05-20

小程序实现滑动块效果

本文实例为大家分享了小程序实现滑动块效果的具体代码，供大家参考，具体内容如下当你在复制的时候一定要把js逻辑的list数据更改就行了小程序的css样式.box{width:100vw;background:#F2F2F2;transition:all3s;}.box-b{height:8vh;width:100%;display:flex;justify-content:space-between;background-color:#FAFAFA;align-items:center;padding:030rpx;box-sizing:... 继续阅读 >

2021
03-07

微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

先看一下效果图： index.wxml<viewclass='{{tabIsTop?"fixedTop":""}}'><i-tabstabcurrent="{{tabcurrent}}"color="#FF0000"bindchange="tabChange"><i-tabkey="tab1"title="车主圈"></i-tab><i-tabkey="tab2"title="行业新闻"></i-tab><i-tabkey="tab3"title="养护宝典"></i-tab><i-tabkey="tab4"title="自驾游"></i-tab></i-tabs></view>特别说明：这里使用的tab标签页是iviewui的框架，地址：... 继续阅读 >

2021
03-05

详解微信小程序（Taro）手动埋点和自动埋点的实现

每一个公司要想用户增长，都要收集和分析用户操作数据，因此埋点是必不可少的事情。而对于前端职业发展来说，传统的手动埋点，无疑是繁琐又无聊的事情，能简化就简化。一、手动埋点手动埋点就是在每一处需要的地方，都加一段上报埋点的代码。影响代码的阅读体验，且散落的埋点代码不方便管理。以页面pv为例，我们此前是在每一个页面中上报pv：//src/manual/home/index.tsximporttrackingfrom"./tracking";//pageSn是前端... 继续阅读 >

2021
02-21

原生微信小程序开发中 redux 的使用详解

前提复杂场景中有不少数据需要在多个不同页面间来回使用和修改。但是小程序页面直接的数据通信方式十分的简单。通常情况需要自己维护一个全局的对象来存放共有数据。但是，简单的维护一个共有数据实体，会随着业务逻辑的不断复杂化而变的过分庞大，并且数据的修改往往无法很好的溯源。加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段，往往需要在页面和对应的数据实体中同时都维护一份相同的数据，操作十分的不方便... 继续阅读 >

2021
02-20

详解微信小程序轨迹回放实现及遇到的坑

微信小程序轨迹回放主要使用到polyline进行划线操作，以及使用marker去进行小车移动操作。效果图如下：具体实现代码：trackplay.wxml文件<!--pages/tracker/tracker.wxml--><mapid="mymap"longitude="{{mapCenter.longitude}}"latitude="{{mapCenter.latitude}}"scale="{{scale}}"markers="{{markers}}"polyline="{{polylineSettings}}"include-points="polygons"setting="{{mapSettings}}"bindregionchange="updatedMap"... 继续阅读 >

2021
01-13

微信小程序 接入腾讯地图的两种写法

最近在写微信小程序，遇到了一些坑，在网上也查了好多，感觉都没有我想要的答案，刚处理了这个地图的问题，在这里总结下，希望可以帮助大家。在微信小程序中，腾讯地图的接入其实是有两种方式的，第一种调用腾讯本身的地图，第二种是使用插件ma-route一、调用腾讯本身的地图实现结果如下图：这个非常简单，而且用的人也很多，只需要调用两个地图的api.就是上边的两个。当然调用openLocation的时候你首先要调用getLocation授权需要... 继续阅读 >

2021
01-12

微信小程序抽奖组件的使用步骤

采用微信组件的方式提供，因组件内部使用了async/await，所以请在微信开发者工具"详情=》本地设置勾上增强编译和使用npm"，小程序npm使用方法请参考：微信小程序-npm支持先看效果图：使用步骤：步骤一：安装依赖或前往githua下载源码，拷贝dist目录下的lottery-turntable目录npmilottery-turntable-for-wx-miniprogram步骤二：页面JSON配置{"usingComponents":{"lottery-turntable":"lottery-turntable-for-wx-miniprogram... 继续阅读 >

2021
01-08

详解微信小程序「渲染层网络层错误」的解决方法

问题描述：情况是这样的，我需要在小程序中通过image标签显示三张我的图片，毫无疑问，其重点部分肯定在image的src属性上，请看思路分析：我们可以新建一个专门放图片的文件夹，然后将我们项目所需要的图片文件全部放到这里。但是这会引发一个问题：微信官方对上线的小程序有大小的限制，所以如果你只是本地跑跑，那无可厚非，你开心就好；如果要做上线，这种方法的可行度不高；使用外部链接。成功发布过小程序的小伙伴们都知道，... 继续阅读 >

2020
12-10

微信小程序实现天气预报功能(附源码)

前言最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下。效果图  天气API获取这里我用的是和风天气的API，打开官网注册或者登陆你的账号进入控制台,新建应用这是刚刚我们创建好的应用，点击添加KEY选择WebAPI这注册好我们的API了微信小程序后台域名配置登陆小程序后台，分别点击开发和开发设置点击修改，将我们API的域名添加到request合法域名里面https://free-api.heweather.net页面代码.wxml<viewclas... 继续阅读 >

2020
12-10

微信小程序向Java后台传输参数的方法实现

首先，微信小程序我使用的是微信web开发者工具想要向后台传输数据，需要在js中写在微信小程序的官方文档中可以看到一个api叫wx.request它的作用是用来发送https请求的在js代码中，我们先使用wx.request这个api，它需要我们去写url,这个url其实就是Java代码部署在服务器上运行后的地址，这里我们没有真实服务器，我们使用tomcat去运行后端代码，将这个url复制给微信小程序的url中我的Java代码在运行时出现一个问题，就是找不到我这... 继续阅读 >

2020
12-04

微信小程序实现首页弹出广告

本文实例为大家分享了微信小程序实现首页弹出广告的具体代码，供大家参考，具体内容如下这个微信小程序首页广告demo仅供有需要的参考.wxml<!--广告展示--><viewclass="AdView"hidden="{{showAd}}"catchtouchmove="preventMove"><viewclass="bg"></view><viewclass="activeactive-sport"><viewclass="cancel"bind:tap="cancelTap"></view><viewclass="active-content"bind:tap="activeContent"data-id='2340173... 继续阅读 >

2020
11-19

小程序自定义圆形进度条

本文实例为大家分享了小程序自定义圆形进度条的具体代码，供大家参考，具体内容如下circle.wxss:page{width:100%;height:100%;background-color:#fff;}.circle-box{text-align:center;margin-top:10vw;}.circle{position:absolute;left:0;right:0;margin:auto;}.draw_btn{width:35vw;position:absolute;top:33vw;right:0;left:0;margin:auto;border:1px#000solid;border-radius:5vw;}cir... 继续阅读 >

2020
11-16

小程序自定义弹框效果

本文实例为大家分享了小程序自定义弹框效果的具体代码，供大家参考，具体内容如下wxml<!--button--><viewclass="btn"bindtap="powerDrawer"data-statu="open">来点我呀</view><!--mask--><viewclass="drawer_screen"bindtap="powerDrawer"data-statu="close"wx:if="{{showModalStatus}}"></view><!--content--><!--使用animation属性指定需要执行的动画--><viewanimation="{{animationData}}"class="drawer_box"wx:if="... 继续阅读 >