微信小程序
王竹根
平凡之路,砥砺前行
展开
-
微信小程序-生成保存图文海报-canvas生成图片、二维码、自定义文字样式
代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/canvasTest效果:点击保存图片- //步骤流程:1.把二维码生成临时图片文件-2.canvas画文字+二维码图片-3.保存新的临时文件-4.保存到相册canvas图片宽度根据设备进行适配let unit = systemInfo.screenWidth / 375以375px基准进行宽度适配:切换iphone6和iphone6...原创 2021-05-18 16:18:01 · 1177 阅读 · 0 评论 -
微信小程序-同时获取麦克风、相机权限、获取多个权限
代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/authSetting效果:wxml:<button bindtap="checkScopeCamera">申请获取相机权限</button><button bindtap="checkScopeCamera">申请获取相机权限-同步函数方式</button><button bindtap="che原创 2021-05-18 15:39:30 · 7628 阅读 · 0 评论 -
微信小程序时间段选择器-picker组件动态选择时间
代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/hoursPicker效果:wxml:<view class="pickerMai">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChang原创 2020-12-31 14:06:56 · 6239 阅读 · 2 评论 -
wepy
效果:代码:<style lang="less">.userinfo-navigate { width: 280rpx; height: 80rpx; border: 1rpx solid red;}.userinfo { display: flex; flex-direction: column; align-items: center;...原创 2020-04-02 15:19:34 · 185 阅读 · 0 评论 -
小程序-下拉刷新+上拉加载更多
效果:下拉刷新:问题1:看不到三个点,这个问题通常是背景和那三个点的颜色没设置对造成的//.json{"enablePullDownRefresh": true,"backgroundTextStyle": "dark","backgroundColor":"#eee"}上拉加载更多设置scroll-view的高度大于屏幕的高度以iphone6为例:he...原创 2019-04-08 20:06:18 · 989 阅读 · 0 评论 -
微信小程序-fly网络请求库
下载wx.js源码:https://github.com/wendux/fly/tree/master/dist/npm/wx.jsconst app = getApp()var Fly = require("./wx.js") //wx.js为您下载的源码文件var fly = new Fly();//添加拦截器fly.interceptors.request.use((conf...原创 2019-07-22 18:29:34 · 2023 阅读 · 1 评论 -
宽度自适应文字内容-滑动门
改变宽度对比滑动门<!--pages/f/f.wxml--><view>滑动门</view><view class="tap"> <view class="item">1</view></view><view class="tap"> <view class="i...原创 2019-08-28 11:00:33 · 311 阅读 · 1 评论 -
小程序-效果
选择条目效果<!--pages/test/test.wxml--><view class='hide_select_option' bindtap='closeOption'> <view class='select_box'> <view class='select'> <view ...原创 2019-08-29 01:21:30 · 237 阅读 · 0 评论 -
瀑布流-微信小程序版
参考:https://segmentfault.com/a/1190000012621936思路:1.第一行正常排列。2.第二行开始,使用绝对定位。找到第一行中高度最小的元素节点,进行定位。然后依次排列下去。效果:代码:<!--pages/pubu/pubu.wxml--><view class="container"> <b...原创 2019-09-23 18:25:12 · 289 阅读 · 2 评论 -
搜索自动模糊匹配-小程序版
api接口参考:http://suggestion.baidu.com/su?wd=1效果:<!--pages/search/search.wxml--><input type='text' bindinput='inputChange' value='{{ searchValue }}' placeholder='搜索' class='input_sea...原创 2019-09-26 15:19:03 · 1338 阅读 · 0 评论 -
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object)获取图片信息。网络图片需先配置download域名才能生效。测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_...原创 2018-11-14 14:25:43 · 14071 阅读 · 1 评论 -
小程序css样式+自定义组件+功能
代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen.git自定义组件-对话框sc-modal.wxml<view class="modal-content {{ modalSlide ? 'show': '' }}" wx:if="{{ modalStatus }}"> <view class="mod...原创 2018-10-15 16:07:31 · 4097 阅读 · 0 评论 -
微信小程序-checkbox
checkbox判断是否选中wxml部分checkbox-group bindchange="niming"> <view class='check-box'> <checkbox value="是否选择" color='#1e82d2'/> </view> </checkbox-group>js部原创 2018-10-15 11:57:05 · 3818 阅读 · 1 评论 -
【微信小程序】自定义模态对话框实例
自定义模态对话框实例由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。wx.showModal(OBJECT) 自定义 模态对话框涉及文件界面 wxml 样式 wxcss 事件及方法 js效果图界面代码 .wxml<button class="sh...转载 2018-06-05 18:02:32 · 1530 阅读 · 0 评论 -
小程序常用样式
经典左右居中对齐(绝对布局下).center { width: 102rpx; height: 100px; position: absolute; left: 50%; margin-left: -51rpx;}对齐方式(居中、居右)微信小程序view控件布局,水平居中,垂直居中(上下居中)display: flex;//必须有,不然没有效果j...原创 2018-06-06 11:29:15 · 5140 阅读 · 0 评论 -
微信小程序功能收集
下拉选择框参考:https://www.cnblogs.com/xjwy/p/8489256.html 微信小程序-OCR信息识别使用spring创建web项目,把上传的图片转换成base64格式,然后调用阿里云orc身份证识别接口参考:https://blog.csdn.net/J_CSDN19/article/details/80947102微信小程序API——获取...原创 2018-06-06 17:52:47 · 2196 阅读 · 0 评论 -
微信小程序
【问题记录】控制台解析preview和response数据不一致→解决JS处理后台返回的Long型数据精度丢失问题描述:后端返回数据preview和response不一致(翻译成专业术语就是:JS处理后台返回的Long型数据精度丢失)问题分析:JS在处理返回数据类型是Long的时候,精度会丢失一部分!!!问题原因:JS内置有32位整数,而number类型的安全整...原创 2018-06-07 18:32:23 · 1390 阅读 · 0 评论 -
微信小程序-插件使用
举例:日历插件效果:参考:https://github.com/czcaiwj/calendar注意:刚刚引入的时候,不能马上使用,不然代码会报“version”错误原因:引入之后,小程序使用插件需要经过插件开发者的同意。(开发者可在”小程序管理后台-小程序插件-申请管理“内处理插件的接入申请。插件开发者可在24小时内选择”通过“或”拒绝“申请方使用插件。)等开...原创 2018-06-08 18:17:25 · 2202 阅读 · 0 评论 -
微信小程序-倒计时
60秒倒计时效果:参考:https://m.w3cschool.cn/xiaochengxu/nsgq1u7h.html布局:<button bindtap='countdown'>60秒倒计时</button><text>{{second}}</text>js代码:// pages/info-four/info-fou...原创 2018-06-29 17:46:40 · 5555 阅读 · 0 评论 -
微信小程序-短信验证码
效果:源码地址:链接:https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg 密码:ot16参考:https://blog.csdn.net/Beijiyang999/article/details/77885021原创 2018-06-25 17:56:27 · 5052 阅读 · 2 评论 -
基于 Vue.js 的小程序开发框架-美团开源mpvue
mpvuempvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架五分钟上手教程 菜鸟教程:https://www.runoob.com/vue2/vue-tutorial.html原创 2018-09-06 17:34:14 · 568 阅读 · 0 评论 -
微信小程序-rpx设备分辨率适配
移动设备的物理分辨率px与rpx设备分辨率pt为什么要用iphone6的物理分辨率来做设计图?750X1334Ip6下 1px=1rpx如何做不同分辨率设备的自适应?各个移动设备的分辨率与rpx......原创 2018-09-27 11:32:18 · 1758 阅读 · 0 评论 -
动手开发一个名为“微天气”的微信小程序(上)
0动手开发一个名为“微天气”的微信小程序(上) 微信小程序小程序 阅读412转载 2017-03-06 11:18:09 · 1087 阅读 · 0 评论