小程序
sunsineq
这个作者很懒,什么都没留下…
展开
-
解决使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题
uni-app的编译器在webpack配置中特殊处理了这个uni.scss,使得每个scss文件都被注入这个uni.scss,达到全局可用的效果。使用分包之后会发现遇到了一个奇怪的问题,子包的组件和js文件会被打包到主包的vendor.js文件中,这就导致了vendor.js过大。除了TabBa的页面,其他的页面进行分包处理,保证主包的大小,因为在编译后那些静态js和组件也会放入主包中,分包方式官网有详细解释。2、配置好重行运行,会发现分包的js文件将不会再打包到主包的vendor.js中了。原创 2023-10-16 14:54:52 · 1949 阅读 · 0 评论 -
小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称,插件通过 wx.getUserInfo 接口将正常返回用户头像昵称。考虑到近期开发者对小程序用户头像昵称获取规则调整的相关反馈,平台将接口回收的截止时间由2022年10月25日延期至2022年11月8日24时。在小程序内,开发者可以通过 wx.login 接口直接获取用户的 openId 与 unionId 信息,实现微信身份登录,支原创 2022-11-29 09:27:24 · 623 阅读 · 0 评论 -
微信小程序审核被拒,原因:地理位置相关接口暂未开通。接口wx.getLocation需要开发者申请。
刚提交审核的微信小程序被拒了,因为他们修改了使用地理位置权限接口的使用。需要开发者登录微信公众平台,申请下,不过审核过程很慢……点击去开通的时候需要填写应用场景最好按照下面官方链接应用场景写,才会审核通过,刚开始随便写的,就没通过。开发管理-->接口设置-->地理位置去申请相应的接口。wx.getLocation微信介绍。转载 2022-09-16 16:02:18 · 831 阅读 · 2 评论 -
申请的wx.getLocation接口因小程序内未含有申请接口相应使用场景审核不通过
申请的wx.getLocation接口因小程序内未含有申请接口相应使用场景审核不通过转载 2022-09-16 15:56:35 · 325 阅读 · 0 评论 -
[渲染层错误] TypeError: Cannot read property ‘__wxElement‘ of null
[渲染层错误] TypeError: Cannot read property '__wxElement' of null原创 2022-09-16 14:16:30 · 1538 阅读 · 0 评论 -
[渲染层错误] ReferenceError: getCanvasHandlers is not defined
ReferenceError: getCanvasHandlers is not defined转载 2022-09-16 14:08:55 · 136 阅读 · 0 评论 -
小程序getLocation需要在app.json中声明permission字段
小程序getLocation需要在app.json中声明permission字段,个别需要获取用户地理位置的在开发者工具调试时会出现getLocation需要在app.json中声明permission字段 提示,"desc":"请点击确定"app.json里加上这个。原创 2022-09-15 15:38:33 · 416 阅读 · 0 评论 -
微信小程序-自动定位并将经纬度解析为具体地址
这是开发文档 里面有具体步骤和示例 http://lbs.qq.com/qqmap_wx_jssdk/index.html。但是需要获取具体地址 如:湖南省长沙市岳麓区****,就需要使用到外部的API(此处用到的是腾讯的位置服务)在微信小程序开发文档中可以找到这个API的使用示例。微信小程序可以通过API获取当前位置的经纬度。一、index.wxml 显示经纬度及地址数据。自动获取地理位置可用于签到,具体实现如下。二、index.js 调用API获取数据。三、app.json。转载 2022-09-15 15:34:14 · 1684 阅读 · 0 评论 -
微信小程序 onReachBottom 上拉加载
3、翻页时更新页码pagenum+1,并触发新一轮请求,和第2部形成循环。1、首先在data里定义一下返回数据data,和翻页的页数pagenum。2、具体的请求过程,包含新老数据的数组合并,实现数据实时更新。4、json 页面设置。转载 2022-09-08 20:59:09 · 358 阅读 · 0 评论 -
微信小程序 获取地理位置(显示地图并显示经纬度)
今天来说一下怎么显示地图并获取经纬度(获取到经纬度后显示地图)首先我们先创建一个项目结构如下。我们先来看一下wxml代码。然后我们来看一下js代码。转载 2022-09-08 20:51:13 · 5055 阅读 · 0 评论 -
6行代码实现微信小程序页面返回顶部效果
小程序页面添加返回顶部按钮实例:js代码:Page({ data: { topNum: 0 }, returnTop: function () { this.setData({ topNum: this.data.topNum = 0 }); }})wxml:<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <view>1&原创 2020-06-15 15:41:09 · 256 阅读 · 0 评论 -
微信小程序 通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果
微信小程序 通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应用内的某个页面。 但是不允许跳转到tabbar页面。 在小程序插件中使用时,只能在当前插件的页面中调用 实现效果: 例如,当点击某个按钮,清空了本地数据缓存,而页面显示效果并没有发生变化, 此时可以在按钮执行成功逻辑后,加入以下代码,以实现刷新页面效果. re...原创 2021-04-16 08:42:29 · 5604 阅读 · 0 评论 -
微信小程序 wx.getUserProfile 获取用户信息
注意事项: 基础库2.10.4后支持 只能用户主动点击触发作用: 获取用户信息。 每次请求都会弹出授权窗口,用户同意后返回userInfo对象 成功时返回:userInfo:{ avatarUrl: "头像链接" city: "城市" country: "国家" gender: 1(性别1/0) language: "语言" nickName: "昵称" province: "省份"}wxml:<view class=".原创 2021-04-16 08:36:46 · 2701 阅读 · 0 评论 -
微信小程序防止多次点击提交的方法
微信小程序防止多次点击提交的方法适用范围:微信小程序 基础库1.0.1以上所有版本一、利用页面数据加上lock参数page.js中加入Page({ data: { lock: false }, //表单提交 submit(){ let that = this; let {lock} = that.data; if(!lock){ that.setData({lock:true}); //数据请求操作 //请求完成后 开锁 that.setDat原创 2021-02-23 17:31:34 · 1037 阅读 · 0 评论 -
微信小程序-input实现模糊查询功能
微信小程序-input实现模糊查询功能实现模糊查询功能之需求 效果图 实现 踩的坑 JS实现模糊查询的几种方法 性能测试: 结论 实现模糊查询功能之需求今天在做小程序的时候,遇到一个需求是对列表进行模糊查询。对于模糊查询,一般都是传关键字给后端,由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验。我目前的情况恰好是后台已经把全部数据给到前端了,所以就想用js对数据进行一个模糊查询。效果图实现HTML&l.转载 2021-02-08 17:24:14 · 5322 阅读 · 0 评论 -
背景图片自适应功能 | 小程序
1、CSS3样式属性(背景图片自适应) 语法 =>background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain; 作用 => 设置背景图片尺寸 示例 => background-size:50px,50px;(背景图片宽度为50px,高度为50px)2、小程序设备信息API 语法 => wx.getSystemInfo(Object)...原创 2020-12-26 10:41:49 · 1513 阅读 · 0 评论 -
小程序页面生命周期函数
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () {..原创 2020-11-10 21:21:46 · 371 阅读 · 0 评论 -
小程序点击事件传参数【适用于循环出来的数据】
小程序点击事件传参数【适用于循环出来的数据】 <view bindtap="getQuery" data-index="1">点击事件传参</view> getQuery: function(e){ // 传递的参数 let query = e.currentTarget.dataset['index']; }...原创 2020-11-03 14:57:18 · 388 阅读 · 0 评论 -
小程序标题 设置 navigationBarTitleText 不显示
页面设置了navigationBarTitleText ,但是不显示问题原因:app.json中的pages没有配置路径原创 2020-11-01 21:47:02 · 1451 阅读 · 0 评论 -
errmsg: “invalid code, hints: [ req_id: HQd79a0747th31 ]
出现这个问题的原因是后台设置的appid和小程序内设置的appid不相同的原因需要对应替换掉小程序project.config.json文件中的appid信息原创 2020-10-29 17:33:35 · 1651 阅读 · 1 评论 -
小程序中输入框input的type属性 text、number、idcard、digit 区别
微信小程序的 input有个属性叫 type,这个 type有几个可选值:text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点、有个 X键) digit:数字键盘(有小数点)注意:number是无小数点的,digit是有小数点的<text class="lxr" decode>联系人</text><view class="lxrinput"> <input type="text" cl...原创 2020-05-31 18:34:10 · 5634 阅读 · 2 评论 -
微信小程序实现分页加载数据
wxml页面<block wx:for="{{dataArray}}" wx:for-item="list" wx:key="data"> <block wx:for="{{list}}" wx:key="list"> <view>内容</view> </block></block>js页面onLoad: function(){ this.getList();}, // 页面上拉原创 2020-05-30 18:31:21 · 2213 阅读 · 0 评论 -
小程序页面之间的传值
从A页面传值给B页面A页面:<view class="choice_list"> <block wx:for="{{newsrecommend}}" wx:key="index"> <navigator url="/pages/policy/policy/policyinfo?article_id={{item.article_id}}"> <view class='synews'> <原创 2020-05-30 17:11:58 · 278 阅读 · 0 评论 -
小程序背景图片解决办法:转成base64
wxml:<view class="section"> <input placeholder="姓名" name="name" bindblur="name" style='background-image: url({{background1}});' /> </view> <view class="section"> <input type='number' placeholder="电话" bindblur="p原创 2020-05-11 22:22:48 · 1426 阅读 · 0 评论 -
微信小程序 - 小程序表单验证demo-表单验证插件WxValidate使用
表单验证插件:https://github.com/skyvow/wx-extend1.拷贝至util目录2.项目引入3.查看wxml匹配规则,通过name4.在js配置规则import WxValidate from '../../../utils/WxValidate';Page({ /** * 页面的初始数据 */ data: {}, onLoad: function(options) { /** * 4-.原创 2020-05-11 15:55:15 · 698 阅读 · 0 评论 -
微信小程序-图片Image几种mode 设置图片方法
图片自适应i,并缩放的方法:设置marrgin:0与padding:0(X)样式设置:display:flex;(√)widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变最建议使用的图片缩放方式mode: ‘scaleToFill’,不保持纵横比缩放图片,使图片完全适应’mode: ‘aspectFit’,保持纵横比缩放图片,使图片的长边能完全显示出来’mode: ‘aspectFill’,保持纵横比缩放图片,只保证图片的短边能完全显示出来'。也就是说转载 2020-05-11 11:45:15 · 3096 阅读 · 0 评论 -
小程序对表单input标签为空判断
在事件中获取input的内容 var input = e.detail.value; // 获取当前表单元素输入框内容 if(input) { } else { wx.showToast({ title: '不能为空或您未更改', icon: 'false', duration: 2000 }) }...原创 2020-05-09 18:18:00 · 1587 阅读 · 0 评论 -
微信小程序表单验证(手机号、邮箱验证、输入非空)
Page({ /*** 页面的初始数据*/ data: { indicatorDots: false, autoplay: false, interval: 5000, duration: 1000, proList: null, name:"", phone:"", email:"", company:"", job:"", vip:"" }, // 判定输入为非空字符 formSubmit: function (e) { .原创 2020-05-09 18:15:06 · 2208 阅读 · 0 评论 -
微信小程序正则表达式验证表单(验证手机号-身份证-邮箱..)
手机号验证:if (!(/^1[34578]\d{9}$/.test(e.detail.value.phone))) {wx.showToast({title: '手机号码有误',duration: 2000,icon:'none'});return false;}邮箱验证:if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(that.data.Emli原创 2020-05-09 18:12:02 · 1685 阅读 · 1 评论 -
小程序延迟加载页面,使用定时器延迟跳转
wx.showToast({ title: "成功修改", icon: 'success', duration: 2000, })setTimeout(function () { wx.reLaunch({ url: '../index/index', }) ...原创 2020-05-09 18:03:11 · 1237 阅读 · 0 评论 -
小程序之 input框设置placeholder的style
<input placeholder='{{capitaltext}}' placeholder-style='color:rgb(207,207,207);font-size:26rpx;' type='number' maxlength='4'></input>原创 2020-05-07 17:39:58 · 4657 阅读 · 0 评论 -
微信小程序一个页面中使用多个picker实现方法
如果两个picker使用同一个index,会出现一个改变之后,另一个picker也会改变的现象所以要修改以下内容下标:index index2 绑定函数:bindPickerChange bindPicker2Changewxml:<view class="section"> <view class="section__title"&...原创 2020-05-04 21:02:46 · 2703 阅读 · 0 评论 -
微信小程序一键拨号实现方法
1.在.wxml文件中绑定拨号事件 <button type="default" bindtap="calling">拨打电话</button> 2.在.js文件中加入逻辑代码 calling: function () { wx.makePhoneCall({ phon...原创 2020-05-03 11:02:53 · 1238 阅读 · 0 评论 -
小程序 多个空格写法
通常情况下,在微信小程序里,连续的多个空格只会被显示一个,那么如何显示多个连续的空格呢?方案一<view> <text space="ensp">你好, 哈哈哈(空格是中文字符一半大小)</text></view><view> <text space="emsp">你好, 哈哈...转载 2020-05-03 09:23:35 · 426 阅读 · 0 评论 -
微信小程序页面跳转方法总结
1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。 // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页...原创 2020-04-18 16:08:35 · 306 阅读 · 0 评论 -
微信小程序----icon组件
选择iconfont图标官网:阿里巴巴矢量字体库:https://www.iconfont.cn/步骤:阿里巴巴字体库使用方法 :https://blog.csdn.net/alsnei/article/details/54344178?utm_source=itdadao&utm_medium=referral全局引入app.wxss@font-face { fon...转载 2020-04-18 14:37:24 · 832 阅读 · 0 评论 -
微信小程序图片上传(开发实例)
图片上传服务器wxml<view class="container"> <button bindtap='chooseImageTap'>上传图片</button></view>jsPage({ /** * 页面的初始数据 */ data: { imgs: [],//本地图片地址数组 ...原创 2020-04-15 14:27:45 · 238 阅读 · 0 评论 -
微信小程序 尺寸单位rpx与px,rem相互转换
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.htmlrpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx ...原创 2020-04-15 14:15:51 · 610 阅读 · 0 评论 -
微信小程序配置顶部导航条标题颜色
{ "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextSty...原创 2020-04-15 10:31:36 · 4140 阅读 · 0 评论