微信小程序
分享微信小程序开发问题
chibimarukochan
记录一些学习心得和日常。
展开
-
遍历Picker选择器,只改变一个下拉框选项
问题描述:循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变。解决方法:1、页面内容:<view wx:for="{{repairDevice}}" wx:key> <view class="cu-form-group"> <view class="title">车辆维修部位</view&...原创 2019-07-05 11:29:04 · 1485 阅读 · 2 评论 -
微信小程序—picker组件(range 是一个 Object Array)
主要记录:当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容此处就以二级联动为例: <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChan...原创 2019-06-06 11:33:13 · 2797 阅读 · 3 评论 -
微信小程序-自定义三级联动
不像省市区可以直接使用小程序的组件,这边自己定义一个城市-维修站-人员的三级联动效果。运用picker组件,设置mode 的合法值为multiSelector(多列选择器);其中range是一个二维数组,只要按二维数组格式[[],[],[]]填入数据即可。 <picker mode="multiSelector" bindchange="bindMultiPicker...原创 2019-05-31 11:55:47 · 8034 阅读 · 9 评论 -
微信小程序-浅谈rpx px rem em
实际工作中设计师常常给的是物理分辨率,程序中用到的是逻辑分辨率。【物理分辨率】是硬件所支持的分辨率,【逻辑分辨率】是软件可以达到的分辨率物理分辨率和逻辑分辨率的商称为【像素倍率dpr】,也就是常说的几倍屏。以iPhone6为例,逻辑分辨率为375*667;物理分辨率为750*1334;像素倍率dpr=2【rpx】rpx其实是微信对于rem的一种应用的规定,或者说一种设计的方案...原创 2019-05-29 14:56:30 · 1952 阅读 · 0 评论 -
微信小程序-进度条展示
效果一:不同阶段用不同的图标显示,进行中的图标有动画效果。(进度条高度一致) <block wx:for="{{list}}" wx:key> <view class='order'> <view wx:if="{{index==0}}" class='icon in'></view> <view wx...原创 2019-05-28 14:35:32 · 2790 阅读 · 2 评论 -
微信小程序-退款业务
一、退款业务效果二、退款流程第一步:展示需要退款的订单第二步:点击退款按钮,判断是否有需要退款的订单第三步:获取到需要退款的订单信息第四步:为每个需要退款的订单去调用微信退款接口第四步:最后弹出退款情况三、实现退款页面(展示姓名、退款原因、金额、申请退款时间等)<view class="container"> <block wx:if...原创 2019-05-18 15:19:38 · 1487 阅读 · 0 评论 -
微信小程序-长按图片保存到相册
首页需要通过 wx.getSetting 先查询一下用户是否授权了写入相册权限; 其次对于网络图片,可调用wx.downloadFile下载文件资源到本地; 然后非网络图片,可以调用wx.getImageInfo(Object object)获取图片信息; 最后调用wx.saveImageToPhotosAlbum,保存图片到系统相册。1.wxml代码长按保存bindlongtap方法...原创 2019-05-15 11:56:34 · 7050 阅读 · 3 评论 -
微信小程序-wx.createAnimation动画实现
一、效果说明:类似携程切换往返地址二、实现1).wxml:<view class="animation"> <view class="dis-flex"> <view class='flex3' animation="{{lAnimate}}">{{start}}</view> <view class=...原创 2019-04-29 14:31:38 · 15331 阅读 · 0 评论 -
微信小程序-复制到剪切板
一、效果二、实现1).wxml:<text>被复制的内容:{{text}}</text><view bindtap='copyText' class="copyButton">复制按钮</view><text>显示复制内容:{{text2}}</text>2).js: data: { ...原创 2019-04-29 11:46:30 · 3517 阅读 · 0 评论 -
微信小程序-使用ColorUI
一、说明与使用ColorUI是一个css库。如果使用原生小程序开发,从https://github.com/weilanwl/ColorUI/下载源码解压获得/demo,复制目录下的/colorui文件夹到你的项目根目录(与pages目录同级)。目录结构如下:在app.wxss引入关键Css :main.wxss,icon.wxss/**app.wxss**/@i...原创 2019-04-28 14:06:36 · 16610 阅读 · 3 评论 -
微信小程序-将时间转换成几秒前 几分钟前 几小时前 几天前等时间格式
描述:显示消息时间为几天前 几小时前 几分钟前;同时一年以上的日期直接显示YYY:MM:DD形式效果:方法实现:可以在utils目录下建一个存放公共方法的文件,将getDateDiff方法放在此处,文件末尾处抛出即可。module.exports = { getDateDiff: getDateDiff}function getDateDiff(dateTi...原创 2019-04-22 15:03:53 · 4924 阅读 · 2 评论 -
微信小程序-实现换一换,刷新列表数据
效果:解决思路:在数据允许范围内,选取四个随机数,然后对数据列表字段重新赋值。实现:1)在一次请求接口拿到列表所有数据时,把列表原始数据存储起来。2)数据格式如下:[{ActType:"协会活动"Act_Title:"烟花协会"Act_id:"3636445707881152512"ItemType:"1"LOGOURL:"../upload/clubs/...原创 2019-04-22 14:43:15 · 4019 阅读 · 0 评论 -
微信小程序-解决ios系统宽度为100%,页面可以左右滑动bug
问题:设置好{width:100%;}但是页面却可以左右滑动。解决:最外围标签定义{position: fixed;}或者{overflow-x:hidden;}原创 2019-04-09 10:02:59 · 5001 阅读 · 4 评论 -
微信小程序-二级联动、时间选择器(只精确到分)
一、二级联动1)效果2)实现<view class="section"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value...原创 2019-03-29 11:25:53 · 3923 阅读 · 6 评论 -
微信小程序-地图导航
功能描述:发布信息的时候选择位置;详情页展示的时候展示位置名称并且可以导航到该位置。1)选择位置chooseLocation: function () { let that = this; wx.chooseLocation({ success: function (res) { that.setData({ osscati...原创 2019-03-28 15:48:44 · 1438 阅读 · 0 评论 -
微信小程序-动态添加、删除指定View
一、实现效果:二、实现代码:1).wxml页面:循环的addPrice是一个数组; 需要保存数组的下标和字段名称; <view class="price-detail" wx:for="{{addPrice}}" wx:key=""> <view class="price-detail-descp"> <imag...原创 2019-03-28 10:30:27 · 10802 阅读 · 7 评论 -
微信小程序-view实现单选、多选
一、在微信小程序里面不使用radio怎么实现view的单选 <view class="sign-setting-border {{idx==item.Item_id?'selected':''}}" wx:for="{{applyList}}" wx:key="" bindtap='selectApply' data-id="{{item.Item_id}}">{{item....原创 2019-03-26 12:02:13 · 14531 阅读 · 10 评论 -
微信小程序-页面传值
1.在.wxml页面 <navigator wx:for="{{plateArray}}" wx:key='' url="{{item.PageUrl}}?typeId={{item.id}}" open-type='navigate'>如果需要传多个参数, 用 & 链接即可;在对应页面的onload方法内接受;onLoad:function(options...原创 2019-03-26 11:36:22 · 502 阅读 · 0 评论 -
微信小程序-监听屏幕滚动
一、效果:功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样。二、实现:运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离。1).js中:data:{ scrollTop:0,},//监听屏幕滚动 判断上下滚动 onPageScroll: function (ev) { this.setDat...原创 2019-03-19 17:17:53 · 9543 阅读 · 2 评论 -
微信小程序-textarea字数统计与限制
第一步:参考官方文档《textarea小程序》textarea多行输入框。该组件是原生组件,使用时请注意相关限制。用到的属性:属性 说明 maxlength 最大输入长度,设置为 -1 的时候不限制最大长度 minlength 最小输入长度 bindinput 当键盘输入时,触发 input 事件,event.detail = {value, cur...原创 2019-03-19 14:09:06 · 8450 阅读 · 0 评论 -
微信小程序-自定义placeholder颜色和样式
正常h5页面:各个浏览器对css支持各有不同,所以需要对齐区别设置**placeholder的字体颜色**/input::-webkit-input-placeholder { /* WebKit browsers */color:#DBDBDB;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#DBDB...原创 2019-03-08 09:33:44 · 784 阅读 · 0 评论 -
微信开发者工具版本(1.02.1902010),导入项目时报错:tunneling socket could not be established,cause=connect ECONNREFUSE
微信开发者工具版本,更新到版本(1.02.1902010)之后,导入项目时报错:tunneling socket could not be established,cause=connect ECONNREFUSED 127.0.0.1:49527解决:打开微信开发者工作的【设置】,选择【代理设置】,弹出设置页面,选择【不使用任何代理,勾选后直连网络】...原创 2019-03-08 09:14:31 · 3190 阅读 · 0 评论 -
微信小程序-敏感内容检测
第一步:获取access_token //获取access_token let access_token = wx.getStorageSync('access_token'); if (access_token != null){ //直接进行检测操作 } let url = 'https://api.weixin.qq.com/cgi-bin/token'; ...原创 2019-02-15 11:41:58 · 9778 阅读 · 7 评论 -
微信小程序-多图片上传
继续上篇文章《微信小程序-图片选择并预览》之前并未调用wx.uploadFile(Object object),将本地资源上传到服务器。需要注意的一点:微信接口返回的数据是string类型,我们需要转换成需要的json格式 *******JSON.parse(res.data)/****上传图片 */ uploadFile:function(){ let that=t...原创 2019-01-17 10:22:48 · 232 阅读 · 0 评论 -
微信小程序-国际化语言包
微信小程序对没有对多语言的支持,我们可以自从加入,因为项目中需要切换简体字和繁体字,所以去研究了一下。需要注意的是:一旦用户修改了语言,所有的页面都要做出修改;记住用户选择的语言,方便用户下次打开。效果: 实现过程:1.在 utils 目录下新建一个 i18n.js 文件。let T = { locale : null, locales : {}, ...原创 2019-01-15 17:54:13 · 9660 阅读 · 2 评论 -
微信小程序-表单验证(WxValidate使用)
演示:插件介绍该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。插件下载GitHub地址:https://github.com/skyvow/wx-extend/blob/master/docs/components/validate.md在下载的文...原创 2019-01-15 17:53:16 · 7269 阅读 · 0 评论 -
微信小程序-自定义组件
描述:将页面内的功能模块抽象成自定义组件,以便在不同页面中重复使用;或者是复杂的页面拆分成多个低耦合的模块,有利于代码维护。功能实现:下面就以列表展示为例,在项目中,多个地方使用到列表展示,整体样式就是左边图片,右边标题和内容列表。第一步:创建组件在pages同级目录下新建component目录,在当前目录下新建list文件夹,里面包含.js,,wxml,,json,,wxml四个...原创 2019-01-02 21:46:50 · 380 阅读 · 0 评论 -
微信小程序-自定义下拉框组件
微信小程序中没有select下拉选项框,所以只有自定义,自己写样式啦。自定义的话,我选择以组件的方式来创建,这样可以实现在多个地方重复使用,用户是需要引入组件和添加数据即可。方法参照《微信小程序-自定义组件》第一步:创建组件在pages同级目录下新建component目录,在当前目录下新建select文件夹,里面包含.js,,wxml,,json,,wxml四个文件。...原创 2018-12-28 17:31:06 · 3294 阅读 · 2 评论 -
微信小程序-下拉刷新上拉分页加载
小程序中自带方法:分别为onPullDownRefresh和onReachBottom具体操作如下:必须先在对应的页面的.json文件中,启用下拉刷新,设置enablePullDownRefresh为true{"enablePullDownRefresh": true}data:{ searchPageNum:1},/*页面相关事件处理函数--监听用户下拉动作*/...原创 2018-12-27 15:43:49 · 3144 阅读 · 0 评论 -
微信小程序-【仿咸鱼】的底部导航
效果: 说明:需要隐藏小程序自带的tabBar下载地址:https://github.com/SuRuiGit/wxapp-customTabbar使用步骤:第一步:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替换成你自己的tabbar图片,或者我们正常图片都是放在images目录下,这里我就是...原创 2018-12-24 13:47:52 · 3521 阅读 · 2 评论 -
微信小程序-富文本插件wxParse
一、准备工作github下载waParse插件,地址:https://github.com/icindy/wxParse放到小程序目录下:和utils平级二、使用//WXML页面<import src="../../wxParse/wxParse.wxml"/><template is="wxParse" data="{{wxParseData:arti...原创 2018-12-18 16:38:16 · 350 阅读 · 1 评论 -
微信小程序-支付接口
调用wx.requestPayment(OBJECT)发起微信支付Object参数说明:参数 类型 必填 说明 timeStamp String 是 时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间 nonceStr String 是 随机字符串,长度为32个字符以下。 package String...原创 2018-12-12 11:10:19 · 538 阅读 · 0 评论 -
微信小程序-图片选择并预览
(一)功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片。其他要点:textarea使用,底部保存按钮固定(二)小程序接口说明wx.chooseLocation(Object object)从本地相册选择图片或使用相机拍照。属性 类型 默认值 必填 说明 最低版本 count number 9 ...原创 2018-11-29 22:41:25 · 1728 阅读 · 3 评论 -
微信小程序-按照首字母检索城市
一、前期准备:1.先去百度地图先申请密钥(ak)地址:http://lbsyun.baidu.com/apiconsole/key需要提供小程序的appID2.去微信公众平台 -》设置——》开发设置-》服务器域名 配置https://api.map.baidu.com如果以上两步缺少任何一步骤,小程序端会报错:3.运用小程序组件 citySelect -城市选择器可...原创 2018-11-23 10:29:17 · 1615 阅读 · 2 评论 -
微信小程序-购买系列
效果:功能说明:购买当前浏览的课程,点击立即购买按钮,从下方弹出小页面,显示课程信息,用户选择购买数量,再次点击购买,弹出购买信息及金额,等待用户确认,进入支付页面。.wxml页面:<view class="container" wx:for="{{goodsDetail}}" wx:key=""> <!--图片--> <view clas...原创 2018-11-22 17:57:43 · 2625 阅读 · 0 评论 -
微信小程序-大数运算库
功能:2进制-32进制数运算 大整数加(正负均可) 大整数减(正负均可) 大整数乘(正负均可) 大整数除(正负均可,得出的结果为整数,抹去小数部分) 大整数取余(得出的结果恒为正数) 大整数随机数生成使用:首先把下载好的weChatBigNumber.js文件放入微信小程序的 项目根目录/utils 文件夹下。在需要的.js文件中引入:var bigNum = re...原创 2018-11-22 17:30:29 · 552 阅读 · 0 评论 -
微信小程序-默认选中遍历的第一个数据,且可以自由切换选中
效果如下:第一步:wxml页面:说明:list是遍历的数据,data-index="{{index}}"中index是数据的下标(0,1,2,3.....)三元操作符需要掌握,如果index等于idx,就添加on所写的样式<view class="ul-list {{index==idx?'active':''}}" wx:for="{{list}}" wx:key="...原创 2018-11-07 11:14:29 · 6965 阅读 · 0 评论 -
微信小程序-获取日期并计算星期几
微信小程序中已经封装了一个计算日期的,格式是2018/10/05 14:56:33,在util目录下面的util.js同样的我们自己封装的计算日期的函数也放在util.js中。在需要计算日期的页面引入util.js,引入代码如下:var util=require("../../utils/util.js")功能说明:获取当前时间,并计算当前时间往后推的日期,计算星期几util...原创 2018-11-05 15:26:25 · 18149 阅读 · 11 评论 -
微信小程序-顶部或底部固定,中间内容可以滚动
1.顶部固定<view class="top" style="width:100%;height:80px;border-top:1px solid red;background-color:#f0f0f0;position:fixed;top:0;"> 顶部固定</view>2.底部固定<view class="bottom" style="wi.原创 2018-11-05 15:09:56 · 14085 阅读 · 3 评论 -
微信小程序-scroll-view左右滑动
效果:wxml页面: <view class="section section_gap"> <scroll-view class="scroll-view_H" scroll-x="true"> <view class="scroll-view-item_H" wx:for="{{hotList}}" w原创 2018-11-05 11:49:29 · 1865 阅读 · 0 评论