ALe总结的微信小程序前端可用到的知识点及内容（有写的有转载的）

彩英镇帖🌹

一、 取点击的下标  进行页面传值   并在B页面取值
A————————      

data-index="{{index}}" wx:for-index="index"

​
Reply:function (e) {
    var that=this
    var userInfo=that.data.userInfo
    var index =e.currentTarget.dataset.index
    console.log(userInfo[index].id+'传的id')
    var id =userInfo[index].id
    console.log(id)
    wx.navigateTo({
      url: `/pages/Reply/Reply?id=${id}`,
    })
  },

​

B————————

  onLoad: function (options) {
    var id = options.id;
     console.log(id)
     this.setData({
      options: options,
    })
    this.__loadData()
  },
  __loadData:function() {
    var that = this
    var options = that.data.options;
    console.log(options)
    http.post('feedback/list',{
       id:options.id,
    }).then(res => {
        this.setData({
          userInfo:res.data
        })
     })
  },

​

二、es6 页面传参

​
url: `page/b/b?user=${user}&password=${password}`

​

三、图片左右摇摆

animation - CSS（层叠样式表） | MDN

四、青蛙弹性布局

微信小程序开发——Flex弹性布局_番薯大佬的专栏-CSDN博客

五、自定义微信小程序弹出框带图片

微信小程序带图片弹窗简单实现 - 知乎

六、前端做输入车牌号组件

https://blog.csdn.net/qq_39816586/article/details/85013337?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control&dist_request_id=1619590985311_83269&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control

七、小程序scroll-view点击项自动居中

小程序scroll-view点击项自动居中_Globalizationa的博客-CSDN博客

八、overflow（超出部分省略号）

overflow（超出部分省略号）_weixin_34332905的博客-CSDN博客

九、微信小程序实现文字在图片的正中间定位！！！！

微信小程序实现文字在图片的正中间（试用各个机型）_滕益宏的博客-CSDN博客_微信小程序图片上显示文字

十、Button按钮点击后出现边框

​
button{
outline:none;
}

​

十一、遮罩层

​
<view  wx:if="{{show==1}}" style=" height: 100%;width: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.5);z-index: 3;top: 0;left: 0;"></view>

十二、对接商家券所用
 
wxml

​
<view wx:if="{{show==1}}" style="width: 75%;margin: 25% auto 40rpx;border-radius: 20rpx;background: #fff;padding: 40rpx;box-sizing: border-box;height: 300rpx;position: fixed;top: 384rpx;left: 94rpx;z-index: 4;">
    <send-coupon
                bind:sendcoupon="getcoupon"
                send_coupon_params="{{send_coupon_params}}"
                sign="{{sign}}"
                send_coupon_merchant="{{send_coupon_merchant}}"
                >
                <!-- 内部为自定义代码，按钮点击部分的代码写在这里 -->
                <!-- [[以下为示例代码 -->
                <view class="confirmContent">兑换以微信卡券为准</view>
                <view style="border-bottom: solid;margin: 40rpx 0 0 0;color: #dbddde;"></view>
                <view class="confirmBtn">领 取</view>
                <!-- 以上为示例代码 ]] -->
     </send-coupon>
</view>

​

css

.confirmBtn {
  margin: 40rpx 0 0 0;
  padding: 0 0 0 210rpx;
  border: solid #15b8fb;
  color: #15b8fb;
  border-radius: 30rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  font-weight: 600;
  z-index: 4;
}

.confirmContent {
  padding: 0 0 0 64rpx;
  color: #15b8fb;
  font-size: 40rpx;
  font-weight: 600;
}

js

  getcoupon: function(params) {
    var that=this
    console.log('getcoupon', params)
    console.log('detail', params.detail)
    if(params.detail.send_coupon_result[0].code == 'SUCCESS'){  
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '领取成功',
        success:function name(params) {
          that.setData({
            show: '0'
          })
        },
    })
   }else if(params.detail.send_coupon_result[0].code == 'MAXQUOTA'){  
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: params.detail.send_coupon_result[0].message,
        success:function name(params) {
          that.setData({
            show: '0'
          })
        },
    })
  }  else{
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '领取失败',
        success:function name(params) {
          that.setData({
            show: '0'
          })
        },
      })
  }
  }

十三、卡券样式

A ——————————（html）

<div style="width: 100%; text-align: center;line-height: 300px;font-size: 50px; margin:200px 0 0 0;color:#ccc;"> —— ——  暂无卡券  —— ——	</div>
		<div style="display: flex;align-items:center;justify-content: center;width:100%" >
		     <div class="bg" >
				 <!-- 券图 -->
				 <span>
				 <svg t="1623054700891" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2493" width="128" height="128">
			         <path d="M600.023 359.456c21.962-21.962 41.344-44.594 58.17-67.848l31.020 19.382c-20.696 25.859-40.078 49.136-58.169 69.784h96.932v31.020h-209.375c-7.743 19.382-16.156 36.828-25.188 52.337h259.776v32.956h-133.784c34.891 34.891 81.422 58.169 139.592 69.784-5.187 6.502-11.638 16.156-19.382 29.085-1.314 3.871-2.605 6.502-3.871 7.743-28.44-9.008-53.652-20.027-75.614-32.956-1.315 16.825-4.567 48.466-9.703 94.996-2.605 45.215-32.956 67.178-91.125 65.912-23.277 0-43.304 0-60.081 0-2.605-12.929-5.808-25.883-9.703-38.763 11.638 1.266 34.221 1.935 67.823 1.935 37.473 1.266 56.234-9.703 56.234-32.956 0-5.137 0.621-13.574 1.935-25.214 2.58-21.962 3.871-36.828 3.871-44.594h-139.567c-5.187 76.285-57.524 126.662-157.037 151.23-1.315-1.315-2.605-3.871-3.871-7.743-6.477-9.058-12.308-17.446-17.446-25.214 91.746-19.382 138.922-58.79 141.527-118.274h-65.912v-17.446c-18.116 11.638-38.763 23.277-62.040 34.891-11.638-15.511-20.051-26.479-25.214-32.956 55.563-23.277 99.514-49.733 131.824-79.487h-124.080v-32.956h153.165c11.638-15.511 21.317-32.956 29.085-52.337h-162.844v-31.020h174.482c11.638-37.473 18.712-71.074 21.317-100.804l36.828 1.935c-3.871 29.754-10.993 62.71-21.317 98.868h98.868l-27.125-21.292zM357.693 312.925l27.149-21.317c5.162 5.187 12.259 12.308 21.317 21.317 16.776 15.511 29.706 28.44 38.763 38.764l-29.085 25.214c-9.058-10.324-21.987-24.543-38.764-42.658-9.058-9.034-15.511-16.13-19.382-21.317zM642.683 559.125c-24.568-15.511-46.531-36.183-65.912-62.040h-106.61c-25.859 29.754-49.136 50.402-69.784 62.040h242.305z" fill="#573b29" p-id="2494"></path><path d="M512 127.348c212.104 0 384.652 172.547 384.652 384.652s-172.547 384.652-384.652 384.652-384.652-172.547-384.652-384.652 172.547-384.652 384.652-384.652M512 90.125c-233 0-421.875 188.875-421.875 421.875s188.875 421.875 421.875 421.875 421.875-188.875 421.875-421.875-188.875-421.875-421.875-421.875v0z" fill="#573b29" p-id="2495"></path>
				 </svg>
				 </span>
				 <div id="text">
				 	<div style=" font-weight: 600; font-size:38px;color:#573b29;line-height: 100px;">御玺 法儿体验券</div>
				 	 <div style=" font-size:26px;color:#573b29;line-height: 40px;">有效期至2021-05-27</div> 
				 </div>
		        <!-- 按钮 -->
		          <span style="line-height: 238px;position: absolute;right: 85px;z-index: 1;" >
					<button class="button">立即领取</button> 
			      </span>

		     </div>
		</div>

B ——————————（wxml）

<view wx:if="{{message != 'success'}}" style="display: flex;align-items: ：dcenter;justify-content: center;width:100%;  position: relative;color:#ccc">—— ——  暂无卡券  —— ——</view>
<view wx:if="{{message =='success'}}" style="display: flex;align-items: ：dcenter;justify-content: center;width:100%;  position: relative;" wx:for="{{userInfo}}" wx:key="index"  wx:index="index">
     <view class="bg{{index%3}}" >
           <span style=" line-height: 170rpx;position: absolute;left: 120rpx; font-weight: 600; font-size: 32rpx;color:#fff;">{{item.title}}</span> 
           <span style=" line-height: 260rpx;position: absolute;right: 136rpx; color:#fff;font-size: 28rpx;z-index: 1;" data-index="{{index}}" bindtap="ling">领取</span>
           <view style=" line-height: 380rpx;position: absolute;left: 120rpx;font-size: 22rpx;color: #000;">兑换时间：{{item.date_info_begin_timestamp}} — {{item.date_info_end_timestamp}}<span style="width: 584rpx; background-color: #ffd7; height: 60rpx; position: absolute; bottom: 160rpx; left: -36rpx; opacity: 0.4; border-bottom-right-radius: 24rpx; border-bottom-left-radius: 24rpx;"></span></view>
     </view>
     <!-- 图三 -->
 <image src="/lingquan1.png" style="width: 80rpx;height: 80rpx;position: relative; right: 120rpx;top: 68rpx;"></image>
</view>

十四、微信小程序弹出框 带input

<!-- input -->
<view wx:if="{{show == 1}}" style="width: 70%;height: 316rpx;background-color: #fff;z-index: 2;border-radius: 20rpx;position: fixed;top: 460rpx;left: 116rpx;">
<view style="text-align: center;margin: 44rpx 0 0 0;font-size: 32rpx;color: #0076ff;font-weight: 600;font-weight: 600;">请输入充值金额</view>
<view style=" margin: 28rpx 0 0 36rpx;height: 68rpx;border: #ccc solid 1rpx;border-radius: 20rpx;text-align: center;width: 85%;color: #0076ff;font-weight: 600;"><input focus='true' type="number" confirm-type="done" value="{{money}}" bindinput="num"  style=" margin: 10rpx 0 0 0;"/></view>      
<view style="text-align: center;margin: 40rpx 0 0 0;font-size: 32rpx;color: #0076ff;font-weight: 600;line-height: 88rpx;border-top: solid #ccc 1rpx;"><span style=" width: 260rpx;border-right: #ccc solid 1rpx;display: inline-block;"bindtap="cancel" >取消</span> <span bindtap="determine" style=" display: inline-block;width: 256rpx;">确定</span></view>
</view>
<!-- 遮罩层 -->
<view  wx:if="{{show == 1}}" style=" height: 100%;width: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.5);top: 0;left: 0;"></view>

十五、微信小程序下方弹出选项卡

<!-- 遮罩层 -->
<view  wx:if="{{show == 1}}" style=" height: 100%;width: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.5);top: 0;left: 0;"></view>
<!-- 下方弹出 -->
<view wx:if="{{ show== 1}}" style="text-align: center;position: absolute;width: 100%;bottom: 0px;border-radius: 15px;background-color: #e8e8e8;">
 <view style="line-height: 110rpx; font-size: 24rpx; color: #8a8888;border-bottom: solid #ccc 1rpx;" >选择充值金额</view>
<view style="color:#0076ff;line-height: 110rpx;border-bottom: solid #ccc 1rpx;"bindtap="Amount" >{{99}}元</view>
<view style="color:#0076ff;line-height: 110rpx;border-bottom: solid #ccc 1rpx;"bindtap="Amount" >{{10}}元</view>
<view style="color:#0076ff;line-height: 110rpx;border-bottom: solid #ccc 1rpx;" bindtap="input">其他金额</view>
<view style="color:#0076ff;line-height: 110rpx;"bindtap="quxiao" >取消</view>
</view>

十六、截屏保存到手机

1.js

getQrImg: function getQrImg() {
      setTimeout(()=> {
        var that = this;
        var context = uni.createCanvasContext('myQr',that);
        var url='../../static/scheduled/businessCardbg1.png'
        var src=that.my.qrCodeUrl
        // var src='../../static/uni.png'
        context.drawImage(url,8,0,275 ,475 )
        context.setFillStyle("#fff")
        context.setFontSize(20)
        context.fillText(that.my.user_name,40,290,65,65)
        context.setFontSize(14)
        context.fillText(that.my.role,40,315,65,65)
        context.setFontSize(13)
        context.fillText('手机号：'+that.my.user_telephone,40,350,100,110)
        context.drawImage(src,190, 280,65,65 )
        context.draw(false,function(){ 
          uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          canvasId: 'myQr', 
          fileType: 'png',
          success: function success(res) {
            console.log(res.tempFilePath,"画完了");
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function success() {
                uni.showToast({
                  icon: 'success',
                  position: 'bottom',
                  title: "图片已保存", // res.tempFilePath
                })
                console.log('save success');
              },
              fail:function () {
                 uni.showToast({
                   icon: 'none',
                   position: 'bottom',
                   title: "保存失败，可截图保存", // res.tempFilePath
                });
            } });
  
            //  uni.saveFile({
            // tempFilePath:  res.tempFilePath,
            // success: function (res) {
            //  console.log('保存')
            //  var savedFilePath = res.savedFilePath;
            //  console.log(savedFilePath)
            // }
            //  });
  
          } },that)})
       ;
     }, 100);
   
    }

2.wxml

<gui-page vue-id="74019242-1" customHeader="{{true}}"
  headerStyle="background:url('https://cdn.kelimx.com/schedule/dist/images/bgimg.png') no-repeat;background-size: 100% auto;border-radius:0 0 20rpx 20rpx"
  isHeaderSized="{{true}}" statusBarStyle="background-color:rgba(255,255,255,0)" bind:__l="__l"
  vue-slots="{{['gHeader','gBody']}}">
  <view slot="gHeader">
    <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
      <gui-header-leading vue-id="{{('74019242-2')+','+('74019242-1')}}" onlyBack="{{true}}"
        buttonStyle="color:#FFFFFF;" bind:__l="__l"></gui-header-leading><text
        class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-color-white"></text>
    </view>
  </view>
  <view slot="gBody">
    <view class="container"><canvas canvas-id="myQr" class="canvass"></canvas>
        <view class="qr">
        <view ><image class="canvas" src="../../static/scheduled/businessCardbg.png" mode="widthFix"></image></view>
          <view class="content">
            <view class="info">
              <view class="name">{{my.user_name}}</view>
              <view class="job">{{my.role}}</view>
              <view class="tel"><text class="icon-phone"></text>{{''+my.user_telephone}}</view>
            </view>
            <view class="qrImg">
              <image src="{{my.qrCodeUrl}}" mode="widthFix"></image>
            </view>
          </view>
        </view>
      
      <view data-event-opts="{{[['tap',[['getQrImg',['$event']]]]]}}" class="save" bindtap="__e">
        <image src="../../static/scheduled/4-2save.png" mode="widthFix"></image><text>保存</text>
      </view>
    </view>
  </view>
</gui-page>

十七、操纵字符串  （转数组 操作 在转成字符串）

    // 定义this
    var that = this;
    // 起个名字（data）定义需要操作的内容
    var data=that.data.territory+that.data.plateNo
    // 取个新名字（newdata），并转成数组
    var newdata = data.split('')
    // 在第二位之后添加"-"符号
    newdata.splice(2,0,'-')
    // 取个新名字（plate_no），并转回字符串
    var plate_no =newdata.join('');
    // 打印看看
    console.log(plate_no)
    // plate_no  就是最后成功的内容
    

十八、小程序上传图片并取到图片地址

handleChooseAlbum(){
  var that=this
  //系统API，让用户在相册中选择图片
  wx.chooseImage({
    success : (res) => {
      //1、取出路径
      const path = res.tempFilePaths[0]
      wx.uploadFile({
        filePath: path,
        name: 'file',
        url: 'https://dtxs.kelimx.cn/api/upload',
        formData:{
          'user':'test'
        },
      	success(res){
          const data= JSON.parse(res.data);
          console.log(data.data.image)
          var image=data.data.image
          that.setData({
            image :image,
//image就是最后要给后台传递的链接地址
            })
            console.log(image)
        }
      })
      //2、设置imagePath
      this.setData({
      imagePath : path
      })
    }
  })
},

十九、拉起微信支付

    success(response) {
      console.log(response.data.data.appId),
      console.log(response.data.data.timeStamp),
      console.log(response.data.data.nonceStr),
      console.log(response.data.data.package),
      console.log(response.data.data.paySign),
      wx.requestPayment({
        appId:response.data.data.appId,
        timeStamp: response.data.data.timeStamp,
        nonceStr: response.data.data.nonceStr,
        package: response.data.data.package,
        signType:'MD5',
        paySign: response.data.data.paySign,
        success(){
          wx.navigateTo({
            url: '/we7/pages/success/success',
          })
        },
        fail(){
          wx.navigateTo({
            url: '/we7/pages/failure/failure',
          })
        }
      })
    }

二十、CSS3奇思妙想
   https://chokcoco.github.io/magicCss/html/index.html

二十一、富文本问题

注：引用文件注意路径 该方法文件与page为一级

WXML

<import src="../../../wxParse/wxParse.wxml" />


<template is="wxParse" style="font-size: 13px;font-weight: 600;margin: 0 0 12rpx 0;" data="{{wxParseData:article.nodes}}" />

JS

const WxParse = require('../../../wxParse/wxParse.js');


  onLoad: function(){
    var that = this;
    app.util.request({
      url: 'entry/wxapp/Explain',
      datatype: JSON,
      data: {
        m: 'keli_parking'
      },
      method: 'post',
      success: function(response) {  
        that.setData({
          text:response.data.data.explain
        })
        WxParse.wxParse('article', 'html', that.data.text, that, 5);
        console.log(response.data.data.explain)
      }
    });
  }

二十二、可以直接用的table样式

<head>
    <title></title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>
</head>
<body>
    <table width="90%" class="table">
        <caption>
            <h2>李青技能释放次数</h2>
        </caption>
        <thead>
            <tr>
                <th>
                    天音波/回音击
                </th>
                <th>
                    金钟罩/铁布衫
                </th>
                <th>
                    天雷破/摧筋断骨
                </th>
                <th>
                    猛龙摆尾
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                52
            </td>
            <td>
                67
            </td>
            <td>
                38
            </td>
            <td>
                13
            </td>
        </tr>
    </table>
</body>
</html>

二十三、js获取url参数值的两种方式

（一个）

var test =window.location.href;
var 传的值=test.split("?传的值=")[1];

​

（多个）

方式一：

 function GetQueryString(name) { 
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
      var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
      var context = ""; 
      if (r != null) 
         context = r[2]; 
      reg = null; 
      r = null; 
      return context == null || context == "" || context == "undefined" ? "" : context; 
    }
// 调用方法:

 var 参数1 = GetQueryString['参数1'];
	var 参数2 = GetQueryString['参数2'];
	var 参数3 = GetQueryString['参数3'];

方式二：

function GetRequest() {
		var url = location.search; //获取url中"?"符后的字串
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for(var i = 0; i < strs.length; i ++) {
				theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
			}
		}
		return theRequest;
	}
//调用方法
var Request = new Object();
	Request = GetRequest();
	var 参数1,参数2,参数3,参数N;
	参数1 = Request['参数1'];
	参数2 = Request['参数2'];
	参数3 = Request['参数3'];
	参数N = Request['参数N'];

二十四、多个三木 

​
return item.is_top_up==1?'充值':(item.is_top_up==2? '缴费':'退押金')



 if (item.is_top_up==1){
                            return  '充值';
                        } else if (item.is_top_up==2){
                            return  '缴费';
                        }  else {
                            return  '退押金';
                        }

​

二十五、微信小程序 （radio）

html

<label class="radio" catchtap='checkedTap'>
	<radio checked="{{checked}}" />
</label>

js

Page({
	checkedTap: function () {
		var checked = this.data.checked;
		this.setData({
		  "checked": !checked
		})
	}
})

按钮大小

transform:scale(0.7);

二十六、跳转到别的小程序

//ji里写 
 tiao:function () {
    wx.navigateToMiniProgram({
      appId: 'APPID',
      path: 'pages/index/index',
      extraData: {
        foo: 'bar'
      },
      envVersion: 'release',
      success(res) {
        // 打开成功
      }
    })
  },

//json里写

    "navigateToMiniProgramAppIdList": [
      "APPID"
    ]

二十七、操作网页（复制想要的文字）

document.body.contentEditable=true
 

二十八、微信小程序-文字循环滚动效果

wxml

<swiper class="swiper_container" style="text-align: center; position: relative; bottom: 582rpx; margin:0  auto;" vertical="true" autoplay="true" circular="true" interval="2000">
<block wx:for="{{msgList}}">
<swiper-item>
<view class="swiper_item" style="color: #fff;" >{{item.title}}</view>
</swiper-item>
</block>
</swiper>

css

.swiper_container {
  height: 50rpx;
  width: 50%;
  }
  .swiper_item {
  font-size: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

js

  onShow: function (e) {
    this.setData({
      msgList: [
        { title: "你好啊" },
        { title: "来试试吧？" },
        {title: "看看这个" },
        { title: "效果怎样" }
      ]
    });
  },

二十九丶完美的倒计时

html

<view class='countDown'>倒计时：<text style='color:red'>{{countDownNum}}</text>s</view>

js

countDown: function () {
    let that = this;
    let countDownNum = that.data.countDownNum;//获取倒计时初始值
    //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
      that.data.timer = setInterval(function () {//这里把setInterval赋值给变量名为timer的变量
        //在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
        if (countDownNum == 0) {
          wx.showToast({
            title: 'aaa',
          })
          clearInterval(that.data.timer);
          //这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
          //因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
          // clearInterval(that.data.timer);
          //关闭定时器之后，可作其他处理codes go here
        }else{
        //每隔一秒countDownNum就减一，实现同步
        countDownNum--;
        //然后把countDownNum存进data，好让用户知道时间在倒计着
        that.setData({
          countDownNum: countDownNum
        })}
      }, 1000)
  },

uni app 

<view class='countDown'>二维码刷新倒计时：<text style='color:red'>{{countDownNum}}</text>s</view>

data() {
			return {
				countDownNum:60,
				countDownNums:61
			}
		},

onLoad(options) {
			let that = this;
			let countDownNum = that.countDownNum;
			  that.timer = setInterval(function () {
				console.log('👴的定时器开始了')
			    if (countDownNum == 0) {
				uni.showToast({
					title: '加载中……',
					icon: 'loading',
					duration: 500 
				})
				countDownNum = that.countDownNums
			    }else{
			    countDownNum--;
			    that.countDownNum=countDownNum
				}
			  }, 1000) 
		},
		onUnload() {
			if(this.timer) {
			console.log('👴要取消定时器')
			clearTimeout(this.timer);  
			this.timer = null;
			} 
		},

三十丶图片压缩的网站

在线压缩图片,在线无损压缩图片-BeJSON.com

三十一丶进入小程序就自动播放音频

onShow:function(){
	const innerAudioContext = wx.createInnerAudioContext();
    innerAudioContext.autoplay = true;
    innerAudioContext.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46"  //音频路径
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    });
    innerAudioContext.onError(res => {
      console.log(rees.errCode)
      console.log(res.errMsg)
    });
}

三十二丶图片保存到手机

  generate: function() {
    var that = this;
    console.log('点了')
    //将图片保存到相册      
    wx.getSetting({
      success(res) {
          if (res.authSetting['scope.writePhotosAlbum']) {
            that.saveImg();
          } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
              wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success() {
                    that.saveImg();
                  },
                  fail(){
                      wx.showToast({
                          title: '您没有授权，无法保存到相册',
                          icon: 'none'
                      })
                  }
              })
          }else {
              wx.openSetting({
                  success(res) {
                      if (res.authSetting['scope.writePhotosAlbum']) {
                        that.saveImg();
                      }else{
                          wx.showToast({
                              title:'您没有授权，无法保存到相册',
                              icon:'none'
                          })
                          that.setData({ isSaving: false });                                
                      }
                  }
              })
          }
      }
  })    

  },
  saveImg:function name(params) {
    wx.saveImageToPhotosAlbum({
      filePath: "/we7/pages/imgs/蓝日梦H5慵懒.png",
      success(res) {
        wx.showModal({
          title: '保存成功',
          content: '图片成功保存到相册了，快去分享朋友圈吧',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#818FFB',
          success: function (res) {
            if (res.confirm) {
              that.setData({
                showPosterImage: true
              })
            }
            that.hideShareImg()
          }
        })
      }, fail() {

      }
    })
  },

三十三丶弹个二维码出来（uni）

html————————

<div v-if="show" style="width:70%;background-color: #fff;z-index: 102;border-radius: 20rpx;position: fixed;top: 380rpx;left: 116rpx;">
				<div>
					<image :src="url" style=" width: 100%;"></image>
				</div>
				<div style="text-align: center;font-size: 32rpx;color: #39b54a;font-weight: 600;line-height: 88rpx;border-top: solid #c1dabe 2rpx;">
					<span style=" width: 260rpx;border-right: #c1dabe solid 2rpx;display: inline-block;"@click="cancel">取消</span>
					 <span @click="cancel" style="display: inline-block;width: 256rpx;">确定</span>
				</div>
			</div>
			<!-- 遮罩层 -->
			<div v-if="show" style="z-index: 101; height: 100%;width: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.5);top: 0;left: 0;"></div>

js——————————

	export default {

		data() {
			return {
				url:'http://cdn.kelimx.com/imixpark/bg2.png',
				show:false,
			}
		},

		onLoad(option) {

		},

		methods: {

			look(){
				var that=this
				that.show=true
			},
			cancel(){
				var that=this
				that.show=false
			}

		},
	}

三十四丶二十个杀手级js单行代码（转载）

20 个杀手级 JavaScript 单行代码_短暂又灿烂的的博客-CSDN博客

三十五丶设置清除定时器（刷新缴费信息）

		data() {
			return {
				renew: true,
				timer: null,
				timerList: [],
			}
		},
       onShow() {
			var that = this
			that.intervalStart()
		},
		methods: {
			intervalStart() {
				var that=this
				that.Refresh();
				that.timer = setInterval(function() {
					console.log("开始了")
					that.renew = false
				}, 10000);
				that.timerList.push(that.timer)
			},
			Refresh() {
				var that = this
				that.getVehicleCharge()// 用于刷新按钮以及缴费信息
				if (that.timer) {
					console.log("结束了");
					that.timerList.forEach((item, index) => {
						clearInterval(item);
					})
					that.timerList = [];
					that.timer = 0;
					that.intervalStart()
				}
			},
	        getVehicleCharge() {
				this.renew = true
                 }，
}

三十六丶js实现九宫格抽奖

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 实现九宫格抽奖</title>
<style>
    body{
        background-color: #2c9afc;
    }
    #container {
        width: 330px;
        height: 340px;
        margin: 10% auto;
        border: 7px solid #99d4ff;
        border-radius: 10px;
        padding: 2%;
    }
    #list {
        width: 330px;
        height: 340px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #list li,
    #list span {
        width: 100px;
        height: 100px;
        float: left;
        text-align: center;
        line-height: 100px;
        position: relative;
        background-color: #384f9a;
        margin: 1.4%;
        border-radius: 5px;
    }
    #list li img{
        display: block;
        width: 100%;
        height: 100%;
    }
    #list li .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0;
        background: url(https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b) no-repeat;
        background-size: cover;
        display: none;
    }
    #list span:hover {
        cursor: pointer;
        color: orange;
        font-size: 18px;
    }
    #list .active .mask{
        display: block;
    }
    #message {
        line-height: 32px;
        color: #9a9a9a;
        text-align: center;
        position:absolute;
        left: 50%;
        top: 50px;
        width: 300px;
        height: 50px;
        margin-left: -150px;
        display: none;
        background: #000;
        color: #fff;
    }
</style>
</head>
<body>            
    <h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 实现九宫格抽奖</h3>
    <div id="container">
        <ul id="list">
            <!-- img标签放奖品图片 -->
            <!-- mask类为抽奖滚动起来的标记 -->
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">开始抽奖</span>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
            <li><img src="https://pic4.zhimg.com/v2-f3d028b9436083ec03fda24993fe7fe3_1440w.jpg?source=172ae18b"/><div class="mask"></div></li>
        </ul>
        <div id="message"></div><!-- 获奖信息展示 -->
    </div>
</body>

<script type="text/javascript">

    var container = document.getElementById('container'),
        li = container.getElementsByTagName('li'),
        span = document.getElementById('startbutton'),
        message = document.getElementById('message'),
        timer = null;
        bReady = true;//定义一个抽奖开关

    var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序

    var num = 0;//num用来存放得到的随机函数，也就是抽中的奖品

    //开始抽奖
    function startlottery(){
        if(bReady) {//当抽奖开关为true的时候，可点击抽奖
            message.style.display="none";//将获奖信息div隐藏（以防止上次抽奖信息还显示）
            span.style.background="#ada7a8";
            bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖
            num = getrandomnum(1,9)//得到一个随机数（即奖品）
            // console.log(num)
            startinit(num);//执行抽奖初始化
        }
    }


    //抽中的奖品 返回1-9的整数，包含1，不包含9
    function getrandomnum(n, m) {
        return parseInt((m - n) * Math.random() + n);
    }


    //抽奖初始化
    function startinit(num) {
        var i = 0;  //定义一个i 用来计算抽奖跑动的总次数
        var t =100;  //抽奖跑动的速度 初始为200毫秒
        var rounds = 3;  //抽奖转动的圈数
        var rNum = rounds*8;  //标记跑动的次数（这是一个条件判断分界线）
        timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数


        //抽奖滚动的函数
        function startscroll() {

            //每次滚动抽奖将所有li的class都设为空
            for(var j = 0; j < li.length; j++) {
                li[j].className = '';
            }

            var prizenum = prize[i%li.length];  //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
            li[prizenum].className = "active";
            i++;

            if(i<rNum-8){  //当i小于转(rNum-8次)的数量，t不变还是200毫秒
                timer = setTimeout(startscroll, t);//继续执行抽奖滚动
            }else if(i>= rNum-8 && i< rNum+num){
                //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低
                t+=(i-rNum+8)*5;
                timer = setTimeout(startscroll, t);//继续执行抽奖滚动
            }
            if( i >= rNum+num){//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息

                if (num==1) {
                   message.innerHTML="恭喜你中了耳机";
                }else if(num==2){
                   message.innerHTML="恭喜你中了iPad";
                }else if(num==3){
                   message.innerHTML="感谢参与";
                }else if(num==4){
                   message.innerHTML="恭喜你中了洋娃娃";
                }else if(num==5){
                   message.innerHTML="恭喜你中了红色鞋子";
                }else if(num==6){
                   message.innerHTML="恭喜你中了白色手机";
                }else if(num==7){
                   message.innerHTML="恭喜你中了黑色手机";
                }else if(num==8){
                   message.innerHTML="恭喜你中了蓝色鞋子";
                }

                var timer2 = null;
                timer2 = setTimeout(function(){
                    message.style.display="block";//奖品展示的信息为显示状态
                    span.style.background="#ff3a59";
                    clearTimeout(timer2);
                },1000);
                bReady = true;//当计时器结束后让span标签变为抽奖状态
                clearTimeout(timer);
            }

        }
    }

</script>
</html>

三十七丶随机数
 

				var user = [Math.floor( Math.random() * 7 )]
				console.log(user)

三十八丶阴影

box-shadow: 0 0 25px 3px #e4e4e4;

三十九丶uni 分享

朋友圈//
onShareTimeline: function(res) {
		const data = this.banner
		data.find(item => {
			this.titlea = item.name;
			this.pisa = item.pic;
		})
	    return {
	      title: this.titlea, //字符串  自定义标题
	      // query: `id=${this.$yroute.query.id}`,  //页面携带参数
		  path: `/pages/home/index`,
	      imageUrl: this.pica   //图片地址
	    }
	},

好友//	
onShareAppMessage: function(res) {
		const data = this.banner
		data.find(item => {
			this.titlea = item.name
		})
		return {
			title: this.titlea,
			path: `/pages/home/index`,
		}
	},

四十丶判断活动过期时间 微信小程序

        // 这就开始玩弄当前的时间了
        var timestamp = Date.parse(new Date());
        var date = new Date(timestamp);
        //获取年份  
        var Y = date.getFullYear();
        //获取月份  
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
        //获取当日日期 
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        console.log("当前时间：" + Y + '年' + M + '月' + D + '日');
        var arr = that.data.userInfo[0].endTime
         console.log( '这关乎存亡',arr);
        var Y1 = arr.slice(0,4);
        var M1 = arr.slice(5,7);
        var D1 = arr.slice(8,10);
        console.log( '这真的关乎存亡',Y1,M1,D1);
        if (Y1<Y && M1<M && D1<D) {
          console.log('NMSL♥')
          that.setData({
            time:true
          })
        }

四十一丶禁止页面上下拖动

onload中写入：
my.setCanPullDown({undefined
canPullDown:false
})

四十二丶截数组（截掉前三个数据）

							var arr = res.result.data
							var arrs = arr.splice(0,3);
							var jia = arrs.concat(arr);
							_this.interestsresult = arr,
							_this.Legal =  jia
							console.log('这是被弄的', _this.Legal)
							console.log('这里是截完的数据', _this.interestsresult)

四十三丶 pc端弹出input提交

		function review () {
			var passworde= prompt("请输入管理密码");
			if (passworde=="123")
			    {
			    alert('好了')    
			  }else{
				alert('密码错误')
			  }
		 }

四十四丶微信小程序授权填入地址

    aaaaaaa() {
        var that=this
        wx.getSetting({
          success(res) {
            console.log("vres.authSetting['scope.address']：",res.authSetting['scope.address'])
            if (res.authSetting['scope.address']) {
              console.log("111")
              wx.chooseAddress({
                success(res) {
                  console.log(res.userName)
                  console.log(res.postalCode)
                  console.log(res.provinceName)
                  console.log(res.cityName)
                  console.log(res.countyName)
                  console.log(res.detailInfo)
                  console.log(res.nationalCode)
                  console.log(res.telNumber)
                  that.setData({
                    userName:res.userName,
                    phone:res.telNumber,
                    address:[res.provinceName+"|"+res.cityName+'|'+res.countyName],
                    region:[res.provinceName,res.cityName,res.countyName],
                    addressDetail:res.detailInfo
                  })
                }
              })
                  // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
            } else {
              if (res.authSetting['scope.address'] == false) {
                console.log("222")
                wx.openSetting({
                  success(res) {
                    console.log(res.authSetting,'👴👴👴👴👴👴👴👴👴')
                  }
                })
              } else {
                console.log("eee")
                wx.chooseAddress({
                  success(res) {
                    console.log(res.userName)
                    console.log(res.postalCode)
                    console.log(res.provinceName)
                    console.log(res.cityName)
                    console.log(res.countyName)
                    console.log(res.detailInfo)
                    console.log(res.nationalCode)
                    console.log(res.telNumber)
                  }
                })
              }
            }
          }
        })
      },

四十五丶二维码长按识别

WXML\\

<image src="二维码图片地址" bindtap="clickImg"/>



JS\\

clickImg(){
wx.previewImage({
  urls: ['二维码图片地址']
})
}

四十六丶for的点击事件

 @click="taptap(item.name)"





taptap(name) {
	          this[name](
			  )
	        },
	    Release: function () {
	        uni.navigateTo({
	            url: '/pages/Release/Release'
	        });
	    },
		workorderhall: function () {
		    uni.navigateTo({
		        url: `/pages/workorderhall/workorderhall?mobile=${this.userInfo.mobile}`
		    });
		},

四十七丶动效！

CSShake

四十八丶小程序共同栈！

       var arr =JSON.parse(JSON.stringify(this.list)) 

四十九丶for插入

var listData = this.list
			for (var i = 0; i < listData.length; i++) {
				listData[i].show = false;
			}
			console.log(listData)
			this.list = listData

五十丶小程序更新
 

			uni.getUpdateManager().onCheckForUpdate(function (res) {
			  // 请求完新版本信息的回调
			  console.log(res.hasUpdate);
			});
			
			uni.getUpdateManager().onUpdateReady(function (res) {
			  uni.showModal({
			    title: '更新提示',
			    content: '新版本已经准备好，是否重启应用？',
			    success(res) {
			      if (res.confirm) {
			        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
			        uni.getUpdateManager().applyUpdate();
			      }
			    }
			  });
			
			});
			
			uni.getUpdateManager().onUpdateFailed(function (res) {
			  // 新的版本下载失败
			});

五十一丶获取小程序屏幕宽
 

			this.WW = uni.getSystemInfoSync().windowWidth;

五十二丶H5使用3Dglb模型
 

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <meta http-equiv = "x-ua-compatible" content = "IE=edge">
        <meta name = "viewport" content= "width=device-width, initial-scale=1.0">
        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
        <title>portfolio</title>

        <style>
            .box {display:flex;height: 50vh;}
        </style>
    </head>

    <body>
        <div class = "box">
            <div style="margin: auto;width: 100%;">
                <model-viewer style="width: 100% !important;height: 50vh !important;background-color: #a9a9a9;"  camera-controls alt="Model" src="https://cdn.kelimx.com/1664377136656pg5kqs16ifp%282%29.glb">
                </model-viewer>
            </div>
        </div>
    </body> 

</html>

五十三丶H5关闭当前页
 

if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') 
            {
		        console.log('是微信浏览器');
				WeixinJSBridge.call('closeWindow');
		    } else {
				window.close()
		        console.log('不是微信浏览器');
		    }

五十四丶uniapp 分包优化

//manifest.json内
      
    "optimization":{
		"subPackages":true
		}

五十五丶异形轮播图
https://v1.github.surmon.me/vue-awesome-swiper/

五十六丶checkbox多选框传多个值

 解决方案：1、

将 value 的多条信息用JSON.stringify(item)转化为字符串传入

<checkbox :value="JSON.stringify(item)" class="round blue"
            :checked="checkedArr.includes(item)" :class="{'checked':checkedArr.includes(item)}">
 </checkbox>

2、将checked的列表获取到后，将value值用JSON.parse(item)由字符串转化对象，然后就可以获取到选择的数据了

                checked = e.detail.value;
                checked.map(function(item) {
                    this.checkedArr.push(JSON.parse(item))
          })

五十七丶拼接数组（重组）

let arrObj = this.promotionsData[0].giveParkingCoupon
			var arr = []
			arrObj.forEach(item => {
			  arr.push({certificate_id:item.id,number:item.get_limit})
			});
		  console.log(arr,'555555')

五十八丶文字渐变

<style>
.text {
    background: linear-gradient(to right, #ff0000, #0000ff, #00ff00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>

五十九丶uniapp返回顶部

uni.pageScrollTo({
		scrollTop: this.scrollTop,
		duration: 300
});

六十丶crmeb支付宝版运行修改

components——》maramlee-waterfalls-flow——》“MP-WEIXIN”
 

六十一丶毛玻璃

background: #5a5a5a57;
backdrop-filter: blur(1px);

六十二丶数组循环插入子元素

						var arr = that.store_categoryList
						var list = res.data
						var newarr = []
						console.log(arr,list,arr.length,list.length,'pppppppp1')
						for (var i=0; i<arr.length;i++) {
							arr[i].commodity = []
							for (var j=0; j<list.length;j++) {
								if (Number(list[j].cate_id) == arr[i].id) {
									console.log(list[j].cate_id,arr[i].id,'888888888888')
									arr[i].commodity.push(list[j])
								}
							} 
						}
						that.AllList = arr
						console.log(arr, '888888888888')