![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序开发
文章平均质量分 54
Vue酱
这个作者很懒,什么都没留下…
展开
-
微信小程序 自定义tabbar (会话客服) Vant
要实现的效果: 在写项目的过程中,可能会遇见ui设计会话客服放在tabbar上的情况,但是会话消息必须通过button触发,然鹅小程序的默认tabbar层级最高,没办法再上面添加button事件,这时,我们就需要实现一个自定义tabbar, 我用的是Vant ui组件库,其它的也行,主要原理就是tabbar上放一个按钮,挡住原本的tab就行啦!Vant 小程序官网(一定要是小程序版本的哟,之前引入了vue版本的,实现不了,排查了好久问题)小程序自定义tabbar官网教程第一步://app.json原创 2021-09-10 11:12:02 · 1540 阅读 · 4 评论 -
小程序开发常见问题解决方法
1 阻止事件冒泡//catchtap替换bindtap<view bindtap='goDetails'> <!-- catchtap:可阻止冒泡事件,这样就不会同时执行两个事件 --> <text class="btn" catchtap='btnClick'>点击操作</text> </view>2 wx.previewImage点击显示大图(放大黑屏解决)//wxml <view class="imgB原创 2021-03-29 09:33:07 · 615 阅读 · 0 评论 -
微信小程序上传图片(预览 删除 限制图片大小、张数)
//wxml <button class='button' bingtap="uploadSomeMsg">上传</button> <view class="uploadImgBox"> <view class='smallImgBox'> <block wx:for="{{img_arr}}" wx:key="index"> <原创 2021-03-26 09:10:41 · 2020 阅读 · 0 评论 -
微信小程序(获取定位)
实现微信小程序定位并不难,但是如果第一次接触的话还是很懵,这里就记录一下,方便自己复习或大家借鉴吧!首先重点有两条:通过微信小程序api: wx.getLocation(Object object)获取当前所在的经纬度; 小程序api详情通过腾讯地图开放平台逆地址解析获取的经纬度,获取真实地标名称; 腾讯地图平台 具体操作:(腾讯地图方面的操作)注册腾讯地图开放平台:申请开发者密钥(Key):申请密钥 https://lbs.qq.com/dev/console/key/add成功后原创 2021-01-05 11:27:39 · 9948 阅读 · 3 评论 -
微信小程序开发(请求后台数据,封装request函数)
今天想记录一下怎么向后台请求数据,将函数进行封装,实现复用~官方的请求方法:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html这是封装好的函数:公共函数async function request(url, { method = 'GET', data } = {}) { wx.show.原创 2020-07-15 11:33:01 · 1287 阅读 · 0 评论 -
微信小程序(下拉刷新数据)新手向
记录一下困扰自己的一个小问题,也给各位小伙伴一个借鉴呀~在做自己的个人小程序项目时,需要实现用户下拉刷新数据,看了很多教程,都在说用scroll-view来实现,但是自己对样式要求不高,就使用微信自带的吧~实现的效果:#####1 如果需要全局都实现下拉刷新的话,可以在app.json文件,window里面进行配置启用下拉刷新,只有一两个页面不需要下拉刷新的话,就在页面的json文件内配置,关闭下拉刷新开启全局下拉刷新----->app.json:{ "window": { .原创 2020-07-14 17:56:24 · 3844 阅读 · 0 评论 -
微信swiper组件使用遇见的坑(css实现高度自适应)
在开发图片展示类的小程序时,swiper组件是非常好用的,但是其中也有些“坑”,等着你去踩。好啦,我已经踩过了,给各位一个借鉴吧~#####效果:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BSu8zg4-1590551408090)(https://upload-images.jianshu.io/upload_images/17596677-6d9e944a38a6b02f.gif?imageMogr2/auto-orient/strip)]##1.使用首先.原创 2020-05-27 11:51:35 · 1269 阅读 · 0 评论 -
微信小程序跳转详情页面
今天,我们要实现如下的效果,进入详情页,获取产品的具体数据。本文请求的数据是本地的,实际开发是要通过ajax请求服务器中的产品数据,为了避免业务代码扰乱视听,只截取了关键代码~1.首先我们需要两个页面,一个首页(就是产品列表页),一个详情页(产品的具体数据页)首页wxml代码:这里举例的是传id到详情页,这样详情页才知道我们需要加载的是哪个产品,也可以传index下标,不过感觉id更靠谱些。(id是你产品列表里面的数据,渲染列表时拿到的) <!-- bindtap绑定的是首页跳转函数, .原创 2020-05-23 15:41:15 · 10470 阅读 · 5 评论 -
微信小程序创建动态class(取下标控制和具体值控制class两种方式)
##1.创建动态classwxml : <view class="collectTypeBox flex"> <!-- 下面collectType是条件, collectActive是动态class名称 --> <text class="flex {{collectType==0?'collectActive':''}}" bindtap="personalCollect" data-type="0">旅行</text>原创 2020-05-23 15:38:06 · 2725 阅读 · 1 评论 -
微信小程序(固定头部,隐藏滚动条)
开发微信小程序时,有时设置页面样式,需要用到头部固定,内容滚动,下面看看怎么做的吧!##方法一:1:固定元素需要固定的元素盒子设置样式:.box{ position: fixed; top: 0; width: 100%;}2:隐藏滚动条父元素设置:.fatherBox{ width: 100vw;height: 100vh;overflow-x: hidden;overflow-y: auto;}滚动条所在的盒元素设置:.songBox::-we原创 2020-05-23 15:35:16 · 2120 阅读 · 0 评论 -
微信小程序轮播图(适配机型)
1:wxss样式:/* 页面显示图片的框 */.showTableBox { position: relative; width: 100%; height: 180px; overflow: hidden;}/* img图片所在的父元素盒子,有几张img,width就设置百分之几百 */.slideshowImgBox { position: absolute; z-index: 1; width: 500%; height: 1原创 2020-05-23 15:30:01 · 1340 阅读 · 0 评论 -
小程序应用 WeUi (新手向)
官方链接:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib最近开发小程序,需要用到微信的ui组件,由于自己没好好看文档,不知道官网上引用的“useExtendedLib”是在哪个文件中引用,蠢哭了,搜索了好多教程都是下载代码,手动配置,挺简单,但是使用时路径怎么都不对,报错。回到文档上,其实只要仔细看看,是在全局引用,一切都豁然开朗,下面开始吧!1.在全局jso原创 2020-05-23 15:24:37 · 1726 阅读 · 0 评论 -
小程序应用iconfont教程
微信小程序引入Iconfont图标(可修改样式)1:添加需要的图标至项目;链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22:下载至本地;3:解压,找到iconfont.css ,更改后缀名为confont.wxss;4:在app.wxss文件中引入(全局文件中引入,路径要正确哦~)/* app.wxss文件 */@import"./iconfont/font_1799731_h63n8jiz5a4//ic原创 2020-05-23 15:15:13 · 1049 阅读 · 0 评论