微信小程序
文章平均质量分 67
开发微信小程序小程序中遇到的问题以及一些效果demo。
Rattenking
迎接着黎明的曙光前行!
展开
-
微信小程序 ---- 通过 URLScheme 或 URLLink 从短信、邮件、微信外网页等场景打开小程序
部分 URL Link 返回的 url_link,在QQ浏览器会被拦截!,因此目前我还是使用的 URL Scheme!原创 2024-01-04 11:03:16 · 2967 阅读 · 0 评论 -
【微信小程序】---- 解决 request:fail url not in domain list
1. 看到错误,就知道是域名没有配置,因此直接配置域名,并没有认真阅读文档,端口号也需要配置;2. 各种问题,证书等都测试过,发现没有问题,最后发现端口号未配置;3. 开发时请认真阅读文档,熟悉了直接按照经验配置,并没有认真阅读文档。原创 2023-08-22 10:00:00 · 846 阅读 · 0 评论 -
微信小程序 ---- 【navigateToMiniProgram:fail should have appId or shortLink】
问题出现的地方并不一定是问题本身,而是可能由于其他原因导致的报错!报错时,从问题本身依次查找分析导致问题的原因!原创 2022-10-20 10:44:43 · 994 阅读 · 0 评论 -
微信小程序 ---- 【TypeError: Cannot read property ‘forceUpdate‘ of undefined】
1. 报错2. 报错原因由于使用的是 Taro 多端框架,运行编译后的微信小程序没有对应的AppId导致!3. 解决办法设置 ----> 项目设置 ----> 基本信息 ----> 在APPID栏目添加你自己申请的appid,或者使用测试的appid4. 刷新完美解决,不再报错!...原创 2022-05-09 09:58:21 · 2500 阅读 · 1 评论 -
【微信小程序】---- weapp-redux的使用文档
weapp-redux 使用1. 引入 weapp-redux 插件克隆 weapp-redux-demo 代码库git clone https://gitee.com/Rattenking/weapp-redux-demo.git将项目文件夹下的 weapp-redux 拷贝到自己项目2. 创建全局的 store在 weapp-redux 同级创建 store 文件夹在 store 文件夹下分别创建 actions, constants, reducers 文件夹const原创 2021-11-26 17:31:32 · 625 阅读 · 0 评论 -
【微信小程序】---- redux 在原生微信小程序的使用实例
1. 目标学会 redux 在原生微信小程序的使用;学习和思考微信小程序中封装 Provider;2. 引入 redux 文件下载 reduxgit 克隆 git clone https://github.com/reduxjs/redux.git3. 修改 redux 源码import createStore from './redux/createStore';import combineReducers from './redux/combineReducers';im原创 2021-11-26 14:54:29 · 2894 阅读 · 0 评论 -
【微信小程序】---- CustomBar 公用组件封装
1. WXML 代码公用 CustomBar 盒子,此处可以设置公用的背景/字体颜色和字体大小;CustomBar 具体内容,按照胶囊右边距设置 CustomBar 盒子的左右 margin,设置盒子的高度;右侧胶囊占位,左侧动态根据 title 判断展示 slot 还是直接显示 title;除去 CustomBar 的展示数据,其他的 slot !<view class="rui-head-content" style="background: url({{bannerBgIcon}}原创 2021-09-16 15:43:45 · 1239 阅读 · 0 评论 -
【微信小程序】---- 监听页面停止滚动
1. 场景需求原创 2021-09-09 10:33:12 · 3512 阅读 · 0 评论 -
【微信小程序】---- Promise.then(success, fail)执行顺序的问题
1. 出错场景收货地址管理列表,设置默认,成功后刷新地址!2. 出错代码获取设置默认地址的id;获取用户的token和分配调用api的key值;使用axios将当前地址id的地址设置为默认地址;设置成功后刷新地址列表;注意:由于在地址列表中使用了当前页面栈this,需要给地址列表绑定this。 let addressId = e.detail.address.addressId; let { token, key: appKey} = this.data;原创 2021-07-19 16:30:12 · 2079 阅读 · 0 评论 -
微信小程序 ---- 【invalid credential, access_token is invalid】
报错返回{ "errcode": 40001, "errmsg": "invalid credential, access_token is invalid or not latest rid: 6004f3da-1529ba72-5c345f67"}报错原因access_token 过期!需要刷新 access_token!《获取 access_token》getAccessTokenaccess_token 的存储与更新access_token 的存储至少要保留 512原创 2021-01-18 11:26:45 · 6723 阅读 · 5 评论 -
微信小程序----全局状态管理 (便于全局埋点等操作)
说明由于我是一个有着一颗玻璃心的博主,导致在2018年后博客很少更新。原因是由于我的分享并没有解决到部分人的问题,而导致被骂了。当时这颗玻璃心就碎了,所以这两年以来很是消极,博客很少更新。这里给那些关注我,支持我的朋友说声【对不起】!前段时间,看了一个工作两年时间博主的 2021 年 flag,突然回首,还有很多记忆。所以,我决定以后每周最少一篇博客,记录我的学习和成长。谢谢!需求场景小程序开发完成,接到需求:需要对小程序的所有页面【onLoad】生命周期进行埋点,对页面中的点击事件进行埋点。原创 2021-01-14 11:35:54 · 4730 阅读 · 3 评论 -
微信小程序----简易双向绑定
简易双向绑定基础库 2.9.3 开始支持,低版本需做兼容处理。在 WXML 中,普通的属性的绑定是单向的。例如:<input value="{{value}}" />在【基础库 2.9.3 】之前,属性的绑定是单向的,在上边的实例中我们在视图层修改value,只会改变视图层的value,不会对逻辑层的value进行修改。但是我们又需要同时修改逻辑层value,怎么做呢?就是采用input组件的bindinput触发事件实现。实现单向数据的双向绑定单向数据的WXML<原创 2020-12-07 15:22:47 · 2501 阅读 · 0 评论 -
微信小程序---- setData 列表性能优化
原始方法----将现有列表和新加载列表拼接 setData方法1:利用数组 push 方法var list = this.data.orderList;res.list.forEach(cur => list.push(cur));this.setData({ orderList: list})方法2:利用数组 concat 方法var list = this.data.orderList;this.setData({ orderList: list.concat(res.l原创 2020-11-25 14:55:10 · 1271 阅读 · 0 评论 -
微信小程序----Maide List(图文列表)(flex布局实现MUI的图文列表)
效果二维码效果图WXML<view class="tui-list-box"> <view class="tui-list-head">图在左边</view> <view class="tui-gallery-list" wx:for="{{galleryList}}" wx:key="navList1&原创 2019-02-22 15:48:18 · 6163 阅读 · 3 评论 -
微信小程序----Gallery Table(图文表格)(flex布局实现MUI的图文表格)
效果二维码效果图WXML<view class="tui-row"> <view class="tui-col tui-col-2"> <view class="gallery-box"> <image class="gallery-img" src="https://rattenking原创 2019-02-22 15:36:05 · 2492 阅读 · 0 评论 -
微信小程序----Grid(九宫格)(flex实现九宫格布局)
效果二维码效果图WXML<view class="section"> <view class="tui-table-view"> <view class="tui-col-3"> <icon class="iconfont icon-shouye"></icon&原创 2019-02-22 14:52:10 · 33274 阅读 · 6 评论 -
微信小程序----wx.scanCode(Object object)调起客户端扫码界面进行扫码
效果参数(Object object)属性类型默认值是否必填说明支持版本onlyFromCamerabooleanfalse否是否只能从相机扫码,不允许从相册选择图片&gt;= 1.2.0scanTypeArray.[‘barCode’, ‘qrCode’]否扫码类型&gt;= 1.7.0successfunction否接口...原创 2018-09-29 10:56:31 · 8302 阅读 · 0 评论 -
微信小程序----原生API实现【到这里去(目的地)】路线规划
前言 在此之前,采用了高德地图微信小程序API实现路线规划,但是由于公交路线规划不够准确,同时没有做转车等显示,所以这里补加微信小程序wx.openLoaction实现该效果!效果图个人中心进入公司地址 定位公司地址 到公司地址去并且实现驾车路线规划 骑行路线规划 返回小程序页面 效果视频WXML代码&lt;map class="...原创 2018-08-28 16:03:04 · 5527 阅读 · 2 评论 -
微信小程序----CSS 的空格处理
效果HTML&lt;p&gt; Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! &lt;/p&gt;CSSp{ width: 200px; background-co...原创 2018-08-10 15:51:14 · 5001 阅读 · 0 评论 -
微信小程序----session_key失效导致的后台错误wxsp login api aesCbcUtil error info: pad block corrupted
出错场景 微信小程序的一键登录,授权获取用户的手机号,进行注册。 每一个新的用户在第一次进入小程序进行一键登录的时候都会报错,当第一次报错退出小程序,第二次进入时能够顺利的进行一键登录。后台Java报出的错误原因 wxsp login api aesCbcUtil error info: pad block corrupted报错原因 ...原创 2018-07-18 18:00:20 · 6722 阅读 · 0 评论 -
微信小程序----评价系统中的评星
场景 在电商、医疗等带有用户评价的时候,常见的就是对服务等进行星级评定,在小程序中如何更加简单的实现该功能?效果图WXML&amp;amp;lt;text class='rui-star' wx:for=&amp;quot;{{[1,2,3,4,5]}}&amp;quot; wx:key=&amp;quot;star1&amp;quot; bindtap=原创 2018-07-18 18:29:22 · 5653 阅读 · 5 评论 -
微信小程序----相对路径图片不显示
出现场景 在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示。出现图片不显示的原因 小程序只支持网络路径和base64的图片。图片转base64在线工具处理方法将图片都放到服务器,然后直接采用网络路径。 1.1 优点是能够放大量的图片。 1.2 缺点是有时开发中有大量的小图片,或者修改小图标,对于开发者来说,更换会很麻烦。将图片都转换成 ...原创 2018-07-27 11:25:56 · 28338 阅读 · 0 评论 -
微信小程序----解析px、rpx、rem、vw实现页面布局
PX px:绝对单位,页面按精确像素展示。 在PC端经常使用的单位,不用计算,直接使用,一般情况不用考虑设计图纸的来改变页面的大小。就直接采用px,方便快捷但是不能自适应。RPX rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。 微信的自适应单位,同时微信规定:屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度...原创 2018-07-31 15:35:52 · 7024 阅读 · 0 评论 -
微信小程序----wx.getLocation(OBJECT) API在iOS关闭本机定位时,获取定位失败
问题 在做一个小程序时,进入首页需要获取用户的当前位置经纬度,然后去服务器查询当前位置周边的网吧。在安卓关闭定位设置时,wx.getLocation(OBJECT) API依然能够获取当前位置的经纬度;但是iOS如果关闭定位设置,wx.getLocation(OBJECT) API就会失败!解决办法微信小程序社区解决办法根据官网解决的实际用法Page({ ...原创 2018-06-30 12:23:31 · 7974 阅读 · 2 评论 -
微信小程序----短信验证码倒计时插件
效果图JS// 倒计时插件class CountTime { constructor(page) { this.page = page; this.time = 60; this.timer = null; this.page.setData({ code: '获取验证码', flag: false }); } countTime(...原创 2018-06-30 12:51:03 · 2177 阅读 · 2 评论 -
微信小程序----wx.openLocation(OBJECT) 使用微信内置地图查看位置
开发场景 已知地点的经纬度,期望在打开的地图进行标注位置和进行开车、徒步、公交、骑行等的路线规划!效果图实际应用体验JSPage({ openLocation(){ wx.openLocation({ longitude: Number(this.data.lng), latitude: Number(t...原创 2018-06-25 18:48:43 · 41359 阅读 · 16 评论 -
微信小程序----当前时间的时段选择器插件(今天、本周、本月、本季度、本年、自定义时段)
DEMO效果图插件思路准备工作获取当前时间,同时获取当前的年、月、日、周几;创建处理日期数字的函数;创建格式化日期的函数;创建获取某月天数的函数;创建获取季度开始的月份函数。获取时段创建获取当天的时段函数;创建获取本周的时段函数;创建获取本月的时段函数;创建获取本季度的时段函数;创建获取本年的时段函数;创建自定义时段函数。...原创 2018-05-28 15:31:26 · 9206 阅读 · 5 评论 -
CSS文字两端对齐
微信小程序—-CSS文字两端对齐场景—-在微信小程序的表单开发中常遇到 input 的 label 需要进行文字的两端对齐!参考:真正可用的CSS文字两端对齐 由于真正可用的CSS文字两端对齐需要放置一个空标签,本人对此处进行了优化处理,利用伪元素 after 代替空标签 span,来实现该效果,同时将两端对齐的样式提成公用样式的 class ,需要时直接使用。效果...原创 2018-06-07 17:10:51 · 13703 阅读 · 0 评论 -
微信小程序----获取二维码
前言:随着小程序的火爆,功能的越发完善,客户的需求越来越多,终于在此次开发中需要用到微信的获取二维码功能!业务需求 开发一个线上购物平台(类似美团),但是在每家店铺都有自己的二维码,扫该二维码直接进入店铺的商品购买页面。 常规需求:常规的是扫小程序二维码—进入小程序首页(店铺列表页面)—选择对应的店铺—进入该店铺的商品列表页面 现在需要实现:扫二维码—进入该店铺...原创 2018-05-17 15:41:08 · 29785 阅读 · 3 评论 -
微信小程序----编写后台服务接口配置文件
编写后台服务接口配置文件const basePath = 'http://test.cdbhbc.com/wbgapi'; const urlList = { // 刷新token refreshTokeUrl: basePath + '/refreshToke',//token // 登录和首页轮播 loginUrl: basePath + '/wxappLogin',...原创 2018-05-23 16:39:31 · 7442 阅读 · 0 评论 -
微信小程序----团购或秒杀的批量倒计时实现
效果图实现思路 微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染!JS模拟商品列表数据 goodsList;在 onLoad 周期函数中对活动结束时间进行提取;建立时间格式化函数 timeFormat;建立倒计时函数 countDown;在 onLoad 周期函数的提取结尾执行倒计时函数 countDown。倒计时函数详解获取当前时...原创 2018-04-08 14:09:13 · 43836 阅读 · 31 评论 -
微信小程序----全局变量
方法二:用引入js的方法定义全局变量实例:我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件:base64.js、config.js、data.js这三个文件作用:示例代码:使用方法:方法三:使用全局状态管理库微信小程序 ---- 全局状态管理 (便于全局埋点等操作)微信小程序 ---- redux 在原生微信小程序的使用实例我的博客,欢迎交流!我的CSDN博客,欢迎交流!微信小程序专栏前端笔记专栏微信小程序实现部分高德地图功能的DEMO下载微信小...原创 2018-04-12 09:38:53 · 59783 阅读 · 4 评论 -
微信小程序----动态设置导航栏标题
场景 当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题!实现API wx.setNavigationBarTitle(OBJECT)语法wx.setNavigationBarTitle({ title: '当前页面', /...原创 2018-04-16 11:13:16 · 10828 阅读 · 0 评论 -
微信小程序----返回上一页刷新或当前页刷新
HTML实现当前页面刷新 首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢? 1,reload()方法刷新当前页面; 2,replace() 方法刷新当前页面; 3,页面自动刷新当前页面; 三种实现js 刷新当前页面的方法用法微信小程序—-返回上一页刷新或当前页刷新 1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序原创 2018-04-05 19:11:49 · 195346 阅读 · 44 评论 -
微信小程序----自定义加载图标
效果图实现思路首先通过HTML+CSS实现加载动画的静态效果;根据需求给每个动画设计不同的动画效果。例如第一个加载图标的静态绘制 1、首先确定动画的盒子宽高; 2、设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转。); 3、通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位。...原创 2018-03-08 16:43:31 · 10709 阅读 · 2 评论 -
微信小程序----手势锁详解
设计思路流程图1、全局常量constructor(page,opts){ // 初始化全局常量数据 this.page = page; this.width = opts.width || 300; this.height = opts.height || 300; this.canvasId = opts.canvasId || 'lock'; t...原创 2018-03-05 15:22:46 · 7543 阅读 · 2 评论 -
微信小程序----canvas实现刮刮乐效果
效果图设计流程设计思路canvas设置背景图,作为中奖图片;在canvas上绘制刮的灰色涂层;通过绑定的事件,清除对应区域的涂层;最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚。1、全局常量 获取用户传入的canvas的ID,设置的canvas的宽高,canvas涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全...原创 2018-03-06 15:22:12 · 13124 阅读 · 7 评论 -
微信小程序----map组件实现解析经纬度
效果图实现原理map组件实现定位标记或者指定定位标记,并保存location。采用高德地图微信小程序开发API(getRegeo)获取当前位置或者指定位置的详细描述。WXML&amp;amp;lt;view class=&amp;quot;map_container&amp;quot;&amp;amp;gt; &amp;amp;lt;map cla原创 2018-02-08 09:48:57 · 4399 阅读 · 0 评论 -
微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
效果图实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据;如果 city 不为空,则返回 city 指定位置的天气数据。WXML&amp;lt;view class=&quot;map-weather&quot;&amp;gt; &amp;lt;view&原创 2018-02-08 10:01:49 · 4804 阅读 · 0 评论 -
微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT))
效果图实现原理 通过高德地图的微信小程序开发API(getInputtips),实现关键词获取对应提示列表,同时返回location。WXML&amp;amp;lt;view class=&amp;quot;map-inputtips-input&amp;quot;&amp;amp;gt; &amp;amp;lt;input bindinput=&a原创 2018-02-08 10:17:38 · 5264 阅读 · 8 评论