文章平均质量分 58
微信小程序
sun_wei_tao
打杂工程师
展开
-
uniapp开发微信小程序连接mqtt
下载mqttnpm i mqtt@2.18.8存储mqtt客户端到vuex// mqtt moduleimport mqtt from 'mqtt'const CONNECT_MQTT = 'CONNECT_MQTT'const SERVER_IP = ''const SERVER_PORT = ''const SERVER_PATH = 'mqtt'// 连接地址const SERVICE = `${SERVER_IP}:${SERVER_PORT}/${SERVER_PAT原创 2021-10-09 14:48:05 · 3945 阅读 · 0 评论 -
微信小程序实现点击获取验证码倒计时结束可再点击功能
效果图jsPage({data: { //点击前的文本内容 text: '发送验证码', //控制按钮能否点击 disabled: false, //倒计时时间 time: 60, //定时器 timer: '' },//点击方法send: function() { //将按钮设置为禁用 this.setData({ disabled: true }) //给定时器赋值 this.data.time原创 2020-09-07 18:58:14 · 868 阅读 · 0 评论 -
微信小程序实现点击生成随机验证码功能
效果图wxml<view bindtap="getCode">{{ code }}</view>jsPage({data: { code: ''},onLoad() { //进入页面就调用方法 创建一个随机验证码 this.createCode()},getCode() { //点击调用创建验证码方法 this.createCode()},//创建随机验证码方法createCode() { let code = ''; //初始化原创 2020-09-07 11:33:31 · 2909 阅读 · 5 评论 -
css3自适应布局单位vw,vh
vw,vh为视口单位,1vw/vh等于视口宽度/高度的1% 小程序中同样适用小程序中窗口固定高度/宽度为100vh/vw,将窗口高度/宽度平分成100份,每一份为1vh,vw原创 2020-08-26 17:57:36 · 144 阅读 · 0 评论 -
微信小程序身份证取景框拍摄demo
wxml<view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error"> <cover-view class="id_m"> <cover-image class="img" src="https://cdn.ctoku.com/201910234221235312.转载 2020-08-26 17:49:07 · 2455 阅读 · 0 评论 -
微信小程序显示用户搜索历史记录功能实现
效果是点击首页输入框跳转到搜索页面,用户搜索后将搜索的内容在历史搜索中展示 如下图所示首页输入框布局和样式这里我就不展示了 js就是点击跳转页面历史搜索记录模块wxml原创 2020-08-26 17:33:33 · 7412 阅读 · 3 评论 -
微信小程序用户登录流程
app.js原创 2020-08-24 20:53:07 · 530 阅读 · 0 评论 -
微信小程序页面跳转传值
原文链接 前言这个需求有很多种实现方式,这里只谈 路由跳转携带参数 的 2 种方式。// 假设要从 A页面 带参跳转到 B页面【A页面】转载 2020-08-24 20:28:58 · 1491 阅读 · 0 评论 -
微信小程序分享功能的使用
分享小程序需要在js中定义OnShareAppMessage函数或者在按钮中设置open-type属性;效果如下图所示,在真机上的效果就是点击分享后先选择你的好友再弹出模拟器中的模态框效果图wxml<button open-type="share">分享</button>jsPage({ onShareAppMessage: function() { //return一个对象,用于自定义转发内容 return { title: '分享标题'原创 2020-08-24 14:59:58 · 695 阅读 · 0 评论 -
微信小程序展示弹窗的几种方式
小程序中展示弹窗有四种方式:showToast、showModal、showLoading、showActionSheet官方文档链接效果图wxml<!-- 1.消息提示框 --><button size="mini" bindtap="handleShowToast">ShowToast</button><!-- 2.模态对话框 --><button size="mini" bindtap="handleShowModal">O原创 2020-08-24 14:35:51 · 7308 阅读 · 5 评论 -
微信小程序网络请求-函数封装
降低网络请求和wx.request的耦合度;使用Promise的方法获取回调结果service.js//封装wx.requestexport default function request(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, //服务器接口地址 method: options.method || 'GET', //请求方法原创 2020-08-24 11:41:43 · 312 阅读 · 0 评论 -
微信小程序事件对象currentTarget和target属性的区别
页面中view嵌套view,分别都绑定点击事件wxml<view id="outer" class="outer" bindtap="outerClick"> <view id="inner" class="inner" bindtap="innerClick"></view></view>wxss:设置一些样式方便观察.outer{ width: 400rpx; height: 400rpx; background-color:原创 2020-08-24 09:28:25 · 599 阅读 · 1 评论 -
微信小程序input框输入值获取
提交表单时获取输入框的值wxml<view> <!-- 携带 form 中的数据触发 submit 事件 --> <form bindsubmit="submit"> <input value="{{ age }}" name="age"></input> <!-- form-type用于form组件 点击会触发form的submit或reset事件 合法值:submit 提交表单 res原创 2020-08-21 11:06:21 · 3493 阅读 · 1 评论 -
微信小程序 picker-从底部弹起的滚动选择器
效果图官方文档链接wxml原创 2020-08-21 09:36:59 · 2168 阅读 · 2 评论 -
微信小程序 内容评论-回复评论-回复回复的实现
效果图先展示代码js逻辑有详细注释代码格式有点乱复制粘贴格式化即可wxml<!-- 评论-回复-回复评论显示区域 --> <view class="container"> <!-- 总共评论数 --> <view class="total">共{{comment_list.length + comment_list2.length}}条评论</view> <!-- END -->原创 2020-08-19 14:32:08 · 12726 阅读 · 0 评论 -
微信小程序轮播图设置指示器样式(通过类名设置样式)
通过自带的类名设置指示器样式指示器样式类名wx-swiper-dot当前指示器样式类名wx-swiper-dot-active使用以上类名需要在前面加上外面swiper容器的类名 否则可能会不生效原创 2020-08-17 19:01:21 · 1035 阅读 · 0 评论 -
微信小程序获取用户基本信息的几种方式
1.使用微信官方API//获取用户的信息,并且获取到用户信息后,将用户的信息传递给服务器wx.getUserInfo({ success: (res) => { console.log(res) }})这种方案将逐步不再支持,详情参考官方文档链接2.使用button组件 只有用户点击按钮后获取用户信息button组件官方文档链接<button open-type="getUserInfo" bindgetuserinfo="handleGetUse原创 2020-08-15 09:25:07 · 3159 阅读 · 0 评论 -
微信小程序界面渲染的整体流程
界面渲染整体流程1.在渲染层,宿主环境会把WXML转换成对应的JS对象(宿主环境指的就是微信客户端)2.将JS对象再次转换成真实DOM树,交由渲染层线程渲染3.数据变化时,逻辑层提供最新的变化数据,生成新的JS对象与之前的JS对象进行diff算法对比4.将最新变化的内容反映到真实的DOM树中,更新UI...原创 2020-08-14 16:31:51 · 1262 阅读 · 0 评论 -
微信小程序返回上一页传值方法
返回上一页可通过APIwx.navigateBack()返回上一页 官方文档链接实现方法//获取所有页面var pages = getCurrentPages();//初始化当前页面var currentPage = '';//初始化上一个页面var prevPage = '';//判断所有页面是否有两页再赋值if(pages.length >= 2) { //给当前页面赋值 currentPage = pages[pages.length - 1]; //给上一个页面原创 2020-08-13 18:30:07 · 1099 阅读 · 0 评论 -
微信小程序显示多个空格 适用表单对齐
text标签space属性官方文档链接效果图原创 2020-08-11 11:02:51 · 394 阅读 · 0 评论 -
微信小程序修改data数据的方法
方法一在函数中修改person中age的值,先拿到person,然后设置person.age的值,最后在setData方法中重新设置personPage({ data: { person: { "name": "人", "age": 20 } }, onLoad: function() { var person = this.data.person; person.age = 18; this.setData({ p原创 2020-08-05 19:58:26 · 7194 阅读 · 5 评论 -
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
效果图实现思路在video标签中添加view或cover-view标签,封面图可直接设置video组件的poster属性,自定义按钮和封面图文字包在view中设置定位即可,给自定义按钮绑定点击事件,触发事件后隐藏最外层view,给video绑定bindended事件 设置最外层view显示wxml```css.video_item { margin-top: 33rpx;}.video { width: 686rpx; height: 330rpx;}.cover { w原创 2020-08-05 19:49:49 · 9275 阅读 · 1 评论 -
原生微信小程序实现tab切换效果demo
效果图Wxml<!-- tab框 --><view class="nav_title"> <view class="nav_tab"> <!-- 如果选中的下表等于当前的索引,就使用active class名,否则class名为common --> <view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'comm原创 2020-08-05 18:18:28 · 938 阅读 · 1 评论 -
微信小程序cover-view、view标签内文字无法自动换行的解决办法
cover-view标签内文字无法自动换行解决方案 :在对应的cover-view样式中添加如下样式white-space: pre-wrap补充white-space: 控制段落中的文本是否换行pre-wrap: 保留空格,正常换行view标签内文字无法自动换行解决方案 : 在对应的view样式中添加如下样式white-space: pre-line如果不起作用设置行高补充: pre-line:不保留空格,正常换行...原创 2020-08-05 17:59:09 · 1390 阅读 · 0 评论 -
微信小程序 函数防抖和函数节流
函数防抖:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况函数节流:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行。到下一个单位时间n秒时 第一次触发函数执行,多用于页面scroll滚动、窗口resize、防止按钮重复点击函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js中//common.js/*函数节流*/function throttle(fn, interva原创 2020-08-02 15:29:13 · 1324 阅读 · 1 评论 -
微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部 需要回到顶部重新计算高度onReachBottom函数被覆盖1.配置属性问题在app.json或者本页的json文件中配置onReachBottomDistance属性,区别在于全局还是只在本页生效2.高度问题//设置容器高度为100%page{ height: 100%}3. 切换页面时 滚动条滚回到顶部//切换页面时调用APIwx.pageScrollTo({ scrollTop: 0})4.原创 2020-08-01 16:14:04 · 11632 阅读 · 5 评论 -
小程序修改元素样式方法
前言:小程序是无法操作DOM元素的 需要通过setData()方法实现修改元素样式Wxml<!-- 将样式属性值替换为变量--><view style="display: {{block}}">显示</view><view style="display: {{none}}">隐藏</view>js//将变量挂载到data上data: { block: 'block', none: 'none' }//通过this.原创 2020-07-31 19:57:36 · 2144 阅读 · 0 评论 -
小程序轮播图指示器(跑马灯)样式
直接写入以下样式即可swiper类给swiper容器即可.swiper .wx-swiper-dot{ width:24rpx; display: inline-flex; height: 6rpx; margin-left: 10rpx; justify-content:space-between;}.swiper .wx-swiper-dot::before{ content: ""; flex-grow: 1; background: rg原创 2020-07-30 20:15:18 · 489 阅读 · 0 评论 -
微信小程序轮播图demo
1.wxml<!-- 轮播图 --><view class="box"> <swiper class='swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'> <block wx:for="{{imgList}}" wx:key="原创 2020-07-30 20:06:35 · 335 阅读 · 0 评论