关注
分享
微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
美奇开发工作室
后端开发工程师，做一个喜欢分享技术的领域开发者！
展开
-
微信小程序js判断变量不为空
【代码】微信小程序js判断变量不为空。原创 2022-11-21 22:35:07 · 1278 阅读 · 0 评论 -
修复微信小程序不能获取头像和昵称的bug，微信小程序新版头像昵称API使用
大厂程序员都是有KPI绩效考核的，所以他们不能闲着，每天要想着怎么优化程序代码、怎么满足奇葩用户的需求，所以苦逼了我们这些小公司程序员，微信一个小小的API接口改动，可能就让一个小公司因此损失惨重，甚至直接面临倒闭。鹅厂可不管你这些小公司的死活，毕竟他们又不缺用户，我们只能含泪加班改功能了。最近突然发现微信小程序的用户全都是灰色头像，昵称全都是叫“微信用户”，还以为服务器被黑客攻击，植入了大量的机器人账号，找半天问题才发现是微信小程序接口又改了，尼玛，一个头像和昵称改来改去，原创 2022-11-20 16:44:02 · 5296 阅读 · 2 评论 -
狮子鱼社区团购系统团长推广二维码不显示，以及选择地址失败的解决方案
导读：狮子鱼社区团购系统是一个开源免费的程序，自带微信小程序端和thinkphp后端，是个相当不错的团购系统。这套系统程序没有完整的使用教程，所以很多小白和我一样，只能自行研究，这过程中难免会出现很多问题，还以为是代码bug，实际上只是因为没有配置好，不懂使用。下面分享一下我遇到的问题，以及解决方法！问题一：后台团长推广二维码不显示，微信小程序提货码不显示刚开始我以为是上传图片功能有问题，小程序码没有上传到后台，后面研究了代码，发现小程序的二维码是通过微信小程序自带接口自动生成的，而这个接口原创 2022-05-17 14:11:31 · 2215 阅读 · 0 评论 -
微信小程序往数组中添加元素对象
需求：将用逗号分隔的字符串分割成数组，然后组装成指定形式的新数组。1、先来看我们需要的数组格式：itemList: [ {id: '1', name: '能看懂相关专业图纸'}, {id: '2', name: '能带领团队作业'},],2、目前服务端获取的数组字符串：var str= "能看懂相关专业图纸,能带领团队作业"3、转换数组：let strArry=str.split(","); let tempArray=[];for (v.原创 2022-03-07 17:35:56 · 7556 阅读 · 2 评论 -
微信小程序图片路径为空或者不存在时，显示默认图片
<block wx:if="{{userInfo.avatarUrl}}"> <image class="avatar" src="{{userInfo.avatarUrl}}"></image> </block> <block wx:else> <image class="avatar" src="/images/default.png" /> <...原创 2022-03-07 14:01:04 · 1204 阅读 · 0 评论 -
解决“微信小程序http请求参数为空时，传到java后端变成了undefined”问题
遇到问题：最近在对接微信小程序和java后端springboot框架的接口，然后发现一个问题，当微信小程序发起http请求时，如果请求参数的值为空，传到java后端时就变成了undefined，这样情况如果后端程序员没有做来判断，就可能导致数据库查询失败。原因分析：1、先来看看我之前出错的js代码：const app = getApp();const http = require("../../utils/http.js");Page({ /** * 页面的初始数据 */原创 2022-03-06 22:07:36 · 4046 阅读 · 0 评论 -
获取微信小程序源代码教程
准备工作：安装node.js，下载地址：下载 | Node.js 中文网win7系统的安装下面这个版本：windows764位系统可以安装的Node.js最高版本-互联网文档类资源-CSDN下载原创 2022-02-09 14:36:31 · 45321 阅读 · 24 评论 -
微信小程序js生成唯一不重复ID的函数方法
微信小程序中//生成唯一不重复ID generateUuid: function (length=5){ return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36); }javascript中1、随机数长度控制,定义一个长度变量（length），生成可控长度的随...原创 2019-12-03 17:26:01 · 5502 阅读 · 0 评论 -
Html5手机端网址封装成微信小程序的教程
导读：微信用户数早已超越10亿（中国使用微信的人已经超了有80），微信小程序也备受用户喜爱，如果你的网站已有H5手机端，可以将H5手机网站直接封装成微信小程序，除了不能使用微信支付功能外，其他类似分享的功能都是和真正的小程序端无异的，如此一来，可以省去开发微信小程序的时间和成本。教程步骤：前提要求：H5网站域名必须开启https，比如https://m.18ka.net/，是https开头，而不是http一、登录微信公众平台，注册一个小程序，不懂自行百度，获取AppID(小程序ID).原创 2021-03-24 12:27:39 · 18404 阅读 · 9 评论 -
微信小程序使用canvas画布生成二维码海报分享图片（完整示例代码）
先看一下效果图：canvas.wxml<block wx:if="{{canvasType}}"> <van-popup show="{{ canvasType }}" bind:click-overlay="onClickOverlay" custom-style="width:90%;height: 450px;"> <canvas c...原创 2019-12-26 16:46:12 · 6124 阅读 · 4 评论 -
微信小程序wx.showModal的用法（不显示“取消”按钮，修改“确定”按钮名称）
示例一：显示标题和内容，按钮默认 wx.showModal({ title: '标题', content: '内容', success: function (res) { if (res.confirm) { //点击确定按钮 } else if (res.cancel) { ...原创 2019-12-26 15:51:01 · 11493 阅读 · 0 评论 -
微信小程序：wx.request使用POST请求时后端无法获取数据的原因
遇到的坑：例如在写微信小程序接口时，method请求方式有POST和GET两种，为了数据安全，我们会偏向于使用POST请求方式访问服务器端；当我们使用POST方式请求时，后端无法获取到传送的参数，但使用GET方式却是可以的。解决办法：设置请求的 header头：header: { "Content-Type": "application/x-www-form-urlenco...原创 2019-12-24 21:23:53 · 1942 阅读 · 0 评论 -
微信小程序解决“navigator不能直接跳转到tabBar页面”的问题
问题分析：在微信小程序index.wxml中想在页面上使用navigator跳转到pages下的另一个页面，结果发现点击没有任何反应。原因是目标页面在tabBar设置里，想跳转到tabBar页面，需要使用switchTab功能。解决方法一：navigator 的 open-type 设置为 switchTab<navigator url="/pages/service/se...原创 2019-12-14 11:15:01 · 2262 阅读 · 0 评论 -
微信小程序使用七牛云对象存储保存图片和文件
先给大家看效果图，如下：一、开通七牛云对象存储服务（免费的）官网：https://www.qiniu.com/，实名认证后，创建一个空间，用于保存文件二、获取AccessKey和SecretKey密钥，在“个人中心”→ “密钥管理”中三、thinkphp后端：生成七牛云上传凭证Token1、下载七牛云php依赖库，下载地址：https://github.co...原创 2019-12-09 20:43:45 · 3181 阅读 · 0 评论 -
微信小程序使用腾讯云COS对象存储保存图片和文件
示例效果图：1、开通COS对象存储服务腾讯云COS官网地址：https://cloud.tencent.com/product/cosPS：建议选择使用七牛云，七牛云是完全免费的；腾讯云COS有半年免费50G的存储服务，但腾讯云的流量是收费的，每天都给你发扣费短信，真是烦死人 ; 阿里云的OSS或者华为云的OBS都要收费（不推荐）。2、创建密钥自定义域名的教程，...原创 2019-12-07 16:33:41 · 5010 阅读 · 2 评论 -
微信小程序图片加载失败时替换为默认图片的方法
先看一下效果图：1、第一种情况：单独加载一个图片index.wxml代码：<image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image>index.js代码：errorFunction: function(){ this.setData...原创 2019-12-06 12:37:39 · 995 阅读 · 0 评论 -
微信小程序使用高德地图（amap）实现检索定位附近周边的POI功能示例
先给大家看一下效果图展示：1、登录高德地图开发者平台https://lbs.amap.com/，申请接口Key2、在高德开发平台下载微信小程序SDK，https://lbs.amap.com/api/wx/download解压下载的文件得到 amap-wx.js ，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下...原创 2019-12-05 12:24:18 · 10524 阅读 · 3 评论 -
微信小程序使用Number()解决字符串的数字加减算法bug问题
先看一下具体的bug问题，js代码如下：var id = that.data.areaList.length + 1;if (list) { console.log("list存在，id=" + id);} else { console.log("list不存在，id=" + id);}console日志输出结果：从结果可知，“字符+数字” 变成了字符串的拼...原创 2019-12-03 15:10:20 · 3288 阅读 · 1 评论 -
微信小程序全局变量（globalData）和缓存（StorageSync）的区别和具体用法
一、缓存（StorageSync）本地存储1、小程序中的本地存储有同步功能，可用于保存用户信息(用户登录后的一些基本信息)2、缓存的更新需要使用setStorageSync方法。二、全局变量（globalData）1、保存一些可能涉及安全类的数据，例如资源类，每次需要很准确的，就建议用全局变量。2、全局变量每次关闭小程序重新打开的时候，都会进行初始化更新。三、globalD...原创 2019-12-03 13:41:47 · 12417 阅读 · 0 评论 -
微信小程序通过微信添加地址（wx.chooseAddress用法）
先看一下效果图：index.wxml代码 <view class="no-content" wx:if="{{areaList.length==0}}"> <view class="imgbox"> <image style="width:200rpx;" src="/images/none.png" mode="widthFix...原创 2019-12-03 12:51:14 · 12191 阅读 · 13 评论 -
微信小程序在.setData中动态为Object对象添加属性和值
一、给对象添加属性和值Page({ /** * 页面的初始数据 */ data: { areaObj: {}, }, areaConfirm: function(res) { this.setData({ //省 'areaObj.province': "广东省", //市 'areaObj.ci...原创 2019-12-03 12:16:06 · 2911 阅读 · 0 评论 -
微信小程序判断页面向下滚动时，让tab栏固定到页面顶部。
先看一下效果图：index.wxml <view class='{{tabIsTop ? "fixedTop" : ""}}'> <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> <i-tab key="tab1" title="车主圈...原创 2019-11-30 12:29:01 · 1685 阅读 · 0 评论 -
微信小程序页面跳转wx.navigateTo和wx.redirectTo的区别
wx.navigateTo：保留当前页面，跳转到应用内的某个页面示例代码：// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面wx.navigateTo({ url: '/pages/a/a?id=1'}) // 此处是B页面wx.navigateTo({ url:...原创 2019-11-07 11:29:19 · 3835 阅读 · 0 评论 -
微信小程序使用contact-button调用在线客服聊天功能
先给大家看一下效果图：一、 登录小程序后台添加客服人员二、在.wxml页面添加contact客服代码1、第一种方式：使用<contact-button>按钮，缺点：不能自定义图标，官方自带的太丑<contact-button class='cBtn' type="default-dark" size="20" session-from="weapp"&...原创 2019-11-07 09:54:24 · 5377 阅读 · 1 评论 -
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一、通过阿里图标库生成iconfont.wxss1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon2、把需要的图标加入购物车，然后再添加到项目里3、打开项目，选择“Font class”类型，点击下载至本地二、创建icon组件1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建...原创 2019-11-06 14:58:41 · 1808 阅读 · 0 评论 -
微信小程序解决 “navigator与button点击图片时显示灰色背景”的方法
遇到问题点击图片时，出现灰色背景，如下图：解决办法1、navigator添加hover-class="none"属性 <navigator url="/packageB/pages/vip/vip" hover-class="none"> <image style="width:100%;" src="../../images/vip....原创 2019-11-06 11:14:57 · 2445 阅读 · 0 评论 -
微信小程序条件判断语句wx:if，elif ，else的用法
一、搭配view<view wx:if="{{条件1}}"> </view><view wx:elif="{{条件2}}"> </view><view wx:else> </view>二、搭配block<block wx:if="{{条件1}}"> <v...原创 2019-10-29 21:44:03 · 3092 阅读 · 0 评论 -
微信小程序wxml里展示小于号的方法
需求如下图：如果直接在代码里写< 的话，会报错。因此需要变通一下，方法如下所示： <view>1、车辆尺寸要求：高{{'<'}}2.2米，宽{{'<'}}1.95米，长{{'<'}}5.5米。</view>...原创 2019-10-29 21:14:53 · 2519 阅读 · 0 评论 -
微信小程序实现wxml视图向js传递参数的方法（点击view带参数进入js）
一、什么是事件事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。二、事件的使用方式在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。...原创 2019-10-29 15:36:56 · 8209 阅读 · 0 评论 -
微信小程序 wx.showToast()的用法，更换icon图标
wx.showToast({ title:"成功", icon: 'success', image: '../../images/fail.png', duration: 2000, mask: false})参数讲解：title ---------------- 标题，要显示的提示信息ico...原创 2019-10-29 11:34:32 · 14033 阅读 · 5 评论 -
微信小程序地图API接口应用：获取当前位置，根据地址显示地图导航，选择位置
一、获取当前位置map: function () { wx.getLocation({ //定位类型 wgs84, gcj02 // wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标 type: 'gcj02', //获取位置成功 success: function (res) { ...原创 2019-10-28 18:55:48 · 3059 阅读 · 0 评论 -
微信小程序wxss去掉button按钮的边框（css去边框也是同理）
先看一下效果图对比：1、wxml代码：<button class="none-btn" open-type="share"> <i-icon size="28" type="send" /></button><view>分享</view>2、wxss代码：.none-btn{border: none...原创 2019-10-28 18:21:25 · 1693 阅读 · 0 评论 -
微信小程序让image图片居中显示和铺满全屏幕的方法
wxml<view class='imagesize'> <image src="/images/1.png" mode="widthFix"> </image></view>wxss1、图片水平居中（屏幕顶部）：.imagesize{ display:flex; //flex布...原创 2019-10-24 20:23:16 · 16930 阅读 · 1 评论 -
微信小程序提示 “Error: 代码包大小为 2491 kb，上限为 2048 kb请删除文件后重试”
遇到情况：预览小程序时，提示 “Error: 代码包大小为 2491 kb，上限为 2048 kb请删除文件后重试”看了一下官方说明如下：目前小程序分包大小有以下限制：解决方案：对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载...原创 2019-10-24 18:01:03 · 30709 阅读 · 3 评论 -
微信小程序使用wx.login()获取用户的openid和session_key（示例后端使用Thinkphp）
开发需求：我们在开发微信小程序过程中，需要绑定微信用户的信息到数据库里，那么就需要获得用户的唯一标识openid,而微信为了安全，禁止小程序直接访问https://api.weixin.qq.com 的接口,因此不能直接拿到用户的openid。解决方案：1、先通过wx.login获取一个临时凭证codewx.login(OBJECT)调用接口获取登录凭证（code）进而换取用户...原创 2019-10-23 12:57:23 · 34377 阅读 · 1 评论 -
微信小程序组件化开发：自定义一个modal弹出窗（Dialog对话框）
自定义组件分为简单的三个步骤：创建组件 → 编写组件 → 使用组件先给大家看一下效果图（可以设置只显示一个按钮）：第一步、创建组件1、新建my-modal文件夹，用来保存组件。在my-modal文件夹下分别创建以下4个文件：index.jsonindex.wxmlindex.jsindex.wxss2、在index.json里面添加"component":...原创 2019-10-23 12:34:11 · 3061 阅读 · 3 评论 -
微信小程序使用wx.getSystemInfo()接口获取系统信息[systemInfo]
微信小程序获取系统信息的API：回调参数：Object res属性 类型 说明 最低版本 brand string 设备品牌 1.5.0 model string 设备型号 pixelRatio number 设备像素比 screenWidth number 屏幕宽度，单位px ...原创 2019-10-22 21:02:00 · 4394 阅读 · 0 评论 -
微信小程序iViewUi weapp使用自定义i-class去掉九宫格Grid边框（解决i-class覆盖样式无效的问题）
示例说明：在微信小程序中iviewUi weapp的第三方组件，不允许直接修改样式，但是可以通过i-class的方式进行自定义添加样式。开发需求：如下图所见，iviewUi weapp的Grid九宫格自带边框特效，而我们并不需要这个效果，因此要自己写i-class样式去掉边框。解决方案：1、.wxml：在要修改的样式上添加i-class2、wxss：编写刚才新加...原创 2019-10-22 09:30:40 · 3455 阅读 · 1 评论 -
微信小程序（sitemap 索引情况）提示：根据 sitemap 的规则[0]，当前页面 [pages/.../...] 将被索引
遇到问题：这个并不算是报错，只是一个警告提示，提示开发者哪些页面被微信收录了（代表这个页面可以在微信的搜索中被搜到），sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 【project.config.json】 的 setting 中添加配置字段 checkSiteMap 为 false"setting": { "url...原创 2019-10-21 22:48:46 · 13553 阅读 · 3 评论 -
微信小程序Image图片实现width宽度100%，height高度自适应（解决图片变形问题）
第一步：wxss样式设置宽度为100%/* pages/user/user.wxss */.img{ width: 100%;}第二步：<image/>标签上，添加属性mode="widthFix"<!--pages/user/user.wxml--><image class="img" src="../../images/bg.png" ...原创 2019-10-21 15:17:20 · 2721 阅读 · 0 评论