小程序
Frankeen
Try to make the world a better place,Look inside yourself and recognize that change starts with you.
展开
-
小程序自定义日期选择控件
介绍:对于微信小程序,微信提供了一个滚动选择器和自身的日期滚动选择器,但是开发中难免存在一些自定义的样式,这时候就要自己来定义了。下面我来简单介绍一下怎么自定义:1,首先微信提供了一个滚动选择器:picker-view,picker-view官方说明:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html原创 2018-01-12 18:08:29 · 21468 阅读 · 3 评论 -
小程序通用搜索组件
效果图场景一个应用经常少不了搜索功能,为此在这里简单封装一个搜索组件,可以为后续开发省下一些时间;编写一个common-search组件common-search.js:简单封装了输入内容监听,清除相关操作,最后向外部提供一个onClickSubmit回调事件,把搜索框的内容传到外部去;common-search.wxml:一个简单的搜索样式,搜索搜索按钮,清除按钮,搜索框;代码详细...原创 2019-01-03 11:43:27 · 1697 阅读 · 0 评论 -
小程序 swiper 前后边距的使用
小程序swiper 其中提供了两个属性,previous-margin和next-margin;previous-margin:前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值;next-margin:后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值假设设置 一个view的尺寸为宽为640rpx,高为360rpx,前边距为25rpx,后边距为25rpx,如果此时直...原创 2019-02-15 12:12:57 · 5370 阅读 · 0 评论 -
小程序API使用问题之InnerAudioContext
1,音频InnerAudioContext设置src问题,多次为src设置不一样的值,进行播放,当src设置为空,播放的时候就会延用之前设置的src播放,处理方法是为空的src设置一个播放地址,不能给src设置为空。如:let ctx = wx.createInnerAudioContext;#先设置一个正常播放地址然后进行播放https://www.jianshu.com/writer#/n...原创 2019-01-30 10:56:03 · 1914 阅读 · 0 评论 -
小程序CSS兼容之color,box-shadow,linear-gradient颜色值设置
1,颜色值不能使用八位,应该换成六位,或者使用rgba代替,否则在Ios能正常显示,但是在Android下该颜色会直接被忽略,如:以下颜色color,阴影box-shadow,渐变linear-gradient的使用color:#8A96A0ff;#替换成color:#8A96A0;box-shadow:0px 2px 4px #0000001A,0px 0px 2px #000000...原创 2019-01-30 10:56:53 · 3944 阅读 · 0 评论 -
「摆渡留言」小程序使用指导
Hi,各位微信公众号创作者,你们好!诚邀你关联「摆渡留言」小程序!关联后,你可以…把和公众号内容相关的「摆渡留言」小程序嵌入到微信文章内,让你的粉丝不但可以享受全新阅读体验,还可以收集粉丝的留言。注:新开通公众号没有留言功能,小伙伴们的福音来了如何把给摆渡留言嵌入公众号文章一. 公众号关联摆渡留言1. 进入小程序首页或者我的页面点击关联小程序查看APPID,或者关注公众号摆渡留言,回...原创 2019-07-22 13:55:51 · 252 阅读 · 0 评论 -
小程序自定义侧滑删除组件
小程序提供了一个可移动视图容器movable-view;下面我来给大家介绍一个通过movable-view和movable-area组合编写的一个侧滑删除自定义组件。先查看一下效果图:下面看一下布局:slide-slip.wxml<movable-area class="_sideslip" style="width: {{width}}rpx; height: {{height}...原创 2019-07-26 11:37:12 · 659 阅读 · 0 评论 -
小程序云开发获取网络图形式小程序二维码
使用小程序云开发生产小程序二维码并返回网络地址这个步骤有些绕,下面我就简单介绍一下;配置云调用在云函数目录下的 新建config.json配置文件的 permissions.openapi 字段中增加要调用的接口名;{ "permissions": { "openapi": [ "wxacode.get" ] }}参考地址:https://devel...原创 2019-08-19 18:04:25 · 839 阅读 · 0 评论 -
小程序list分页加载组件和音频API使用
效果图场景使用小程序的时候经常会遇到一些分页加载展示的功能,都是list列表展示,只不过是里面的内容不同;然后每次有新的list都要把item遍历,然后又得加上底部的加载更多,加载完成等copy一份,操作十分繁琐;由此笔者进行了简单的封装,具体内容如下。编写一个common-list组件common-list.js:主要向外部提供两个属性list和loadMore;list用来存放需要展...原创 2018-12-25 18:21:01 · 717 阅读 · 0 评论 -
小程序搜索和历史搜索配合使用组件
效果图结合之前那篇通用搜索组件文章,这篇是在通用搜索组件的基础上加上了历史搜索列表和清空历史搜索功能;该组件结合了common-search组件和common-search-history组件;编写common-search-history组件common-search-history组件主要向外部提供一个list属性,用来存放需要展示的list记录和向外部提供两个事件回调方法onClic...原创 2019-01-04 13:23:58 · 644 阅读 · 0 评论 -
小程序日,周,月,季度,自定义选择器
应用场景考虑到某些报表需要根据某天,某周,某月,某季度,或者自定义查询展示;然后每种方式的日期的选择方式各种各样,这里根据我们的需求写了一种针对这些的选择器;编写日,周,月,季度,自定义tab组件编写tab组件,组件名tab-cycletab-cycle.js关键代码,提供tab_datas和cur_tab_id两个属性,tab_datas属性只要是提供给外部重新自定义tab内容,提供了一...原创 2018-12-13 16:43:06 · 3470 阅读 · 0 评论 -
小程序自定义城市选择控件
效果图:介绍:对于微信小程序,微信提供了一个滚动选择器和自身的城市滚动选择器,但是开发中难免存在一些自定义的样式,这时候就要自己来定义了。下面我来简单介绍一下怎么自定义:1,首先微信提供了一个滚动选择器:picker-view,picker-view官方说明:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-v原创 2018-01-16 14:25:25 · 5757 阅读 · 0 评论 -
小程序滑动悬浮tab
效果图:介绍:1,首先写一个tab的template组件;2,自定义一个滑动悬浮的组件flaot-tab;3,计算滑动多高距离开始出现悬浮;4,监听页面滑动深入说明我就不说了,大家自己看源码吧:git地址:https://github.com/fuxingkai/frankui-weapp,走过路过给个star和fork一下,欢迎大家吐槽。原创 2018-01-16 15:30:45 · 5315 阅读 · 7 评论 -
小程序横向滚动tab
效果图:要点介绍:1,scroll-view 设置为横向滑动scroll-x=”true”<scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip原创 2018-01-18 12:05:01 · 4253 阅读 · 1 评论 -
小程序折线图
注意要点:1,通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候,创建 canvas 绘图上下文需要使用wx.createCanvasContext(canvasId, this),有疑问请查看微信小程序api介绍https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canv...原创 2018-02-09 14:46:43 · 6798 阅读 · 1 评论 -
小程序柱状图
注意要点:1,通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候,创建 canvas 绘图上下文需要使用wx.createCanvasContext(canvasId, this),有疑问请查看微信小程序api介绍https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canv...原创 2018-02-09 14:47:14 · 6131 阅读 · 6 评论 -
小程序双折线图
注意要点:1,通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候,创建 canvas 绘图上下文需要使用wx.createCanvasContext(canvasId, this),有疑问请查看微信小程序api介绍https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canv...原创 2018-04-08 14:58:36 · 1498 阅读 · 0 评论 -
小程序柱状折线双图
注意要点:1,通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候,创建 canvas 绘图上下文需要使用wx.createCanvasContext(canvasId, this),有疑问请查看微信小程序api介绍https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canv...原创 2018-04-08 14:59:35 · 1152 阅读 · 8 评论 -
小程序页面跳转传参包含链接地址方案
场景:平时如果我们在某个页面A传一个带有参数的网络地址(http://www.ca.com?a=45&dd=23)给页面B;如果直接通过字段复制,往往不能直接得到对应http://www.ca.com?a=45&dd=23,微信小程序会自动把该参数拆分成多个参数;如:A界面传参let webUrl ='http://www.ca.com?a=45&dd=23' w...原创 2018-11-20 15:17:46 · 5222 阅读 · 0 评论 -
java获取微信openId和用户信息
小程序获取登录code和用户加密信息方法 wx.login({ success(res) { console.log("postLogin login success", res); if (!res.code) { reject(); } wx.getUserInf...原创 2019-08-15 15:37:36 · 1062 阅读 · 0 评论