分类：微信小程序

2020
10-08

微信小程序实现电子签名功能

本文实例为大家分享了微信小程序实现电子签名的具体代码，供大家参考，具体内容如下//XXXX.wxml<viewclass="signName"><canvasclass="canvas"id="canvas"canvas-id="canvas"disable-scroll="true"bindtouchstart="canvasStart"bindtouchmove="canvasMove"bindtouchend="canvasEnd"touchcancel="canvasEnd"binderror="canvasIdErrorCallback"></canvas></view><viewclass="CListflex"><viewclass="flex_itemma... 继续阅读 >

2020
10-08

uniapp,微信小程序中使用 MQTT的问题

最近在uniapp打包成微信小程序的项目中第一次用到了MQTT。使用比较简单，但是还是遇到了一些问题。在此记录一下。官方文档：MQTTGithub官方MQTT测试工具：MQTTX。测试工具使用说明MQTT的js文件：mqtt.min.js先上一点注意事项：（1）MQTT.js一个MQTT协议的客户端库，用JavaScript编写，可用于Node.js和浏览器。在Node.js端可以通过全局安装使用命令行连接，同时还支持MQTT，MQTTTLS证书连接；值得一提的是MQTT.js还... 继续阅读 >

2020
10-08

微信小程序实现多选框功能的实例代码

我们先来看看效果:两种状态:选中/不选中wxml<!--选择S--><viewwx:for="{{riderCommentList}}"wx:for-item="item"wx:key="index"bindtap="checkboxChange"data-value="{{item.value}}"data-index="{{index}}"checked="{{item.selected}}"class="btn{{item.selected?'btn-selected':''}}">{{item.title}}</view><!--选择E-->核心jsPage({/***页面的初始数据*/data:{riderCommentList:[{... 继续阅读 >

2020
10-08

微信小程序 button样式设置为图片的方法

下面通过多种方法给大家介绍微信小程序button的样式设置为图片，具体内容如下所示：方法一：button与image重叠将button设为opacity:0然后定位放在那副图片的上边。方法二：background-imagebackground-image。背景图片是不支持在css中被引用资源的，但可以使用网络资源。<buttonopen-type='share'class="share"style="background-image:url(https://example.com/imgs/icon_2_forward@2x.png);"plain='true'></button>wx... 继续阅读 >

2020
10-08

微信小程序 scroll-view的使用案例代码详解

scroll-view：滚动视图使用view其实也能实现滚动，跟div用法差不多而scroll-view跟view最大的区别就在于：scroll-view视图组件封装了滚动事件，监听滚动事件什么的直接写方法就行。scroll-view纵向滚动添加属性scroll-y，然后写一个固定高度就行了，我主要说一下scroll-view的横向滚动scroll-x：我使用了display:flex;布局，特么的直接写在scroll-view上面，显示出来的结果总是不对头，试了好多次，得到了下面两种写法；第二种在s... 继续阅读 >

2020
10-07

微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

1.wxml代码：<viewclass="page"><importsrc="../../components/catering-item/catering-item.wxml"/><!--左侧滚动栏--><viewclass='under_line'></view><viewclass="body"><viewstyle='float:left'class='left'><scroll-viewscroll-yscroll-with-animationscroll-left="{{scrollLength}}"class='scrollY'style='height:{{winHeight}}px'><viewclass='allclear'><blockwx:key="tabs"wx:for="{{tabs}}"... 继续阅读 >

2020
10-05

微信小程序学习总结（五）常见问题实例小结

本文实例总结了微信小程序常见问题。分享给大家供大家参考，具体如下：问题一先来看我遇到的第一个问题以下是我创建的目录当创建完这个json文件之后，报了下面一个错这个是我的报错信息。解决方法：打开这个json文件，输入两个一对花括号完事。问题二以下是我引入js的代码，绝对路径报错。varpostsData=require('/data/post-data.js')报错信息：UncaughtError:module“pages/post/data/post-data.js”isnotdefined改正后... 继续阅读 >

2020
10-05

微信小程序学习总结（四）事件与冒泡实例分析

本文实例讲述了微信小程序学习总结（四）事件与冒泡。分享给大家供大家参考，具体如下：先来熟悉一个swiper组件，可以实现我们常见的轮播图效果。<view><swiperclass='swiper'indicator-dots="true"indicator-color="rgba(0,0,0,.3)"autoplay="true"interval="2000"><swiper-item><imagesrc='/imgs/3.jpg'></image></swiper-item><swiper-item><imagesrc='/imgs/4.jpg'></image></swiper-item><swiper-item>... 继续阅读 >

2020
10-05

微信小程序学习总结（三）条件、模板、文件引用实例分析

本文实例讲述了微信小程序条件、模板、文件引用。分享给大家供大家参考，具体如下：上一节的在遍历的时候控制台中会报错<viewwx:for="{{content}}"wx:for-item='item'wx:for-index='index'>{{item.name}}</view>控制台中会显示这个东西Nowyoucanprovideattr"wx:key"fora"wx:for"toimproveperformance.当然了不处理也不影响程序运行，但是看着好不爽啊。wx：key用来对列表渲染的数据指定一个"主键”，以加快列表渲染... 继续阅读 >

2020
10-05

微信小程序学习总结（二）样式、属性、模板操作分析

本文实例讲述了微信小程序样式、属性、模板操作。分享给大家供大家参考，具体如下：小程序尺寸单位rpx是小程序常见的尺寸单位，那么他和px有啥不同一样呢。rpx可以根据屏幕宽度进行自适应。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。小程序的样式你可以这么写内联方式：<textstyle='color:red'>helloworld</text>你也可以这么写，直接在wxss中写也阔以... 继续阅读 >

2020
10-05

微信小程序学习总结（一）项目创建与目录结构分析

本文实例讲述了微信小程序项目创建与目录结构。分享给大家供大家参考，具体如下：首先，放上微信公众品台的网址https://mp.weixin.qq.com/，下面内容完全可以跟着做。https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html下载开发工具。创建项目如图所示选点此校验就行啦，右边有个详情也点开瞅两眼。上传测试和腾讯这块点不了是为啥呢，因为你创建项目的时候没有填写AppID，下一题。具体的东西下载下来瞅瞅点点就行... 继续阅读 >

2020
10-01

微信小程序文章详情功能完整实例

本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考，具体如下：接着上一篇https://www.jb51.net/article/187900.htmlist.js 首先获取文章的id，因为我们的数据是假数据所以用key值作为文章idonPostTap:function(event){vararticle_id=event.currentTarget.dataset.aid;wx.navigateTo({url:'../article-detail/detail?aid='+article_id,})},detail.wxml<!--pages/article-detail/detail.w... 继续阅读 >

2020
10-01

微信小程序文章列表功能完整实例

本文实例讲述了微信小程序文章列表功能。分享给大家供大家参考，具体如下：没有服务器接口数据的情况下玩一玩。list.wxml<view><swiperclass='swiper'indicator-dots="true"indicator-color="rgba(0,0,0,.3)"autoplay="true"interval="2000"easing-function="linear"><swiper-item><imagesrc='/images/banner/2.jpg'></image></swiper-item><swiper-item><imagesrc='/images/banner/1.jpg'></image></swiper-it... 继续阅读 >

2020
10-01

微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】

本文实例讲述了微信小程序返回上一级页面并刷新操作。分享给大家供大家参考，具体如下：在很多业务场景之下，需要返回上一级页面，并进行刷新，在微信小程序中的wx.navigateBack方法中，返回上一页是不会刷新的。如果上一页的页面加载是在onLoad方法中触发的话，那么可以修改为在onShow方法中触发。onLoad(Objectquery)：页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。onShow：页... 继续阅读 >

2020
10-01

微信小程序开发（二）：页面跳转并传参操作示例

本文实例讲述了微信小程序页面跳转并传参操作。分享给大家供大家参考，具体如下：本篇文章主要记录：保留当前页面，跳转到应用内的某个页面的。。路由。跳转后的页面将在标题栏左上角带一个返回按钮。wx.navigateTowxml：<viewclass='float-g'bindtap="onPostClick"><i-iconclass="post"type="brush_fill"size="30"color="#fff"/></view>在view上绑定了一个方法：onPostClickJS：onPostClick:function(event){//跳... 继续阅读 >

2020
10-01

微信小程序开发（一）：服务器获取数据列表渲染操作示例

本文实例讲述了微信小程序服务器获取数据列表渲染操作。分享给大家供大家参考，具体如下：在实际项目开发中，有很多时候，前台页面的数据需要后台服务器传递过来。而前台需要循环铺值，类似如下页面：请求后台数据：wx.request({url:getApp().globalData.httpUrl+'/sys/group/selectGroupProList',//请求后台地址data:{//请求后台的分页数据pageNum:that.data.page,pageSize:that.data.pageSize},m... 继续阅读 >