微信小程序
关注
分享
扫一扫
微信小程序
mossbaoo
不积跬步无以至千里，不积小流无以成江海。
展开
-
微信小程序的购物车功能
微信小程序的购物车功能这个微信小程序的购物车功能，通过参照各大电商平台的功能和界面，然后总结出来的。效果图功能描述可单选，全选/取消全选 增加、减少、手动编辑商品的数量 根据商品的数量统计价格代码实现此处省略一万字，废话不多说，直接上代码吧！WXML静态布局、绑定“死”数据（主要功能代码）<view class="list"&g...原创 2018-10-13 09:52:00 · 9498 阅读 · 55 评论 -
微信小程序 使用页面栈 修改上一个页面的data数据
微信小程序中从一个页面A进入一个页面B，如果页面B的数据有改变，再返回页面A的时候需要把数据同步到页面A。一般的方法有：1. 使用本地缓存 wx.setStorage() 和 wx.getStorage()// 页面Bwx.setStorage({ key: "name", data: "mossbaoo"})// 页面Awx.getStorage({ key...原创 2018-12-04 14:43:54 · 7193 阅读 · 0 评论 -
微信小程序 canvas描绘文字图片 生成图片并保存到本地
在实现这个功能时，遇到以下的问题：1. canvas绘制文字的换行问题：如果文字的长度大于你所定的宽度的话，文字会超出你所定宽度；小程序的CanvasContext.fillText有一个maxWidth(需要绘制的最大宽度)参数，它的功能并不是超出该宽度换行，而是对文本进行挤压。所以，光靠API是无法实现的，那么就有了以下的解决方法：data: { text: '这是一...原创 2018-12-03 18:36:42 · 9158 阅读 · 1 评论 -
微信小程序 用setData修改数组或对象的其中一个值
在页面中有一个数组和一个对象data: { cityArr: ['北京', '上海', '广州'], region: { province: '广东省', city: '广州市', district: '天河区' },} 需求1：把数组中的“上海”改成“深圳”解决方法：// 1this.setData({ ['cityArr[1]...原创 2018-12-14 17:10:37 · 2938 阅读 · 0 评论 -
微信小程序 canvas绘图 实现图片拉伸、压缩与裁剪
在canvas绘图时，通常会遇到的一种情况是用固定宽高来显示图片，如果直接把图片内容填充进去的话，显示出来的图片就会被压扁或者被挤瘦，其效果简直不忍直视！那么，就需要把图片进行拉伸、压缩或裁剪。接下来，先给 drawImage 做个介绍：canvas的drawImage函数可以 绘制图像到画布。它有以下参数：参数 类型 说明 imageResource ...原创 2018-12-22 15:25:29 · 9181 阅读 · 0 评论 -
微信小程序 组件的样式修改
在开发微信小程序时，我们在使用一些组件的时候，总会遇到设计稿与官方提供的组件样式不太一样的情况，需要想办法修改组件的样式。目前只记录了两个组件的修改方法：switch、checkboxswitch1. 大小/* swtich整体大小 */.wx-switch-input{ width: 100rpx !important; height: 57rpx !importa...原创 2019-01-18 17:13:48 · 7525 阅读 · 0 评论 -
微信小程序 canvas的文字居中显示
利用canvas的测量文本的measureTextctx.fillText(str, (canvasWidth - ctx.measureText(str).width) / 2, 0);原创 2019-01-10 00:10:00 · 5240 阅读 · 0 评论 -
一图一表一段文字读懂微信小程序的生命周期
一图一表一段文字读懂微信小程序的生命周期（onLoad、onShow、onReady、onUnload、onHide）原创 2019-02-22 09:56:28 · 491 阅读 · 0 评论 -
微信小程序 textarea组件层级过高导致文字穿透浮层的解决方法
页面中有一个fixed浮层，就算把层级设置到9999了，textarea的placeholder文字或者输入的文字内容都会直接穿透浮层，显示在浮层的上面。如下图： 解决方法：再写一个样式跟textarea一样的view。当浮层出现时，隐藏textarea，显示模拟的textarea，即以下代码的isShow: true<view class="textarea" wx:...原创 2019-02-13 11:35:57 · 3692 阅读 · 0 评论 -
微信小程序 通过nodeJs操作MySQL进行数据交互
下面的操作，我是通过phpStudy和Navicat for MySQL搭建起来的开发环境我提供一个Navicat for MySQL的安装方法：https://blog.youkuaiyun.com/mossbaoo/article/details/88661851先来看看目前MySQL的数据：node连接MySQL，需要安装express和mysql包var express = requi...原创 2019-03-19 16:01:00 · 15745 阅读 · 14 评论 -
微信小程序-虚拟支付的解决方案！原来还可以这么玩！
什么是虚拟支付？比如购买非实物（VIP会员、充值、课程、虚拟物品等）这次虚拟支付的整改，最受影响的应该就是那些知识付费、购买课程、在线教育之类的小程序而这次整改，只针对于ios系统的小程序，安卓系统是不受影响的，开发者可以选择其中一种方案：1. ios和安卓都使用解决方法：1. 把 芝麻小客服 接入到小程序中2.在 芝麻小客服后台 设置关键词回复3...原创 2019-03-11 17:13:15 · 27420 阅读 · 3 评论 -
微信小程序 检测小程序版本更新提示
微信小程序新版本发布之后，用户使用依然是旧版本，这是因为在微信中有旧版本的缓存，不会及时更新到新版本。要想让用户更新到新版本，可以通过提示用户在微信中的“发现 - 小程序”入口中将旧版小程序删除，然后再重新搜索并打开该小程序但这种方式的用户体验极差，不推荐。那么，就有了以下的方法，这段代码推荐写在小程序主页面的的onLoad（）事件中，用户一打开小程序就能够判断有没有最新的版本，如果有就会给予...原创 2018-11-26 10:47:05 · 12501 阅读 · 6 评论 -
微信小程序 index.js获取app.js异步请求的动态数据
对于 “index.js不能获取app.js异步请求的动态数据” 这个问题，本人也是郁闷了好几分钟。解决方法是：getApp().wxFunction().then(res => { })先展示一下开始错误的代码吧app.js：globalData: { test: 1,},onLaunch(options) { console.log("onLaunch...原创 2018-11-24 11:38:42 · 8365 阅读 · 0 评论 -
解决“微信小程序disabled属性不生效”的问题！
微信小程序中带disabled属性的表单组件有（点击可以进入官方文档）：button，checkbox，input，picker，radio，slider，switch，textarea 如果是固定禁用组件的话，直接放上disabled就好，简单粗暴，如： 1. 忽略值的情况：<button disabled>测试</button> 2...原创 2018-10-29 11:53:39 · 36768 阅读 · 6 评论 -
微信小程序 简单获取屏幕视口高度
由于小程序的宽度是固定的 750rpx，我们可以先用 wx.getSystemInfo 来获取可使用窗口的宽高(并非rpx)，结合750rpx的宽度算出比例，再用比例来算出高度let that = this;wx.getSystemInfo({ success: function (res) { let clientHeight = res.windowHeight; ...原创 2018-10-29 15:29:35 · 23382 阅读 · 2 评论 -
配置mpvue的less，只需2步！
第1步：下载less到项目中运行 npm install less less-loader --save 第2步：配置webpack.base.conf.js在module->rules中加入 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", }, ...原创 2018-10-31 14:07:13 · 840 阅读 · 0 评论 -
mpvue微信小程序富文本解析 - mpvue-wxParse
mpvue-wxParse 是适用于Mpvue的微信小程序富文本解析组件，支持 HTML 及 markdown 解析。 安装npm install mpvue-wxparse使用 1. HTML<template> <div> <wxParse :content="article" @preview="preview" @...原创 2018-11-09 11:59:00 · 2553 阅读 · 2 评论 -
mpvue开发微信小程序的全局变量问题-Vuex
如果你以前使用过原生的小程序开发，现在要使用mpvue框架的话，你应该也会遇到以下的问题：1. 怎么存放可全局访问的变量？2. 页面跳转的时候，怎么传递参数到下一个页面比较好？3. 页面返回上一页的时候，怎么传递当前页的数据到上一页？4. 多个页面间需要同步数据，怎么做比较好？ 在原生的小程序开发中，全局变量用的基本都是通过设置获取app中的globalData、通过存储获...原创 2018-11-07 11:21:04 · 5179 阅读 · 0 评论 -
微信小程序 返回上一页不触发onHide()
关于微信小程序返回上一页不触发 onHide() 的问题。 onHide是页面隐藏，onUnload是页面销毁。 使用 onUnload() 就行！ 【推荐文章】一图一表一段文字读懂微信小程序的生命周期...原创 2018-11-10 17:37:38 · 10025 阅读 · 0 评论 -
微信小程序 获取元素高度（获取元素节点信息）
微信小程序 获取元素高度（获取元素节点信息） 如果高度要px单位的话：let query = wx.createSelectorQuery();query.select('.content').boundingClientRect(rect=>{ let height = rect.height; console.log(height);}).exec(); ...原创 2018-11-15 17:24:17 · 16123 阅读 · 1 评论 -
解决微信小程序、mpvue、vue 关于 wx:for、v-for 循环次数的问题
微信小程序：wx:if="{{index<5}}"<view wx:for="{{dataArray}}" wx:key="index" wx:for-item="item" wx:if="{{index<5}}"></view> mpvue、vue：v-if="index<5"原创 2018-11-21 11:03:04 · 5249 阅读 · 0 评论 -
微信小程序 - 扫描小程序码进入小程序并获取参数
在进入的页面加上的onLoad方法，获取参数onLoad(options) { if(options.scene) { let scene = decodeURIComponent(options.scene); console.log(scene) // 后续处理scene }}或者，在app.js的onLaunch方法中获取onLaunc...原创 2018-11-16 18:04:27 · 18215 阅读 · 3 评论 -
微信小程序 倒计时
倒计时适用于很多场景，先mark下来，以备之后的一时之用吧 以下案例是24小时的倒计时wxml：<view>倒计时 {{countHour}}:{{countMinute}}:{{countSecond}}</view>js：data: { countDay: null, countHour: null, countMinute: n...原创 2018-11-21 14:59:42 · 1039 阅读 · 0 评论 -
微信小程序 animation动画-心跳
Animation动画 wx.createAnimation 。创建一个动画实例。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 wxml：<view style="width: 50rpx; text-algin: center; color: #d70101;"> <view animat...原创 2018-11-21 15:47:53 · 1243 阅读 · 0 评论 -
微信小程序 使用特殊字体的两种方法
微信小程序中如何使用特殊字体？我有两种方法：1.转base64格式；2.【推荐使用】动态加载网络字体原创 2019-04-09 14:55:55 · 14919 阅读 · 0 评论