微信小程序

分类下相关文章

统计参加人数的小程序

最近发现很多人有在微信或者QQ中,统计参加人数的功能需求。例如: 统计去食堂餐厅就餐的人数 统计参加周末团建的人数 统计周末加班的人数 统计坐车人数 统计上课人数 登记参会人数 等等。 于是我自己开发了一个统计人数的微信小程序,可以在微信中搜索 “报名人数统计” 或者扫描下方小程序码: 花了一个周时间完成了基础功能,正在逐步完善中,也欢迎大家给出建议。 主要功能界面 创建统计活动页面 参加活动页面 查看活动统计页面 功能简单实现起来还是挺耗费时间 本以为两天就能实现的人数统计功能,前后台加起来用了整整一周时间。很多基础性的功能由于没有顺手的基础组件,加上 golang 写小程序后台 ...

阅读全文...

使用 canvas 生成微信小程序分享图片

三方类库 https://github.com/kuckboy1994/mp_canvas_drawer 使用方法 <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/> painting 即需要传入的 json 设置。 但是,为何还需要一个 getImage 的回调呢? getImage 方法是绘图完成之后的回调函数,在 event.detail 中返回绘制完成的图片地址。 推荐阅读一下 github 上的示例代码,特别是 pages/index/inde ...

阅读全文...

微信小程序 scroller-view 组件 bindscrolltolower 事件不触发

bindscrolltolower 事件不触发的原因在于没有设置 height, 因为是用 flex 来进行的布局。 但是需要注意的是,用 height: 100%; 在有的页面有效,有的页面无效。 而用 height: 40em; 则正常触发。 ...

阅读全文...

微信小程序 SEO 优化排名的方法

小程序名称/标题 这个无疑是最重要的。因为在微信中搜索关键词,小程序名称/标题占据了最大的权重。所以,好的名字一定是包含了目标关键词,但是又不能过长,这个需要反复权衡。 小程序介绍中的描述 实际从微信中搜索一个关键词,你会发现,最重要的除了标题,就是对应的介绍。所以,充分利用好介绍非常重要。介绍有 120 个字的限制,一定要精简,把最重要的词塞进去。。。而且一个月可以调整5次,额度足够。 利用好小程序页面内的文字介绍 我觉得这个类似于网站网页的 SEO,微信小程序的爬虫也没有更多的好办法,一定会参考页面的文字描述。所以,以工具类小程序为例,我会将工具的介绍文字写在功能区的下方,方便小程序爬虫来 ...

阅读全文...

微信小程序导入第三方 javascript 库

今天要实现一个微信小程序中将人民币阿拉伯数字转中文大写的功能,github 上有一个开源的实现 https://github.com/cnwhy/nzh 如何将这个三方 javascript 的实现导入微信小程序呢? 微信小程序中引用三方库 首先下载: https://github.com/cnwhy/nzh/blob/master/dist/nzh.cn.js 到项目根目录下的 utils 文件夹中。 然后在对应的 pages js 中使用 require 引入 const nzh = require('../../utils/nzh.cn.js'); console.log(nzh.toM ...

阅读全文...

微信小程序 rich-text 组件限制高度/行数

例如,从后台拉取的题目列表的标题富文本可能过长,在微信小程序前端为了方便用户在一屏内浏览更多的题目,就需要对 rich-text 进行限高。 测试了一下发现在 rich-text 上设置高度 height 无效。 实现方法 在 rich text 组件外层套一层 view,在 view 上设置高度。 wxml 模板: <view class="title_wrapper"> <rich-text nodes="{{ question.title }}"></rich-text> </view> wxs ...

阅读全文...

微信小程序模板 for 循环中 if 判断是否添加 css class

使用场景 微信小程序模板中,for 循环展示一列元素。需要设置一个默认的 active 元素,默认是首个元素。样式上通过添加 active class 进行突出显示效果。 实现方法 利用 js 的三元运算符 <view class="subject {{ cur_index == index ? 'active' : ''}}" wx:for="{{ items }}" wx:for-index="index" wx:for-item="item"> {{ item }} & ...

阅读全文...

微信小程序 token 失效,自动重试机制

在需要用户登录的微信小程序中,需要处理 token 失效的问题。如果每个 wx.request 都去手动处理,非常麻烦。 解决思路 封装微信小程序自带的 wx.request,对返回的 http 状态码及错误码做区分处理。 这里使用 ES6 的 Promise 进行封装。 封装函数写在 app.js 中好,还是独立一个文件 我觉得写在 app.js 中,就挺好,因为以后新项目可以直接复制 app.js 文件。 如果独立一个文件,还需要同时复制 app.js 和另一个文件。 一个实现范例 app.js http: function({url = '', param = {}, type = 'j ...

阅读全文...

微信小程序真机下进入页面时,所有本地图片会闪一下

在小程序开发工具上表现正常,但是在真机上,打开页面的瞬间,image src 为本地图片的会闪一下。 具体表现是,图片会瞬间拉长,然后变为正常。看上去就像闪烁了一下。 原因推测 图片高度无法预先知道。就像 web 浏览器上一样,只有加载完图片才知道对应的高度。 问题的根源就是没设置图片高度属性 Height。 解决方法一 设置 height。rpx 也行,rem 也行,只要设置了 Height 就可以。但是 100% 无效。 解决方法二 在样式文件顶部加上 image { height:auto; } 虽然我想不通为何这个能解决,但确实有效。 ...

阅读全文...

微信小程序 camera 组件全屏显示

想自定义微信小程序 camera 组件的显示,调起摄像头时,为全屏显示。 但是 width 和 height 都设置为 100% 时,实际是无效的。 <camera device-position="back" style="width: 100%; height: 100%;"></camera> 真机测试: 宽度确实是 100% 但是高度只有屏幕的四分之一 解决方法 height 使用 vh <camera device-position="back" style="width: 10 ...

阅读全文...

微信小程序滚动到页面顶部

低版本的微信小程序基础库不支持,需要注意: if (wx.pageScrollTo) { // 判断是否支持该函数 wx.pageScrollTo({ scrollTop: 0 }) } ...

阅读全文...

微信小程序 toast 去掉图标

微信小程序的 wx.showToast,默认图标是个对勾,但是在某些情况下,不适合使用图标。 去掉图标 wx.showToast({ title: '不能再吃了', icon: 'none', duration: 2000 }); ...

阅读全文...

微信小程序长时间未使用将被冻结

今天收到微信通知: 微信小程序昵称: 你的角色:项目成员 原始ID: gh_xxx 登录邮箱: xxx 你好,以上帐号由于长时间未使用,将根据《微信小程序平台运营规范》的规定冻结此帐号,如需继续使用此帐号,请在2020-05-01之前登录。 详情参考: https://kf.qq.com/touch/sappfaq/190702FbaQbI1907027rUJfi.html 很奇怪,为啥我作为项目成员,而不是管理员也会被冻结。 看了一下绑定的小程序列表,确实发现了几个没有名称的小程序,说明管理员也被冻结了吧,所以连带我作为项目成员也被冻结了,实际上应该是解绑了。 ...

阅读全文...

微信小程序使用本地图片作为背景

如何测试 由于每个微信小程序的初始化项目中都包含 logs 这个页面,可以拿这个页面作为测试。 使用本地图片作为 background-image 值,会报错 .bg { background-image: url("/images/some_bg.jpg"); } 报错信息为: VM306:1 pages/logs/logs.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用 image 标签。请参考文档:https://developers.weixin.qq.com/miniprogram/dev/qa.html ...

阅读全文...

大象计算器微信小程序版

为了方便手机上使用大象计算器,现推出微信小程序版。体验方法: 使用微信扫描下方小程序码 或者,微信中搜素“大象计算器” 版本 4.0.0 - 2020-05-27 功能优化:涨幅计算器增加反向涨幅计算功能。 版本 3.0.0 - 2020-05-21 新功能:增加数字货币涨跌幅波段计算器。以 0.5 个点为一档,正负20%。 版本 2.0.0 - 2020-05-17 新功能: 增加数字大小写转换 新功能: 增加意见反馈 版本 1.0.0 - 2020-03-28 新功能:股价波段计算器 新功能:涨跌幅计算器 ...

阅读全文...