微信小程序
海阔天空.
前端工程师
展开
-
微信小程序数据懒加载
业务中我们常会遇到图片较多、或者数据较多的列表,一次渲染出来的话轻则渲染时间过长,重则可能直接罢工白屏,什么都渲染不出来,这个时候懒加载(只渲染视口中的数据)就很有必要了。由于在小程序中,web上的一些懒加载方案并不适用。我所采用方法的思路是:1.判断视口能展示几条数据2.定义一个数组,长度和展示的数据列表长度一致,数组中前几个(和能展示的数据条数一致)设为true,其余设为false 3.滚动...原创 2020-04-08 21:44:03 · 4977 阅读 · 0 评论 -
微信小程序加入购物车动画
最近在做的一个小程序项目,需要一个加入购物车动画,倒腾了一下总算实现了想要的效果。代码如下(用的是wepy2.x语法)://wxml//通过点击事件对象 获取到点击的位置<image src="{{imgDomain}}mini/ic_btn_add.png" class="img" @tap.stop="onCartAmountChange(item, ind...原创 2020-03-24 20:59:35 · 2703 阅读 · 7 评论 -
web和微信小程序前端直传图片到阿里云OSS
1.微信小程序中。 先调小程序 选择图片api,再调上传文件api.//对小程序api进行简单封装工具函数export const promisify = (api, options = {}) => { return new Promise((resolve, reject) => { // 将options对象赋值 然后再传给下面调用的方法中 optio...原创 2020-03-12 21:05:30 · 1104 阅读 · 0 评论 -
小程序踩坑总结
1.长按保存图片,我们遇到过:IOS什么都不用做长按就会弹出保存的弹窗,安卓却不会。在此总结两种方式:1)监听图片的点击(tap)或长按(longpress)事件,调用小程序预览图片api,再长按就可以保存了,除了保存还能实现识别途中小程序码(不是同个主题的小程序码也能跳转)、发送给朋友等功能。备注:不需要用户授权scan:function(e){ var current = e...原创 2020-02-26 19:45:07 · 536 阅读 · 0 评论 -
小程序中弹起的授权框用户点了拒绝授权如何处理
小程序中一些信息需要用户确认授权后我们才能获取到,如位置,用户信息等等,有些授权框用户点击拒绝授权后一段时间内不会再弹出,但我们又必须需要获取相应信息,这种状况如何解决呢? 在调起授权弹窗方法的失败回调函数里使用 wx.getSetting()=>在其成功回调里获取到授权的状态=>再调用wx.openSetting()方法会打开调起过的授权项 取消的授权可以再次选确...原创 2018-11-28 10:42:33 · 6083 阅读 · 4 评论 -
小程序缓存相关总结
在开发小程序的时候我们基本上需要用到数据缓存,比较常见的场景有:用户信息缓存这样用户登录一次就可以了、还有一些数据在一个页面获取后需要在多个页面使用到等等,但缓存也要适度,它有大小限制目前好像是10M,有些可以用全局数据代替,通过开发框架运用第三方数据管理工具也能实现多页面获取数据,看自己需求。 小程序缓存只要用户不主动删除就会一直在本地。删除的方法就是微信搜索栏 长按小...原创 2018-11-26 23:13:29 · 715 阅读 · 0 评论 -
小程序滚动事件相关总结
1.有时候我们需要每次进入页面都是回到页面的顶部的这时候可以用 :wx.pageScrollTo({ scrollTop: 0, duration: 300})这其实跟其他技术路由跳转设置每次都从顶部开始是一个道理。这个方法目前与<scroll-view>组件在同个页面中使用时会有冲突不起作用。2.上拉加载更多数据。小程序中数据分页请求的情况也是比较多的,...原创 2018-11-26 22:52:04 · 7804 阅读 · 2 评论 -
小程序的一些限制
1.不能用本地的图片作为背景。解决方案: 1)把图片传到线上 2)用相对或绝对定位解决原创 2018-11-13 20:13:54 · 537 阅读 · 0 评论 -
小程序中富文本处理
在最近的小程序项目中用到了富文本, 小程序的富文本展示不是很复杂,有一个自带的组件 <rich-text></rich-text>.直接用组件的话展示还是可能会有一些问题,比如图片展示不全,这些可以通过正则匹配来改变样式 如:...原创 2018-11-10 15:07:08 · 2940 阅读 · 0 评论 -
wx.uploadFile,wx.request开发版,体验版都可以正常使用,线上版调用失败
最近小程序增加了一个上传文件的功能,开发版,体验版测试都能正常使用,发布线上后就调用失败了。一直没有找到原因。在小程序社区求助后终于解决了。wx.request请求数据也一样方法如下: 在微信公众平台小程序==>设置==>开发设置==>服务器项下,wx.uploadFile项配置一下你项目服务器的域名就可以了。...原创 2018-08-24 09:49:15 · 2201 阅读 · 0 评论 -
小程序代码编写到上线
参与开发的小程序项目今天发布上线了,前端部分全部我负责,在此把自己的一些感悟总结下。 小程序的很多知识点都是和html,css,js相通的,也参考了一些框架的思想:数据绑定,组件化开发,生命周期等等,不是很难,有一定的html, css, js基础再熟悉一下小程序开发文档就可以开发。这次开发的小程序项目相对简单,功能不是很复杂,主要上就是对html,css,js知识结...原创 2018-08-14 17:39:06 · 4553 阅读 · 0 评论 -
小程序表单提交
小程序表单提交是非常简单方便的。通过<form>组件可以方便的获取form组件内的每个表单元素的value值。例:在.wxml中<form bindsubmit="formSubmit" bindreset="formReset"> <imput name="input1" /> //name特性必须要有,要不然form事件处理程序获取不到表单元..原创 2018-08-06 12:04:43 · 770 阅读 · 0 评论 -
微信小程序发送post请求data数据后台获取不到
今天遇到一个比较奇怪的问题,在发送post请求并发送data数据给后端,但是后端一直无法获取,前面发送一样的post请求(只是页面不同,传的data数据不同)就能获取到,卡了好一会儿,总算发现了原因。问题出在了请求的 header选项那, 默认的header选项'content-type'的值为 'application/json', 当后端获取不到数据时, 把其值改为 'applicat...原创 2018-07-25 21:21:30 · 8143 阅读 · 1 评论 -
微信小程序button按钮去除边框
今天在小程序开发中想要去除按钮的边框,直接使用 border: none 不起作用,选择器后加一个::after伪元素才行。例:button:: after{ border: none}原创 2018-07-25 20:54:33 · 1261 阅读 · 0 评论 -
微信小程序页面跳转失败的常见原因
1.第一种常见的原因 忘记在app.json文件中pages选项中注册2. 第二种常见原因 跳转路径写错3.第三种原因 如果跳转的路径已经在app.json文件中的TabBar选项中注册,跳转方法需要用wx.switchTab方法来跳转 备注: 前两种原因比较好发现,因为控制台中会有相应提示,第三种控制台不会报错,比较难发现。...原创 2018-07-25 20:40:40 · 15966 阅读 · 8 评论 -
微信小程序中页面跳转时如何传递一个对象
法一:必须在需要跳转的页面中先使用 JSON.stringify(obj)对需要传递的对象数据进行转换(转换为json格式的数据), 把转换后的数据 接在 url后面。最后在跳转显示的页面先使用JSON.parse(json) 转换为js类型的数据。例: 在跳转需要跳转的页面 index.js中: handletap: function() { var data = JSON...原创 2018-07-23 21:01:24 · 11739 阅读 · 3 评论 -
微信小程序如何根据id不同跳转到不同的页面
在需要实现跳转功能的页面给url传递相应的id, 然后在跳转显示的页面根据前面传过来的id调用接口,就可以实现id不同跳转的页面不同。1.在index.wxml中可以通过设置id特性的值, 如 id="{{item.id}}"这样index.js就可以获得到id的值。2. 也可以自定义属性并赋值,如 data-postId-idex = "{{item.id}}", 在通过自定义属性的时候...原创 2018-07-23 20:44:47 · 22602 阅读 · 0 评论