![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
静默思想
初次加入,多多包涵
展开
-
vue实现全选/单选
//未开票单选selectedTap(item, index) { if (typeof item.isChecked == 'undefined') { this.$set(item, 'isChecked', true); } else { item.isChecked = !item.isChecked; } let maxlen = this.notinvoicedList.length; let count = 0; this.notinvoicedLi.原创 2021-01-18 16:56:38 · 480 阅读 · 0 评论 -
微信相关的登录流程
微信授权登录流程第一步:wx.login获取 用户临时登录凭证code第二步:wx.getUserInfo获取加密过的数据encryptedData和解密参数iv第三步:把步骤一、二中的code、encryptedData、iv传到开发者自己服务端第三步:服务端获取到code、encryptedData、iv之后用get方法请求如下微信接口https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&原创 2020-08-07 22:54:17 · 4344 阅读 · 0 评论 -
微信小程序与js简单时分秒毫秒倒计时
js简单时分秒毫秒倒计时效果图 直接copy就能运行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>js时分秒毫秒倒计时</title> &l原创 2018-05-14 18:01:56 · 6285 阅读 · 0 评论 -
微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工具类的组装也可以作为组件化的一种形式)小程序的组件化挺有意思的基于Component,自行实现了一套比较深的实现(这篇不讲实现),第一次看感觉跟Page好,或者说是换汤不换药。但内...原创 2018-05-15 11:41:07 · 10145 阅读 · 1 评论 -
微信小程序自定义选项卡tabBar模板底部顶部导航
小程序让每个页面都有tabbar 选项卡导航 1.创建模板文件\pages\template\tabBar.wxmlRun codeCut to clipboard1 tabBar.wxml文件代码<template name="tabBar"><view class="flex-h flex-hsb tab-bar" style="color: {...原创 2018-05-15 11:45:50 · 16625 阅读 · 3 评论 -
微信小程序wepy的使用
wepy框架编写的小程序demo,看看也无妨,github地址请点击,欢迎star—>传送门 安装使用见README,本次主要讲使用过程中遇到的问题,会持续更新下去: 路由跳转:demo中从列表页面跳转到详情页面,没有使用页面标签navigator进行跳转,原因是在首页的导航栏中已经使用过这种方法,想换其他的方法进行尝试:3.1.原本使用wepy.component的几个属性来实现,...原创 2018-05-15 11:53:59 · 3241 阅读 · 0 评论 -
简单的生成随机验证码的小程序
//随机生成验证码//第一步: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { test(response); }...原创 2018-05-17 00:24:08 · 1045 阅读 · 0 评论 -
微信小程序----当前时间的时段选择器插件(今天、本周、本月、本季度、本年、自定义时段)
准备阶段的JSconstructor() { this.now = new Date(); this.nowYear = this.now.getYear(); //当前年 this.nowMonth = this.now.getMonth(); //当前月 this.nowDay = this.now.getDate(); //当前日 this...原创 2018-05-29 11:17:22 · 8988 阅读 · 0 评论 -
微信小程序之图片上传
//弹出https://blog.csdn.net/qq_30641447/article/details/80225671 wxml:<view class="head"> <view class='fabu' bindtap="submit">发布</view></view><textarea plac转载 2018-05-02 14:31:48 · 627 阅读 · 0 评论 -
小程序问题处理
redirectTo和navigateTo不能再跳转到带有tab选项卡的页面小程序新增了一个接口wx.switchTab。这个接口是专门用来跳转到带有tabbar的页面Page({ onTap: function (event) { wx.switchTab({ url: "../posts/post" })...转载 2018-04-28 18:47:41 · 675 阅读 · 0 评论 -
时间格式化
var util = require('../../utils/util.js');const app = getApp()Page({data: {aftertime:'',timeD:''},onLoad: function (options) {var stringTime = "2018-08-09 17:40:00";var stringTime...原创 2018-08-10 18:02:36 · 255 阅读 · 0 评论 -
小程序表单验证
// 判定输入为非空字符 formSubmit: function (e) { var that = this; var phone = e.detail.value.phone; var vip = e.detail.value.vip; var reg = new RegExp('^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\\d...原创 2018-08-20 12:26:27 · 1098 阅读 · 0 评论 -
小程序getCurrentPages
收货地址address.jsselectAddress(event) { try { wx.setStorageSync('addressId', event.currentTarget.dataset.addressId); wx.setStorageSync('index', event.currentTarget.dataset.index); ...原创 2019-03-19 11:13:53 · 2175 阅读 · 0 评论 -
小程序列表倒计时
适合拼团用的倒计时:通过后端传过来的数据,前端进行处理转换js:data:{ pinkEntityList :[]}getpink:function(){ let that = this; util.request(api.GoodPink, { id: that.data.id}).then(function (res) { //拼团接口 consol...原创 2019-05-27 18:22:00 · 620 阅读 · 0 评论 -
小程序全面屏底部按钮适配
如果你的小程序页面按钮有用fixed定位到底部的话,那你一定会遇到兼容全面屏的坑(与底部横条重叠)。查了下文档,发现能用的就只有一个api:wx.getSystemInfoSync()wx.getSystemInfoSync()封装一个全局的函数代码如下:app.jsonLaunch: function (e) { // 判断设备是否为全面屏 t...原创 2019-05-29 11:50:20 · 4888 阅读 · 0 评论 -
小程序日历 实现前端展示三个月 上下箭头切换效果
点击选中日期 开始时间和结束时间 类似于酒店入住wxll<view class='wraper'> <view class="list"> <view class="close" catchtap="closetap">X</view> <view class="dateChoose">选择日期<...原创 2019-08-29 11:30:32 · 1180 阅读 · 0 评论 -
小程序canvas换行与canvas生成图片分享朋友圈及分享好友
小程序canvas多余文字"..."处理 文字换行显示 分享给好友及朋友圈 保存图片到本地所有的图片均要是https的 先用wx.downloadFile处理到本地 适配可用wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) {console.log(re...原创 2019-08-29 11:57:16 · 519 阅读 · 0 评论 -
微信小程序6位或多位验证码/密码输入框
在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一、效果图如下: 二、代码部分wxml: <form bindsubmit="formSubmit"> <view cla...原创 2018-05-30 17:04:39 · 3255 阅读 · 1 评论 -
微信小程序canvas时钟
代码:wxml:[html] <view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='touchend'> <canvas canvas-id='clock' style='wid...原创 2018-05-31 11:53:47 · 583 阅读 · 0 评论 -
微信小程序制作海报保存到相册发朋友圈
这个功能应该分三步来做:一、制作海报图片二、保存图片到相册详细步骤:一、制作海报1.要制作能保存到相册的图片,我们需要一个canvas标签,在我们的wxml的最后加入canvas标签:[html] view plain copy<button class="shareBtns" bindtap='onSaveImg'></button> &...原创 2018-06-07 19:37:19 · 3435 阅读 · 0 评论 -
微信小程序-手风琴
1、WXML <view class=‘container‘> <view class=‘container-wrap‘> <block wx:for="{{content}}"> <view class=‘item-li‘> <view class=‘item-title‘ data-c...原创 2018-07-04 11:42:42 · 2495 阅读 · 1 评论 -
微信小程序tab选项卡
第一种:wxml:<!-- 导航栏开始 --><view class="swiper-tab"> <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?'swiper-active':''}}" data-current="{{index}}" catchtap="cli...原创 2018-07-04 17:47:07 · 456 阅读 · 0 评论 -
小程序的拖拽、缩放和旋转手势 滚动置顶
<view class='touch-container'><view class='msg'>{{msg}}</view><image class='img' src='{{src}}' style="width:{{width}}rpx;height:{{height}}rpx;left:{{left}}rpx;top:{{top}}rpx;t...原创 2018-07-09 14:38:32 · 1276 阅读 · 1 评论 -
微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。 1 wxml代码。<canvas canvas-id="myCan...原创 2018-07-12 20:55:47 · 1939 阅读 · 1 评论 -
小程序时间排序布局
wxml:<view class='list'><view class='li1'><view class='img'></view><view class='text'>1</view><text class='data'>2018.01.01</text>&a原创 2018-07-17 14:32:01 · 1911 阅读 · 0 评论 -
小程序实现城市选择
<view class="search-box"><input placeholder="中文/拼音/首字母" class='search-input' bindinput='bindSarchInput' placeholder-class='search-input-placeholder' /></view><view class='a-...原创 2018-07-17 19:50:04 · 2003 阅读 · 0 评论 -
精确计算微信小程序scrollview高度,全机型适配
众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到。而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。坑归坑,没办法,还是得用……既然官方要求必须传高度,那就想办法计算吧。一、布局分析,推导公式二、计算变量的高度2.1 计算单个节点高度上面的公式中的变量有:页面可用高度, ti...原创 2018-07-18 18:43:06 · 5448 阅读 · 2 评论 -
微信小程序实现图片懒加载的懒办法
首先,我们在本地先放上一张图片(index.png) 图中每个模块的高度应该是Demo的高度=图片的高度+文字描述内容节点高度+maigin-bottom知道高度的计算之后就好办了微信小程序Page中的onPageScroll方法直接提供了监听页面滑动距离的方法用本地的图片形成一个占位符效果,然后由arry中对应下标的false和true来控制image 标签的路径是本地的还是...原创 2018-07-02 12:08:42 · 1704 阅读 · 0 评论 -
小程序的填坑小技巧之Canvas
首先在我们的wxml写下如下代码<canvas class="canvas" canvas-id="canvas"></canvas>设置 Canvas 大小,可以直接在 wxml 里的 canvas 标签上设置,也可以用 wcss 。个人比较喜欢用wcss 。重点来了 canvas-id 是小程序里特有的,是canvas 组件的唯一标识符,之后的很多地方都...原创 2018-06-29 11:16:24 · 3030 阅读 · 1 评论 -
微信小程序保存图片到相册
先来看小程序中的保存图片到相册的api[javascript] view plain copywx.saveImageToPhotosAlbum({ filePath : "./test.png", //这个只是测试路径,没有效果 success(res) { console.log("success"); }, fail : fu...原创 2018-06-07 19:38:16 · 2506 阅读 · 0 评论 -
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的。主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml点击页面中 黄色的input就可以跳转到真正的搜索页面:pages/components/component2/search/search.wxml搜索页面中也是有个input搜索框,旁边有个小叉号,可以清...原创 2018-06-08 10:53:59 · 51900 阅读 · 8 评论 -
微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付
转自郑陆伟博客,原文地址:https://www.cnblogs.com/zhengluwei/p/7746095.html最近负责的一些项目开发,都用到了微信支付(微信公众号支付、微信H5支付、微信扫码支付、APP微信支付)。在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存。先说注意的第一点,所有支付的第一步都是请求统一下单,统一下单,统一下单,请求U...转载 2018-06-08 12:18:03 · 614 阅读 · 0 评论 -
微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式 调用系统的API,系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?忘记请自行回顾上一篇 微信小程序实战篇-电商(二)当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利...原创 2018-06-12 14:45:52 · 17078 阅读 · 0 评论 -
微信小程序下拉刷新/上拉加载更多
查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部,在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;看一下json文件 [javascript] view plain copy"enablePullDownRefresh": true, ...原创 2018-06-12 14:47:19 · 404 阅读 · 0 评论 -
微信小程序swiper组件 选项卡 自定义日历
开发文档是好朋友,让我们再来看看。swiper组件在小程序中非常常见,它可在有限的区域展示更多内容,还能增加页面的视觉动态效果,总之就是好。(但,好东西也是有槽点的啦)1) 滑动swiper可改变导航栏的状态,点击导航栏选项可切换swiper-item。这个实现较为简单,步骤如下:在data中添加一个表示下标的变量curIndex; 将此变量绑定到导航栏各个选项,同时使用一个三...原创 2018-06-20 16:01:52 · 1655 阅读 · 0 评论 -
微信小程序关键字搜索
首先是在搜索页面获取到关键字,之后作为请求参数wx.request进行请求与数据处理 在util.js内获取到所有数据之后,在众多数据中通过RegExpObject.test(string)实现关键字的遍历匹配 //util.js if (data.hasOwnProperty('key')) { //如果请求参数是key const media = res.data;...原创 2018-06-20 16:07:09 · 9661 阅读 · 1 评论 -
小程序左滑删除
wxml <!--pages/mycollect/mycollect.wxml--><!--最外层大盒子 --><view class="collect_big_box"><!--列表盒子 --><view class="collect_list_box"><scroll-view bin转载 2018-06-22 12:19:41 · 388 阅读 · 0 评论 -
微信小程序乐园-checkbox(全选、全不选)
首先这是我的设计思路:一、传入以下Json数据格式的数组 1.标题title 2.图片地址 3.数量num 4.价格price 5.是否选中selected 二、点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识三、全选操作 首次点击即为全部选中,再次点击为全不选,全选按钮本身也跟随toggle变换四、点击结算按钮,将已选中的数...原创 2018-07-20 19:08:23 · 7885 阅读 · 0 评论