Rattenking的博客_CSDN博客-Rattenking 的前端笔记,---微信小程序,微信小程序领域博主

原创微信小程序实例系列

下载微信小程序实现部分高德地图功能的DEMO下载微信小程序实现MUI的部分效果的DEMO下载更多微信小程序实例 GIT GIT地址 https://github.com/Rattenking/WXTUI-DEMO ...

2018-02-08 11:11:12 20798 15

原创前端笔记列表

基础知识神奇的position:sticky 双飞翼布局的原理圣杯布局的原理 Browser 对象(一、history) JS获取当前网址信息前端常见面试题前端自适应—-单位rem node.js 获取url中的各个参数 nodejs之url模块 nodejs之querystring模...

2018-01-30 16:58:21 1435 0

原创游戏列表

DEMO下载五子棋悔棋DEMO 五子棋AI篇DEMO 文字列表五子棋微信小程序（游戏）—-五子棋（棋盘，重置，对弈篇）微信小程序（游戏）—-五子棋（悔棋篇）微信小程序（游戏）—-五子棋（AI篇）微信小程序（游戏）—-五子棋...

2018-01-11 16:22:54 2132 0

原创微信小程序----开发rui-dtpicker多粒度日期组件

使用到 GitHub 下载 WX-RUI 的代码，将 component 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 dtpicker 为例，其它组件在对应的文档页查看： 1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）： "usingCom...

2019-03-25 10:05:21 1028 0

原创 uni-app组件开发----多粒度时间选择器组件

###WXRUI体验二维码如果本插件对你的开发有帮助，请进入小程序，点击一下广告，谢谢支持！下载 DatePicker 多时间粒度选择器组件下载 DatePicker 多时间粒度选择器可进行多时间粒度选择的时间选择器，组件名：rattenking-dtpicker，代码块： ruiDate...

2019-03-20 16:25:30 7674 13

原创微信小程序----Maide List（图文列表）（flex布局实现MUI的图文列表）

效果二维码效果图 WXML <view class="tui-list-box"> <view class="tui-list-head">图在左边</view> ...

2019-02-22 15:48:18 2209 3

原创微信小程序----Gallery Table（图文表格）（flex布局实现MUI的图文表格）

效果二维码效果图 WXML <view class="tui-row"> <view class="tui-col tui-col-2"> <view class=&qu...

2019-02-22 15:36:05 1040 0

原创微信小程序----Grid（九宫格）（flex实现九宫格布局）

效果二维码效果图 WXML <view class="section"> <view class="tui-table-view"> <view class="...

2019-02-22 14:52:10 10137 0

原创微信小程序----开发rui-swiper多样式轮播组件

swiper详解滑块视图容器。swiper的初始化高度为150px;swiper-item的初始高度和宽度为100%;都可通过css样式进行swiper、swiper-item的样式重置。swiper原生组件详解 swiper组件开发参数说明属性名类型 ...

2018-12-24 16:32:42 463 2

原创 GIT学习----第十五节：Feature分支

学习目的如何对未进行合并的分支进行强制删除？强制删除未合并分支建立并切换新功能分支feature-001 $ git checkout -b feature-001 Switched to a new branch 'feature-001' M re...

2018-11-30 10:56:57 153 0

原创 GIT学习----第十四节：BUG分支

学习目的遇到临时bug需要紧急修复，在git如何处理？ git如何进行工作区进行储藏，等待bug修复后的工作区恢复？临时储藏修改后查看工作区状态 $ git status On branch master Your branch is ahead of 'origin/ma...

2018-11-30 10:56:21 75 0

原创 GIT学习----第十三节：分支管理

学习目的区分‘–no-ff普通模式合并’和‘fast forward模式合并’的区别？ fast forward模式合并分支合并之前查看分支历史 $ git log --graph --pretty=oneline * 2fc181e173242bd21edad0ad0336f1a0a...

2018-11-30 10:55:01 140 0

原创 GIT学习----第十二节：解决合并分支的冲突

学习目的弄清除是如何产生分支冲突？在出现冲突后如何解决冲突？产生分支冲突创建并切换分支study $ git checkout -b study Switched to a new branch 'study' 查看readme.txt文件 $ cat r...

2018-10-24 16:54:48 99 0

原创 GIT学习----第十一节：创建与合并分支

学习目的如何查询分支列表？如何创建分支？如何切换分支？如何将分支进行合并？如何将分支进行删除？ master分支每次提交，Git都把它们串成一条时间线，这条时间线就是一个分支。截止到目前，只有一条时间线，在Git里，这个分支叫主分支，即master分支。HEAD严格来说不是指向提...

2018-10-24 15:53:31 78 0

原创 GIT学习----第十节：克隆远程库

学习目的如何从创建好的远程库进行克隆？创建远程库步骤和GIT学习----第九节：添加远程库中创建远程库一样，唯一区别就是需要填写仓库名后，勾选Initialize this repository with a README。这样创建完成后就会自动给我们生成一个README.md文件。当...

2018-10-24 15:52:34 76 0

原创 GIT学习----第九节：添加远程库

学习目的如何创建远程的Git仓库？如何关联远程的Git仓库？如何将本地的Git仓库推送到远程的Git仓库？创建远程Git仓库登陆GitHub，在右上角找到“New repository”按钮，创建一个新的仓库：在Repository name填入git-study，其他保持...

2018-10-24 14:26:01 77 0

原创 GIT学习----第八节：本地版本库命令总结

总结解决的问题及解决问题的方法初始化一个Git仓库的命令？ git init 添加文件到仓库的命令？ git add <file> 添加多个文件到仓库的命令？ git add <file> <file&am...

2018-10-24 14:25:03 71 0

原创 GIT学习----第七节：删除文件

学习目的 1.如果用rm命令删除文件，想要恢复，如何处理？ 2.如果用git rm命令删除文件，想要恢复，如何处理？ 3.如果彻底删除版本库的该文件，如何处理？ rm 删除文件查看工作区状态 $ git status On branch master nothing to commit, w...

2018-10-23 14:17:30 86 0

原创 GIT学习----第六节：撤销修改

学习目的当你在工作区修改了，但是你不想要修改的部分时，如何撤销？当你将工作区的修改添加到暂存区，如何撤销？当你将修改提交到分支，如何撤销？撤销工作区修改修改前 $ git diff $ cat readme.txt Git is a version control system...

2018-09-29 15:45:43 90 0

原创 GIT学习----第五节：管理修改

学习目的如何跟踪修改文件？如何管理修改文件？查看当前工作区、暂存区、分支状态工作区 $ cat readme.txt Git is a version control system. Git is free software. Git is a distributed versio...

2018-09-29 14:56:08 67 0

原创 GIT学习----第四节：工作区和暂存区

学习目的工作区: 在电脑里能看到的目录，比如我的GIT文件夹就是一个工作区; 暂存区: 查看仓库当前状态; 分支: Git为我们自动创建的第一个分支master. 工作区在电脑里能看到的目录，比如我的learngit文件夹就是一个工作区。版本库（Repositor...

2018-09-29 14:55:22 88 0

原创 GIT学习----第三节：版本回退

学习目的 git log: 查看版本信息; git log --pretty=oneline: 简化查看到的版本信息; git reset --hard HEAD^: 版本回退到上个版本; git reset --hard HEAD^^: 版本回退到上上个版本; git reset --hard...

2018-09-29 11:02:01 303 0

原创 GIT学习----第二节：查看工作区的状态

学习目的 git status: 查看仓库当前状态; git diff: 查看上次修改的具体内容. 修改readme.txt文件运行git status命令看看结果： $ git status On branch master Changes not staged for commit:...

2018-09-29 11:00:59 738 0

原创 GIT学习----第一节：提交文件到仓库

学习目的 git init: 初始化一个Git仓库; git add : 添加文件到仓库; git commit -m “本次提交的说明”: 提交文件到仓库. 声明之前其实也是零碎的用过git，但是都没有系统的学习，只是单纯的把其作为了一个存储工具，就和百度云差不多。但是前不久遇到一个坑逼...

2018-09-29 10:59:07 1046 0

原创微信小程序----wx.scanCode(Object object)调起客户端扫码界面进行扫码

效果参数（Object object）属性类型默认值是否必填说明支持版本 onlyFromCamera boolean false 否是否只能从相机扫码，不允许从相册选择图片 &gt;= 1.2.0 ...

2018-09-29 10:56:31 4517 0

原创微信小程序----原生API实现【到这里去（目的地）】路线规划

前言在此之前，采用了高德地图微信小程序API实现路线规划,但是由于公交路线规划不够准确，同时没有做转车等显示，所以这里补加微信小程序wx.openLoaction实现该效果！效果图个人中心进入公司地址定位公司地址到公司地址去并且实...

2018-08-28 16:03:04 3359 2

原创解决video标签播放m3u8格式视频失败问题

前言什么是m3u8？效果效果地址 m3u8视频切换效果图片解决方法采用video.js插件！引入引入videoJS插件样式文件；引入videoJS插件JS文件；引入videoJS插件播放m3u8格式视频的HLS功能。 ...

2018-08-28 15:35:15 30117 3

原创微信小程序----CSS 的空格处理

效果 HTML &lt;p&gt; Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hel...

2018-08-10 15:51:14 2197 0

转载 20 行 JS 代码，实现复制到剪贴板功能

转自：20 行 JS 代码，实现复制到剪贴板功能 HTML <div class="rui-upload-btn rui-btng" data-copytarget="#rui-base64-result" id="cop...

2018-08-01 14:56:23 670 0

原创微信小程序----解析px、rpx、rem、vw实现页面布局

PX px：绝对单位，页面按精确像素展示。在PC端经常使用的单位，不用计算，直接使用，一般情况不用考虑设计图纸的来改变页面的大小。就直接采用px,方便快捷但是不能自适应。 RPX rpx单位是微信小程序中css的尺寸单位，r...

2018-07-31 15:35:52 3675 0

原创微信小程序----相对路径图片不显示

出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示。出现图片不显示的原因小程序只支持网络路径和base64的图片。图片转base64在线工具处理方法将图片都放到服务器，然后直接采用网络路径。 ...

2018-07-27 11:25:56 14705 0

原创微信小程序----评价系统中的评星

场景在电商、医疗等带有用户评价的时候，常见的就是对服务等进行星级评定，在小程序中如何更加简单的实现该功能？效果图 WXML &amp;amp;lt;text class='rui-star'...

2018-07-18 18:29:22 3316 2

原创微信小程序----session_key失效导致的后台错误wxsp login api aesCbcUtil error info: pad block corrupted

出错场景微信小程序的一键登录，授权获取用户的手机号，进行注册。每一个新的用户在第一次进入小程序进行一键登录的时候都会报错，当第一次报错退出小程序，第二次进入时能够顺利的进行一键登录。后台Java报出的错误原因 wxsp ...

2018-07-18 18:00:20 3298 0

原创微信小程序----短信验证码倒计时插件

效果图 JS // 倒计时插件 class CountTime { constructor(page) { this.page = page; this.time = 60; this.timer = null; ...

2018-06-30 12:51:03 1452 2

原创微信小程序----wx.getLocation(OBJECT) API在iOS关闭本机定位时，获取定位失败

问题在做一个小程序时，进入首页需要获取用户的当前位置经纬度，然后去服务器查询当前位置周边的网吧。在安卓关闭定位设置时，wx.getLocation(OBJECT) API依然能够获取当前位置的经纬度；但是iOS如果关闭定位设置，wx.getLocation(OBJECT) API就...

2018-06-30 12:23:31 4706 2

原创微信小程序----wx.openLocation(OBJECT) 使用微信内置地图查看位置

开发场景已知地点的经纬度，期望在打开的地图进行标注位置和进行开车、徒步、公交、骑行等的路线规划！效果图实际应用体验 JS Page({ openLocation(){ w...

2018-06-25 18:48:43 20799 11

原创 CSS文字两端对齐

微信小程序—-CSS文字两端对齐场景—-在微信小程序的表单开发中常遇到 input 的 label 需要进行文字的两端对齐！参考：真正可用的CSS文字两端对齐由于真正可用的CSS文字两端对齐需要放置一个空标签，本人对此处进行了优化处理，利用伪元素 after 代替空...

2018-06-07 17:10:51 4459 0

原创微信小程序----当前时间的时段选择器插件（今天、本周、本月、本季度、本年、自定义时段）

DEMO效果图插件思路准备工作获取当前时间，同时获取当前的年、月、日、周几；创建处理日期数字的函数；创建格式化日期的函数；创建获取某月天数的函数；创建获取季度开始的月份函数。获取时段 ...

2018-05-28 15:31:26 4424 5

原创微信小程序----编写后台服务接口配置文件

编写后台服务接口配置文件 const basePath = 'http://test.cdbhbc.com/wbgapi'; const urlList = { // 刷新token refreshTokeUrl: basePath + '...

2018-05-23 16:39:31 4656 0

原创微信小程序----获取二维码

前言：随着小程序的火爆，功能的越发完善，客户的需求越来越多，终于在此次开发中需要用到微信的获取二维码功能！业务需求开发一个线上购物平台（类似美团），但是在每家店铺都有自己的二维码，扫该二维码直接进入店铺的商品购买页面。常规需求:常规的是扫小程序二维码—...

2018-05-17 15:41:08 15089 2