微信小程序
文章平均质量分 62
光就一个字
这个作者很懒,什么都没留下…
展开
-
uniapp 开发小记
uniapp 开发小记简单回顾下,如有纰漏后续更新。建议vue-cli的脚手架模式,统一IDE为vscode降低切换成本。建立脚手架:npm i -g @vue/clivue create -p dcloudio/uni-preset-vue uni-templatenpm run dev:platformnpm run build:platformnpm run serve开发模式基本是基于微信小程序的页面/应用的开发模式 + vue的组件模式App.vue 随程序启动运行原创 2021-11-05 15:31:30 · 219 阅读 · 0 评论 -
背景图长宽100%,也能显示不全?
前言前两天进行业务开发时,用到一个「券样式」的背景图(background-image),即下图的「返利¥1.30」:容器的宽度会根据文字内容自适应,代码如下:css:.coupon-like { padding: 8rpx 10rpx; background-size: 100% 100%;}html:(代码是微信小程序的写法)<view class="coupon-like" style="background-image: url('{{commonImgUrl.原创 2020-07-16 19:07:26 · 1064 阅读 · 0 评论 -
舒服的小程序吸顶动画
前言今天想优化下用户体验:给小程序商品列表页顶部的标签栏增加个吸顶动画。逻辑是检测用户下滑行为时不吸顶,上滑时吸顶,标签栏未滑离视窗时不处理。并对滑动的处理方法增加节流处理,以优化性能。一、处理页面滚动1.1 页面逻辑页面page_name.js:// ...onPageScroll(e){ this.selectComponent('#goods_list').data._handleScroll(e)}// ...因为业务需要,商品列表goods_list被我封装成组件形式,所以原创 2020-05-15 12:22:14 · 816 阅读 · 0 评论 -
微信小程序ts脚手架
项目地址:miniprogram-ts-demo项目介绍小程序手脚架,除原生小程序技术外,引入了ts、scss、iconfont,集成了webpack,实现一键启动ts、scss监听编译,详见/package.json.script启动准备安装node.js、微信开发者工具启动方式安装依赖:npm install 或 yarn install启动开发监听:npm run start ...原创 2020-03-09 09:58:56 · 3693 阅读 · 0 评论 -
pc微信禁止启动小程序
App onLaunch时,通过`wx.getSystemInfo`接口获取设备信息,判定设备异常(不是ios、android、devtools),则触发死循环代码,阻止小程序正常运行。原创 2019-11-22 16:25:20 · 4965 阅读 · 3 评论 -
taro微信小程序云开发-实现用户信息增改查
趁周末空闲时,(没jojo看我要死了)捣鼓了一下taro和小程序的云开发。体验很好,作博一篇抛砖引玉,也给想有些想自己做小程序又不会写后端的人略做引导,以求少走些弯路。文章目录介绍开始—原生小程序云开发开始—`taro`小程序开始云开发实战:用户登录和信息存储(增改查)建立集合云函数-登录云函数-更新用户信息小程序内调用云函数调试准备上线TODO介绍taro是京东凹凸实验室团队开发的一...原创 2019-05-12 20:44:59 · 6757 阅读 · 5 评论 -
微信小程序“无埋点”式封装上报
无论什么业务,c端产品的数据统计、埋点上报是很重要的,它可以帮助产品人更好地了解用户行为,以快速响应迭代。所谓“无埋点”式是指不在业务代码里插入上报代码,将业务代码与上报代码分开,提高项目可维护性和可读性。除用户点击等行为外,数据上报最常见的可能是页面跳转pu、pv了。小程序的页面有两种方式实现:1、api,如wx.navigateTo等 2、navigator组件,以下降分别阐述实现方...原创 2019-04-22 19:57:00 · 1772 阅读 · 0 评论 -
小程序动态生成canvas海报
先做出wxml,再根据wxml动态画canvas有很多好处:提升体验(渲染快)、便于升级迭代(后期瓜皮改需求)、方便维护等。文章目录先睹为快canvas海报1、优雅地授权 (Be elegant.)1.1、封装1.2、使用2、动态获取wxml显示信息3、绘制canvas (Be patient.)3.1、获取素材3.2、开始绘制3.3、存入缓存3.4、存入本地先睹为快通过本篇博客你可以...原创 2019-04-22 15:11:17 · 5318 阅读 · 0 评论 -
微信小程序收集formId
原理form内嵌button,使点击事件皆可触发表单提交动作分析开始预想是页面下包裹一个form和button,达到点哪里都提交的效果。但试验表明,button 的submit 动作会拦住常规的bindtap/catchtap动作。所以方案是:1、Page 根元素位置包裹一 form2、在动作热区(界面上可响应点击事件的区域)内嵌一个button,代码片段是<button for...原创 2019-01-04 16:59:47 · 4400 阅读 · 3 评论 -
漫画小程序开发小结
最近基于公司业务需要,做了个漫画小程序,做博一篇,让后人少走弯路,同时也是对自己工作的一点提炼。免得以后人老色衰记忆减退回首往事徒留伤悲。页面:index:漫画列表,可续读直接跳阅读页detail:漫画详情,包含介绍和选集两个tabread:漫画阅读,无限滚动,懒加载,动态设话的标题从需求和bug 谈技术实现主页:无难点详情:话的排序:前端排序,Array.reverse(...原创 2018-12-16 20:56:50 · 3227 阅读 · 4 评论 -
微信小程序深拷贝没用
常用的深拷贝方法:concat()let arr = [1];let arr1 = arr.concat();arr1[1] = 2;console.log(arr1); // [1,2]console.log(arr); // [1]slice()let arr = [1];let arr1 = arr.slice(0);arr1[1] = 2;console.lo...原创 2018-08-04 16:55:02 · 2210 阅读 · 1 评论 -
mpvue小程序中怎么引入iconfont字体图标?
前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库将图标加入购物车搜索关键词可以是中文也可以是英文 下载素材点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请...原创 2018-07-04 16:20:24 · 7159 阅读 · 0 评论 -
mpvue scroll-view自动回弹bug解决方案
表现设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方解决方案打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法function calcDiff(holder, key, newObj, oldObj) { if (newObj === oldObj || newOb...转载 2018-07-04 15:04:40 · 3455 阅读 · 9 评论 -
mpvue父子组件props传参失败的解决方案
表现父组件数据还未获取时就向子组件传props,导致子组件不到数据而报错。原因mpvue虽然同时兼容vue和小程序的生命周期,但有先后之差,了解更多请戳:理解mpvue的生命周期解决方案用v-if控制子组件的渲染,判定条件为传入的值,如:<child v-if='list' :list='list'></child> 这样,在没有父组件没有获取...原创 2018-06-27 14:22:22 · 6647 阅读 · 0 评论 -
mpvue + vuex搭建小程序详细教程
能看这篇文章应该已对mpvue有所了解,此处不做赘述。构成1、采用mpvue 官方脚手架搭建项目底层结构 2、采用Fly.js 作为http请求库目录结构├── src // 我们的项目的源码编写文件│ ├── components // 组件目录│ ├── config //公共配置│ │ └── tips // 提示与加载工具类│ ├── http //h...原创 2018-06-19 09:20:45 · 29763 阅读 · 16 评论 -
微信小程序技巧与踩坑(持续更新)
记录开发小程序过程中的一些相对冷门的技巧和踩坑,持续更新中用户资料单纯显示微信用户的名字头像可以不需要用户授权,提高用户体验,使用open-data即可,限制:样式比较局限,和一般的view或text有所不同,而且其内不能放其他标签,会显示不出来open-data文档 举个栗子: // wxml &amp;amp;lt;view class=&amp;quot;headerWrapper&amp;quot;&amp原创 2018-05-15 14:53:33 · 656 阅读 · 0 评论