斌道天下-CSDN博客

原创小程序Page里的函数比app.js先执行的解决办法

app.js一般里面都写的wx.login函数。页面里的onload，onshow都写的接口。等数据。app.js不先执行，onload里面的数据就会因为没有获取到app.js里的东西而报错。解决方案：写一个回调函数，onload里获取不到东西就一直获取，不执行下一步操作。直到获取到app.js的数据才继续执行。下面，我把回调函数的关键代码及示例讲解一下。回调函数代码：app....

2018-11-15 10:29:05 14756 18

官方网址：官方网址：html2canvas - Screenshots with JavaScriptuniapp具体用法1.项目根目录安装nmpnpm install --save html2canvas2.网页引入文件const html2canvas = require('html2canvas');3.把想要生成图片的DIV写个ID，4.let domId = document.querySelector("#page_info")html2canv

2022-05-29 00:00:00 788

原创 uniapp瀑布流，小程序瀑布流，非常简单适合全平台

例子一看就懂，思路在拿去写网页，写uniapp，写小程序都行CSS就是大盒子正常，里面套2个小盒子左右浮动的小盒子，然后左右俩盒子里商品也变成inline-block就行了。不用写任何JS！接口正常获取数据就行。全网最简单的！我也是找瀑布流半天没合适的，自己想出来的办法!重点是代码里那句判断v-if="index%2==0" 和v-if="index%2==1"我是用的uniapp写的，如果是写原生微信小程序瀑布流，直接把v-if="index%2==0 改成 wx-if=""&lt.

2022-02-17 23:45:05 1787 3

原创 uniapp或者小程序 onLoad 接收不到参数的处理办法

uniapp或者小程序 onLoad 接收不到参数的处理办法onLoad(options) {console.log('options',options);}这么打印options，显示是undefined 或者是空。接不到上个界面或者扫二维码进来的参数。可以用onLoad(options) {var pages = getCurrentPages();var page = pages[pages.length - 1];const opt= decodeU.

2021-11-23 16:43:31 7931 2

原创小程序请求接口封装

1.新建一个req.js 储存封装2.页面调用req.js封装我判断的code==2时候跳转到登录界面。code==1弹出错误信息code==0 时候接口正常走。记得 resolve(res); 重要！ req.js 文件const GET = 'GET';const POST = 'POST';const PUT = 'PUT';const FORM = 'FORM';const DELETE = 'DELETE';const baseURL = 'ht...

2021-11-23 16:37:07 580

原创强制微信网页字体大小为100%

if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {handleFontSize();} else {if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);} else if (document.a..

2021-05-27 11:43:57 217

原创判断是否是微信端打开的网页

var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ alert('是微信打开的') }else{ alert('不微信打开的') }...

2021-05-13 16:58:27 498

原创 github下载加速三种方法

第一种方法：在github.com后面加.cnpmjs.org例如我现在要用git下载gorm项目https://github.com/go-gorm/gorm想要加速则使用指令git clone https://github.com.cnpmjs.org/go-gorm/gorm第二种方法：直接换域名hub.fastgit.org例如https://github.com/go-gorm/gorm换成 https://hub.fastgit.org/go-gorm...

2021-05-06 16:06:33 1838

原创 bindGetUserInfo不弹窗了

<button open-type="getUserInfo"/>授权弹窗不弹了，没办法通过这个获取用户头像和姓名地址等信息了，用户信息换了新的接口getUserProfile腾讯公告https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801...

2021-04-12 15:01:48 1422

原创 JavaScript判断设备是手机端还是PC端，并加载不同的css/js文件

var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; ...

2021-01-14 10:11:42 749 2

原创 ajax接口调用

$.ajax({ type: "POST", url: '你的接口地址', dataType: "json", data: JSON.stringify('你要提交的数据'), success: function(data){ console.log('打印',data) if(data.err == 0){ alert('提交成功！'); }else{ aler...

2019-09-04 10:52:30 1286

原创 JS获取url链接里的参数

function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i]....

2019-07-26 14:32:34 964

原创小程序多图转base64上传

小程序的多图上传我之前的文章写过。原理是直接用 wx.chooseImage 1.选择图片，2.微信把图片变成本地图，3.你拿这个本地路径给接口，接口给你张网络图路径。最近遇见一个需求是为了省服务器空间和带宽，需要把本地图转成base64再传给接口（下图是接口文档）。网上找了很多多图转base64,都是废话。所以自己写一个。老规矩，拿来可以直接用。效果图：代码：...

2019-03-16 11:52:01 652

原创 js手机和电脑打开不同的网站

首先，记得要引一个JS，不然下面js不生效然后替换掉里面的链接就行了手机端把这段代码写到《hader》标签里面<script> if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAge...

2018-12-20 10:59:39 531

原创小程序到达顶部自动贴合

实现效果：某个view开始是正常的一个view，滚动到顶部以后加一个position: fixed; 属性。效果：（不会传动图，将就着看把，，哈哈哈哈）页面上滚，NAV贴合到顶部，滚回来以后取消贴合。 wxml：<view class='fixed-position'></view><view class="slider">...

2018-12-14 11:47:31 870

原创小程序点击返回顶部的2种方法

1.适用场景：页面没有使用scroll-view 组件（这个方法让我找了好久）wxml：（图片自己找把，我就不给了）<image src='{{img_url}}mp/[email protected]' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>wxss：.goT...

2018-12-14 11:01:14 2558 2

原创小程序 canvas生成分享海报

成品效果图：将二维码和图片拼合到一张图上。各位可以扫下面小程序码体验一下。位置在小程序首页-右上角-生成海报。我做了图片切换。 <block wx:if="{{urls}} ===../../../images/qrbg.png"><image src='{{qrcode}}' cl...

2018-11-28 15:31:48 907

原创 VUE全网最详细安装教程

1.安装node.jsnode.js安装教程：网址：https://www.runoob.com/nodejs/nodejs-install-setup.html总结一下，教程里是让你去https://nodejs.org/en/download/ 下载安装一个node.js ，如下图，下载红圈这个（我是64位，32的自己看）。。下载完了以后安装就行了（可以一路点确定，安装到C盘，也可以...

2018-10-15 12:26:51 350

原创小程序wx.request封装

小程序官方接口示例：wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { consol...

2018-09-05 16:10:58 1913 2

原创小程序密码输入框

小程序密码输入框。初始状态为input不能点击。点击input以后弹出键盘。输入框全部输入以后可以点击提交。具体代码：<view class="Toptitle">请设置支付密码并妥善保管</view><form bindsubmit="formSubmit"> <view class='content'> ...

2018-08-17 10:11:06 9651 3

原创 JQ实现TAB切换

<div id="outer"> <ul id="tab" class=""> <li class="ck">标题1</li> <li>标题2</li>

2018-08-08 10:48:32 1077

原创 CSS多行文本溢出隐藏，显示省略号

单行文本溢出隐藏：overflow: hidden;单行文本溢出隐藏显示省略号：white-space: nowrap;overflow: hidden;text-overflow: ellipsis;多行文本溢出隐藏显示省略号：text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow...

2018-08-07 16:40:43 50710 4

原创小程序滑动切换页面

点击切换和滑动切换，只适用于上面导航个数固定的情况。比如2个，4个。如果导航个数不是死的，是接口出的，不知道有多少个。那请看我之前发的这个帖子 -----> 仿今日头条滑动切换 <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data...

2018-08-07 16:34:04 4535 2

转载小程序点击倒计时

var interval = null //倒计时函数Page({ data: { date:'请选择日期', fun_id:2, time: '获取验证码', //倒计时 currentTime:61 }, getCode: function (options){ var that = this; var currentTime...

2018-08-07 15:12:00 1229

原创点击复制input内容

function copyToClipboard() { var Url2 = document.getElementById("tuijianlianjie"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 layer.msg("已复制好，可贴...

2018-08-06 09:22:37 2787

原创获取进网站的人的IP地址

<?php$ip = $_SERVER["REMOTE_ADDR"];file_put_contents('ip.txt',$ip, FILE_APPEND);header('Location: http://www.baidu.com/');PHP获取打开这个网址的IP，然后生成一个txt文件。第三句是打开PHP文件以后跳转到的网站。手机丢了可以用这个方法追踪。或者...

2018-08-02 14:57:41 1642 2

原创 JS验证码倒计时

js验证码倒计时手机端的。点击以后开始倒计时。很简单的东西。HTML<div class="register_box"> <div class="register"> <input id="tel" type="tel" placeholder="请输入您的手机号" /> &lt

2018-07-31 11:22:50 830 2

原创 swiper轮播图

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"><section class="swiper-container"> <div class="swiper-wra

2018-07-31 11:00:07 500

原创百度地图显示当前位置及位置信息

网页中一般都有关于我们这个模块，关于我们中调用百度地图API做的公司地址及信息展示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type=&qu

2018-07-31 10:52:13 10050

原创手机端自适应页面通用CSS及公用HTML写法

把页面的通用属性全部写出来。所有的手机端新建项目时候都可以直接拿这套代码快速搭建一个手机端框架。js中规定了页面最大宽度。为16rem。所以width：16rem；就等于width：100%；我一般喜欢把边距设置为0.5rem。所以页面一般宽度我写了15rem。rem写法好处是，自适应手机屏，手机屏不管是大小，都完美显示，不会错位。相比用百分比写法，rem写法计算相对简单。...

2018-07-21 13:09:41 15283

原创小程序仿今日头条带滑动切换的文章列表

拿别人仿今日头条的代码做的改版，首先感谢前辈。其次，这个代码虽然能用，但是js里还是存在一些BUG。希望后辈再做改版。wxml：<view class="container"> <scroll-view class="navbar" scroll-x="true" scroll-left="{{scrollNavbarLe.

2018-07-19 09:41:23 3437 2

原创小程序多图上传

小程序多图上传效果图WXML部分:upimg.png是一张+号图。x.png 是图片删除按钮。<view class='imgsbox'><view class="weui-uploader" style='display:{{none}}'> <view class="img-v"> <

2018-07-19 09:25:08 728

斌记-关于WEB前端、小程序、UI设计的笔记