微信小程序
一个假的前端男
一个 迷迷糊糊的前端
展开
-
微信开发者工具出现崩溃解决
微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决微信开发者工具出现崩溃解决原创 2022-12-27 10:42:58 · 2676 阅读 · 3 评论 -
微信小程序提交上线时 定位接口提示未配置
微信小程序提交上线时 定位接口提示未配置微信小程序提交上线时 定位接口提示未配置微信小程序提交上线时 定位接口提示未配置微信小程序提交上线时 定位接口提示未配置微信小程序提交上线时 定位接口提示未配置...原创 2022-07-18 11:19:42 · 490 阅读 · 1 评论 -
小程序中更快速更完美部署富文本 -- wxParser 插件
小程序 解析富文本插件转载 2022-06-15 10:01:56 · 1142 阅读 · 0 评论 -
微信小程序 登录失效后处理
微信小程序 登录失效后处理原创 2022-06-08 11:12:18 · 1685 阅读 · 1 评论 -
wx.showModal 请求并发时处理
wx.showModal 请求并发时 `安卓出现多个弹窗提示` `ios 只出现一次`原创 2022-06-06 18:26:13 · 794 阅读 · 1 评论 -
微信小程序 在不考虑this.setData是同步或者异步时 发送信息 进行节流处理
微信小程序 发送验证码原创 2022-06-06 11:38:17 · 360 阅读 · 0 评论 -
微信小程序 解决滑动穿透的方法
第一种弹窗外层禁用滑动事件弹窗中的滑动部分使用用scroll-view代码<view catchtouchmove='false'> <scroll-view scroll-y> <!-- 内容--> </scroll-view></view>第二种传送门原创 2022-05-31 14:11:43 · 707 阅读 · 0 评论 -
微信小程序多选框圆角修改
.van-checkbox__icon-wrap { border-radius: 8rpx;}.van-checkbox__icon { border-radius: 8rpx;}原创 2022-05-26 16:56:04 · 756 阅读 · 0 评论 -
微信小程序 弹出层禁止页面滚动
微信小程序 vant 中 所有弹出层都会有的一个问题 滑动弹出层 会出现页面也滚动 如下图解决方法:1、首先在最外围的类中加入overflow: hidden;2、当弹出层出现的时候 给最外围的view 加入root-fixed 类 隐藏的时候 去掉root-fixed <view class="root {{isScroll?'root-fixed':''}}"></view>isScroll 控制是否绑定root-fixed 这个类.root {原创 2022-05-17 22:15:35 · 1154 阅读 · 0 评论 -
微信小程序 使用高德地图实现标点 图标修改
微信小程序 引入高德地图高德地图开放平台根据入门指南完成前五步后 建议在app.js中引入 amap-wx.js 并初始化 高德地图app.json// 引入路径 根据自己文件所在位置引入var amapFile = require('./libs/amap-wx.130.js');onLaunch(){ this.globalData.myAmapFun = new amapFile.AMapWX({ key: '你申请的key' });}, globalD.原创 2022-05-05 16:24:34 · 5575 阅读 · 0 评论 -
微信小程序 - wx.navigateBack() 携带参数返回
wx.navigateBack()文档传送门首先文档中并没说明如何通过wx.navigateBack() 传递参数,而其他路由方式可以直接URL拼接传递,但在说明中提及了getCurrentPages,getCurrentPages是能够获取页面栈中所有相关信息的一个方法,而在里面通过打印可以看到这些:在实践发现可以通过利用getCurrentPages去传递参数 let pages = getCurrentPages(); //获取当前页面pages里的所有信息。 let prevPage转载 2022-04-06 16:06:39 · 5520 阅读 · 2 评论 -
微信第三方登录
https://www.cnblogs.com/kenshinobiy/p/8640006.html原创 2020-10-20 22:34:25 · 165 阅读 · 0 评论 -
微信小程序实现滑块的点击与轮播图的切换
实现效果 :点击标签页可以实现切换 滑动内容也可以切换代码思想: 1、独立的滑块与独立的轮播图 2、通过滑块的地址下标与轮播图的current绑定实现 点击按钮轮播图调至相应界面 3、通过bindchange事件得到轮播图下标与滑块下标绑定效果图如下html代码重点:轮播图的current属性可以控制显示页<!-- 滑块 --><view style="margin:0 10px"> <scroll-view class="s原创 2020-08-25 11:04:13 · 1874 阅读 · 0 评论 -
微信小程序之歌词ktv效果
html代码<view wx:for="{{lyric}}" wx:key="index" class="box1231"> <view style=" position: relative;"> <view style="height:30px;position:relative;">{{item}}</view> <view style="height:30px" id="hover" class="{{yinyueScrollIndex原创 2020-08-24 08:54:08 · 835 阅读 · 1 评论 -
微信小程序背景音乐播放ktv效果(全)
效果图代码全集html代码 <view class="box1111" wx:else bindtap="show222"> <view class="box233"></view> <view class="line" wx:if='{{isScroll}}'> </view> <view class="time2" wx:if='{{isScroll}}'> {{scrollTime}}</view&原创 2020-08-24 08:50:59 · 646 阅读 · 0 评论 -
微信小程序背景音乐播放和进度条
1、通过文档中的BackgroundAudioManager对音频进行操作在js文件的最顶部定义一个全部变量let bg = wx.getBackgroundAudioManager() //全局变量data代码 data: { playUrl: '', //播放地址 playList: [], //歌曲详情 totalTime: '', //总时长 显示效果为200s showTotalTime: '', //总时长显示 显示效果为:3:20 curr原创 2020-08-17 17:44:27 · 2121 阅读 · 0 评论 -
微信小程序轮播图
<view class="swiper"> <swiper indicator-dots autoplay interval="2000" duration="500" style=" border-radius: 20rpx;overflow: hidden;" > <view wx:for="{{swiper}}" wx:key="index"> <swiper-item> <image src="{{item.pic}原创 2020-08-13 14:49:55 · 208 阅读 · 0 评论 -
微信小程序dayjs的使用
1、下载压缩包lib链接如下https://download.csdn.net/download/IT_iosers/127090952、解压lib 并放置在文件根目录下3、在要使用的文件夹下的js文件下引用import dayjs from '../../lib/dayjs.min.js'4、正常使用原创 2020-08-13 11:21:35 · 854 阅读 · 0 评论 -
微信小程序vant的使用
1、下载压缩包lib链接如下https://download.csdn.net/download/IT_iosers/127090952、解压压缩包并将其放置在微信小程序根目录下如下图3、引用 (和引用子组件一致)在要使用的文件夹下的json文件中写入把地址改成相对地址 如下{ "usingComponents": { "van-button":"../../lib/vant/button" }}4、使用<van-button type="prima原创 2020-08-13 11:04:32 · 243 阅读 · 0 评论 -
微信小程序封装api
1、在下载lib压缩包链接如下这里是引用1、解压lib文件 并放置在微信小程序的根目录下2、在根目录下创建一个https文件夹3、在https文件夹下创建 index.js文件和api.js文件index.js文件const Fly = require("../lib/fly/wx")const fly = new Fly()fly.config.baseURL = 'https://api.zhuishushenqi.com' // 根路径 (根据自己的根路径进行修改)fly.i原创 2020-08-13 10:44:34 · 1188 阅读 · 0 评论 -
微信小程序实现共享数据
1、把utils解压并放入微信小程序的utils内utils压缩包传送门https://download.csdn.net/download/IT_iosers/127089032、在根目录下创建一个store文件夹在其下创建index.jsindex.js代码如下export default{ data:{ //存放要共享数据或实时变化的数据 msg:"要共享的数据" }}3、在要使用的地方进行引用如下:我在pages/index.js下引用1、先引用 序号原创 2020-08-13 10:16:55 · 3335 阅读 · 0 评论 -
页面上拉触底事件的处理函数(微信小程序)
思想:1、通过请求start和limit 完成请求数据2、每次触底获取区间数据3、把请求的数据拼接在一起 * 页面上拉触底事件的处理函数 */ gender 性别排行(male) type 排行类型(hot) major 大类 minor 小类 start 分页开始 limit 分页结束 onReachBottom: function () { this.setData({ start: this.data.limit,原创 2020-08-12 10:20:12 · 795 阅读 · 0 评论 -
微信小程序水平滚动
html代码 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H "></view> <view id="demo2" class="scroll-view-item_H "></v原创 2020-08-11 14:11:53 · 349 阅读 · 0 评论 -
微信小程序 下拉刷新
1、 onPullDownRefresh: function () { wx.showNavigationBarLoading() setTimeout(() => { wx.hideNavigationBarLoading() wx.showToast({ title: '刷新成功', icon: 'success' }, 2000) }) //获取数据代码 },在json文件写入 "e原创 2020-08-11 14:02:37 · 108 阅读 · 0 评论 -
微信小程序保存图片到相册
用downloadFile只可以获取网络上的图片资源wx.downloadFile({ url: 'https://example.com/audio/123', //仅为示例,并非真实的资源 success: function (res) { // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容 if (res.statusCode === 200) { wx.saveImageToPhotos转载 2020-08-10 18:07:28 · 477 阅读 · 0 评论 -
设置遮罩层样式
如下图html代码如下//这段代码放置所有代码最前面<view class="FEX"> <view class="pop"> <image src="{{'https://statics.zhuishushenqi.com'+data1.cover}}" class="tupi"></image> </view></view>css代码.FEX{ position:fixed; z-index: 99;原创 2020-08-10 17:28:15 · 329 阅读 · 1 评论 -
如何制作标签栏高亮(微信小程序)
思想:1、通过定义一个变量 来控制标签高亮我这里定义的是show show: 0 //导航栏高亮2、通过循环给每一个标签添加点击事件`js代码如下//通过点击事件 把index赋值给show gaoliang(e) { this.setData({ show: e.currentTarget.dataset.index //赋值 }) },html代码通过 动态绑定class事件 对满足条件的标签设置样式<view wx原创 2020-08-07 10:23:42 · 420 阅读 · 0 评论 -
搜索框的输入与失去焦点事件控制搜索结果(微信小程序)
1、实现输入框输入完成时显示数据渲染模块输入框数据清空时,显示正常模块思想:input事件 监听输入框的值(用于判断当数据为空时 ,搜索div不渲染)blur 失去焦点事件(用于监听当输入完成时,获取后台数据,控制搜索div 渲染)如图1 输入过程不渲染数据 失去焦点时渲染数据清空 数据时 显示如图2页面代码如下:本事例为微信小程序jssearch(e) { if (!e.detail.value) { this.setData({ show:原创 2020-08-06 11:55:42 · 1811 阅读 · 0 评论 -
初始微信小程序
项目结构pages文件夹: 路由组件新建components文件夹: 一般组件app.js: 入口js文件 把里面的代码全删了 然后生成一个App的模板代码即可app.wxss: 全局的css文件, 全局的css只在路由组件里面生效 一般组件是用不了的app.json: 全局的配置文件pages: 配置路由 写的是绝对路径 那个路径写在第一个 谁就是首页window: 全局导航栏配置navigationBarBackgroundColor: 导航栏背景颜色navigationBar原创 2020-08-05 10:33:32 · 206 阅读 · 0 评论