微信小程序
微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
美奇开发工作室
后端开发工程师,做一个喜欢分享技术的领域开发者!
展开
-
微信小程序js判断变量不为空
【代码】微信小程序js判断变量不为空。原创 2022-11-21 22:35:07 · 1315 阅读 · 0 评论 -
修复微信小程序不能获取头像和昵称的bug,微信小程序新版头像昵称API使用
大厂程序员都是有KPI绩效考核的,所以他们不能闲着,每天要想着怎么优化程序代码、怎么满足奇葩用户的需求,所以苦逼了我们这些小公司程序员,微信一个小小的API接口改动,可能就让一个小公司因此损失惨重,甚至直接面临倒闭。鹅厂可不管你这些小公司的死活,毕竟他们又不缺用户,我们只能含泪加班改功能了。最近突然发现微信小程序的用户全都是灰色头像,昵称全都是叫“微信用户”,还以为服务器被黑客攻击,植入了大量的机器人账号,找半天问题才发现是微信小程序接口又改了,尼玛,一个头像和昵称改来改去,原创 2022-11-20 16:44:02 · 5484 阅读 · 2 评论 -
狮子鱼社区团购系统团长推广二维码不显示,以及选择地址失败的解决方案
导读:狮子鱼社区团购系统是一个开源免费的程序,自带微信小程序端和thinkphp后端,是个相当不错的团购系统。这套系统程序没有完整的使用教程,所以很多小白和我一样,只能自行研究,这过程中难免会出现很多问题,还以为是代码bug,实际上只是因为没有配置好,不懂使用。下面分享一下我遇到的问题,以及解决方法!问题一:后台团长推广二维码不显示,微信小程序提货码不显示刚开始我以为是上传图片功能有问题,小程序码没有上传到后台,后面研究了代码,发现小程序的二维码是通过微信小程序自带接口自动生成的,而这个接口原创 2022-05-17 14:11:31 · 2327 阅读 · 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 · 7673 阅读 · 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 · 1248 阅读 · 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 · 4104 阅读 · 0 评论 -
获取微信小程序源代码教程
准备工作:安装node.js,下载地址:下载 | Node.js 中文网win7系统的安装下面这个版本:windows764位系统可以安装的Node.js最高版本-互联网文档类资源-CSDN下载原创 2022-02-09 14:36:31 · 45854 阅读 · 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 · 5619 阅读 · 0 评论 -
Html5手机端网址封装成微信小程序的教程
导读:微信用户数早已超越10亿(中国使用微信的人已经超了有80),微信小程序也备受用户喜爱,如果你的网站已有H5手机端,可以将H5手机网站直接封装成微信小程序,除了不能使用微信支付功能外,其他类似分享的功能都是和真正的小程序端无异的,如此一来,可以省去开发微信小程序的时间和成本。教程步骤:前提要求:H5网站域名必须开启https,比如https://m.18ka.net/,是https开头,而不是http一、登录微信公众平台,注册一个小程序,不懂自行百度,获取AppID(小程序ID).原创 2021-03-24 12:27:39 · 19822 阅读 · 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 · 6164 阅读 · 4 评论 -
微信小程序wx.showModal的用法(不显示“取消”按钮,修改“确定”按钮名称)
示例一:显示标题和内容,按钮默认 wx.showModal({ title: '标题', content: '内容', success: function (res) { if (res.confirm) { //点击确定按钮 } else if (res.cancel) { ...原创 2019-12-26 15:51:01 · 11627 阅读 · 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 · 1983 阅读 · 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 · 2313 阅读 · 0 评论 -
微信小程序使用七牛云对象存储保存图片和文件
先给大家看效果图,如下:一、开通七牛云对象存储服务(免费的)官网:https://www.qiniu.com/,实名认证后,创建一个空间,用于保存文件二、获取AccessKey和SecretKey密钥,在“个人中心”→ “密钥管理”中三、thinkphp后端:生成七牛云上传凭证Token1、下载七牛云php依赖库,下载地址:https://github.co...原创 2019-12-09 20:43:45 · 3301 阅读 · 0 评论 -
微信小程序使用腾讯云COS对象存储保存图片和文件
示例效果图:1、开通COS对象存储服务腾讯云COS官网地址:https://cloud.tencent.com/product/cosPS:建议选择使用七牛云,七牛云是完全免费的;腾讯云COS有半年免费50G的存储服务,但腾讯云的流量是收费的,每天都给你发扣费短信,真是烦死人 ; 阿里云的OSS或者华为云的OBS都要收费(不推荐)。2、创建密钥自定义域名的教程,...原创 2019-12-07 16:33:41 · 5120 阅读 · 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 · 1035 阅读 · 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 · 11031 阅读 · 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 · 3348 阅读 · 1 评论 -
微信小程序全局变量(globalData)和缓存(StorageSync)的区别和具体用法
一、缓存(StorageSync)本地存储1、小程序中的本地存储有同步功能,可用于保存用户信息(用户登录后的一些基本信息)2、缓存的更新需要使用setStorageSync方法。二、全局变量(globalData)1、保存一些可能涉及安全类的数据,例如资源类,每次需要很准确的,就建议用全局变量。2、全局变量每次关闭小程序重新打开的时候,都会进行初始化更新。三、globalD...原创 2019-12-03 13:41:47 · 12588 阅读 · 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 · 12413 阅读 · 13 评论 -
微信小程序在.setData中动态为Object对象添加属性和值
一、给对象添加属性和值Page({ /** * 页面的初始数据 */ data: { areaObj: {}, }, areaConfirm: function(res) { this.setData({ //省 'areaObj.province': "广东省", //市 'areaObj.ci...原创 2019-12-03 12:16:06 · 2954 阅读 · 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 · 1716 阅读 · 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 · 3934 阅读 · 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 · 5882 阅读 · 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 · 1864 阅读 · 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 · 2479 阅读 · 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 · 3125 阅读 · 0 评论 -
微信小程序wxml里展示小于号的方法
需求如下图:如果直接在代码里写< 的话,会报错。因此需要变通一下,方法如下所示: <view>1、车辆尺寸要求:高{{'<'}}2.2米,宽{{'<'}}1.95米,长{{'<'}}5.5米。</view>...原创 2019-10-29 21:14:53 · 2591 阅读 · 0 评论 -
微信小程序实现wxml视图向js传递参数的方法(点击view带参数进入js)
一、什么是事件事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, dataset, touches。二、事件的使用方式在组件中绑定一个事件处理函数。如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。...原创 2019-10-29 15:36:56 · 8323 阅读 · 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 · 14060 阅读 · 5 评论 -
微信小程序地图API接口应用:获取当前位置,根据地址显示地图导航,选择位置
一、获取当前位置map: function () { wx.getLocation({ //定位类型 wgs84, gcj02 // wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标 type: 'gcj02', //获取位置成功 success: function (res) { ...原创 2019-10-28 18:55:48 · 3072 阅读 · 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 · 1711 阅读 · 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 · 17540 阅读 · 1 评论 -
微信小程序提示 “Error: 代码包大小为 2491 kb,上限为 2048 kb请删除文件后重试”
遇到情况:预览小程序时,提示 “Error: 代码包大小为 2491 kb,上限为 2048 kb请删除文件后重试”看了一下官方说明如下:目前小程序分包大小有以下限制:解决方案:对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载...原创 2019-10-24 18:01:03 · 30825 阅读 · 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 · 34515 阅读 · 1 评论 -
微信小程序组件化开发:自定义一个modal弹出窗(Dialog对话框)
自定义组件分为简单的三个步骤:创建组件 → 编写组件 → 使用组件先给大家看一下效果图(可以设置只显示一个按钮):第一步、创建组件1、新建my-modal文件夹,用来保存组件。在my-modal文件夹下分别创建以下4个文件:index.jsonindex.wxmlindex.jsindex.wxss2、在index.json里面添加"component":...原创 2019-10-23 12:34:11 · 3141 阅读 · 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 · 4524 阅读 · 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 · 3506 阅读 · 1 评论 -
微信小程序(sitemap 索引情况)提示:根据 sitemap 的规则[0],当前页面 [pages/.../...] 将被索引
遇到问题:这个并不算是报错,只是一个警告提示,提示开发者哪些页面被微信收录了(代表这个页面可以在微信的搜索中被搜到),sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 【project.config.json】 的 setting 中添加配置字段 checkSiteMap 为 false"setting": { "url...原创 2019-10-21 22:48:46 · 13580 阅读 · 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 · 2800 阅读 · 0 评论