首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序聊天功能的示例代码

Posted in Javascript onJanuary 13, 2020

效果

微信小程序聊天功能的示例代码

初始化滚动条高度

var keyHeight = 0;

数据格式

const CHAT_DATA=[
 {
  type:0,//0客服1用户
  content:'欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎',
  headImg:'../../assets/common/images/headHortrait.jpeg',//头像
  creatTime:'2019-01-01',//创建时间
  contentType:'text'
 }, {
  type: 0,//0客服1用户
  content: '1111111',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'text'
 }, {
  type: 1,//0客服1用户
  content: '222222',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'text'
 }, {
  type: 0,//0客服1用户
  content: '333333',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'text'
 }, {
  type: 1,//0客服1用户
  content: '4444444',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'text',
 }, {
  type: 0,//0客服1用户
  content: 'http://tmp/wxc79c66d8b0ed19a8.o6zAJs6QE8L8FKq645ts4e3LoKzI.pGakaVHKmbQ3160aa57e2bf33cb576fbabf691cd890b.durationTime=3706.aac',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'voice',
  duration: '3706',
 },{
  type: 1,//0客服1用户
  content: 'http://tmp/wxc79c66d8b0ed19a8.o6zAJs6QE8L8FKq645ts4e3LoKzI.pGakaVHKmbQ3160aa57e2bf33cb576fbabf691cd890b.durationTime=3706.aac',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'voice',
  duration:'3706'
 },
 {
  type: 1,//0客服1用户
  content: 'https://img.yzcdn.cn/vant/cat.jpeg',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'img'
 }, {
  type: 1,//0客服1用户
  content: 'https://img.yzcdn.cn/vant/cat.jpeg',
  headImg: '../../assets/common/images/headHortrait.jpeg',//头像
  creatTime: '2019-01-01',//创建时间
  contentType: 'img'
 }
];

wxml对话框

<block wx:key wx:for='{{chatData}}' wx:for-index="index">

   <!-- 单个消息1 客服发出（左） -->
   <view wx:if='{{item.type==0}}' id='msg-{{index}}' class="contentLeft" style=''>
    <view class="head">
      <image class="headImg" src='{{item.headImg}}' mode='widthFix'></image>
    </view>
    <view class='leftMsg' wx:if="{{item.contentType==='text'}}">{{item.content}}</view>
    <view class='leftMsg' wx:if="{{item.contentType==='voice'}}" data-duration="{{item.content}}">{{item.duration}}s</view>
     
    <view class='leftMsg img' wx:if="{{item.contentType==='img'}}"><image src="{{item.content}}" data-src="{{item.content}}" mode='widthFix' bindtap="onPreview"/></view>
   </view>

   <!-- 单个消息2 用户发出（右） -->
   <view wx:else id='msg-{{index}}' class="contentRight">
    <view class='rightMsg' wx:if="{{item.contentType==='voice'}}" data-duration="{{item.duration}}" bindtap="playRecord" style="width:{{30+item.duration*5}}px;justify-content: flex-end;display:flex;color:#000;">{{item.duration}}"<van-icon name="../../../assets/common/icon/voice-r.png" style="padding:0 0 0 5px;" /></view>
    <view class='rightMsg' wx:if="{{item.contentType==='text'}}">{{item.content}}</view>
    
    <view class='rightMsg img' wx:if="{{item.contentType==='img'}}"><image src="{{item.content}}" data-src="{{item.content}}" mode='widthFix' bindtap="onPreview"/></view>
     <view>
      <image class="headImg" src='{{item.headImg}}' mode='widthFix'></image>
    </view>
   </view>

  </block>

wxml底部输入框

<view class='inputRoom' style='bottom: {{inputBottom}};height: {{bottomHeight}}'>
  <van-row class="bottomRow">
   <van-col span="2"wx:if="{{show}}"> <van-icon bindtap="startRecord" class="iconfont icon" class-prefix='icon' size="40rpx" name="yuyin" ></van-icon></van-col>
    <van-col span="2" wx:if="{{!show}}"> <van-icon bindtap="startRecord" class="iconfont icon" class-prefix='icon' size="40rpx" name="fabiaowenzhang" ></van-icon></van-col>
   <van-col span="18" wx:if="{{show}}"> <input bindconfirm='sendClick'bind:input="inputValue" adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input></van-col>
   <van-col span="18" wx:if="{{!show}}"> <view class="holdTape" bind:touchstart="startTalk" bind:touchend='stopRecord'>按住请说话</view></van-col>
   <van-col span="2"><van-icon class="iconfont icon" class-prefix='icon' size="40rpx" name='biaoqing' bindtap="getEmoji"></van-icon></van-col>
   <van-col span="2"><van-uploader use-slot accept='image' bind:after-read="uploadeImg"> <van-icon class="iconfont icon" class-prefix='icon' size="40rpx" name='icon02' ></van-icon></van-uploader></van-col>
  </van-row> 
   <view wx:if="{{showEmoji}}" class="emoji">
   <emoji bind:clickEmoji="clickEmoji" data-key="inputVal" value="{{inputVal}}" />
  </view>
 </view>
  
</view>
<view class="recordDailog" wx:if="{{showDailog}}"  >
<view class="show">
 <image src="../../assets/common/images/record.png"></image>
 <text>{{toastTitle}}</text>
</view>

css

#page{
 height: 90%;
overflow-y: auto;

}
.content{
 background: white;

}

.inputRoom {
 width: 100vw;
 /* height: 16vw; */
 border-top: 1px solid #cdcdcd;
 position: fixed;
 bottom: 0;
 display: flex;
 align-items: center;
 z-index: 20;
 background: white;
 flex-direction: column;

}
.bottomRow{
 width: 100%;
 height: 16vw;
display: flex;
align-items: center;
flex-direction: row
}
.bottomRow .van-row{
 width: 100%;

}
.emoji{
 height: 30vw;
}
input {
width: 90%;
height: 9.33vw;
background-color: #EEF4FA;
border-radius: 6rpx;
font-size: 28rpx;
color: #444;
padding: 0 3%;
margin-left: 2%;
}

.leftMsg {
 font-size: 26rpx;
 color: #333333;
line-height: 6vw;
padding: 2vw 2.5vw;
background-color: #EEF4FA;
 border-radius: 10rpx;
 z-index: 10;
}

.rightMsg {
 font-size: 26rpx;
 color: white;
 line-height: 6vw;
 padding: 2vw 2.5vw;
 background-color: #496DFF;
 border-radius: 10rpx;
 z-index: 10;
}



.chatFrame{
 background: white;
 height: 100%
} 
.icon{
 line-height: 8vw;

}
.head{
 display: flex;
 align-items: center
}
.headImg{
 border-radius: 50%; width: 60rpx;height: 60rpx;
}
.holdTape{
 width: 90%;
height: 9.33vw;
background-color: #EEF4FA;
border-radius: 6rpx;
padding: 0 3%;
margin-left: 2%;
display: flex;
align-items: center;
justify-content: center;

}

.recordDailog{
 -webkit-transition-duration: 300ms;
transition-duration: 300ms;
z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
width: -webkit-fit-content;
width: fit-content;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
max-width: var(--toast-max-width,70%);

}

.show{
width: var(--toast-default-width,90px);
min-height: var(--toast-default-min-height,90px);
padding: var(--toast-default-padding,16px);
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: initial;
color: var(--toast-text-color,#fff);
font-size: var(--toast-font-size,14px);
line-height: var(--toast-line-height,20px);
white-space: pre-wrap;
word-wrap: break-word;
background-color: var(--toast-background-color,rgba(50,50,51,.88));
border-radius: var(--toast-border-radius,4px);

}
.show image{
 width: 24px;
 height: 24px
}
image{
 /* max-width: 88vw;
max-height: 400rpx; */
width: 100%
}
.img{
background: none;
width: 90%
}
.contentRight{
 display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;width: 86%;
}
.contentLeft{
 display: flex; padding: 2vw 11vw 2vw 2vw;width: 86%;
}

js

// pages/contact/contact.js
const {
 pageFunc
} = require('../../utils/util.js');
const app = getApp();
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;
const { CHAT_DATA}=require("../../data/customerService.js");
import Toast from '../../components/vant/toast/toast';
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
const db = wx.cloud.database();
/**
 * 初始化数据
 */
/**
 * 计算msg总高度
 */
function calScrollHeight(that, keyHeight) {
 var query = wx.createSelectorQuery();
 query.select('.scrollMsg').boundingClientRect(function(rect) {
 }).exec();
}
Page({

 /**
  * 页面的初始数据
  */
 data: {
  scrollHeight: '100vh',
  inputVal:"",
  inputBottom: 0,
  chatData:[],
  show:true,
  showDailog:false,
  bottomHeight:"18vw",
  sendData:{},
  pagination: {
   pageSize: 5,
   currentPage: 1,
   total: 0,
  },
  showEmoji:false,
  toastTitle:"录音中...."
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // this.setData({
  //  cusHeadIcon: app.globalData.userInfo.avatarUrl,
  // });
  const {
   pagination
  } = this.data
  this.getData({ param: CHAT_DATA, pagination });
   wx.pageScrollTo({
    scrollTop: 1000
   })
 },
 getData(params) {
  const { chatData } = this.data;
  const {
   param,
   pagination: {
    pageSize = 10,
    currentPage = 1
   },
  } = params;
  this.setData({
   pagination: { pageSize, currentPage }
  });
  const {
   data,
   pagination
  } = pageFunc(param, currentPage, pageSize);
  data.forEach((item) => {
   if (item.duration) {
    item.duration = Math.ceil(item.duration / 1000)
   }
  });
   this.setData({
    'chatData': data.concat(chatData)
   });
 },
 startRecord(){//开始录音
 const {show}=this.data
  if (show){
   this.setData({
    show: false,
   })
  }else{
   this.setData({
    show: true,
   })
  }
  
  
 },
 startTalk(e){//开始说话
  this.setData({
   showDailog:true,
  })
  const options = {
   duration: 60000,
   sampleRate: 44100,
   numberOfChannels: 1,
   encodeBitRate: 192000,
   format: 'aac',
   frameSize: 50
  }
  recorderManager.start(options)
  recorderManager.onStart((res) => {
  })
 },
 stopRecord(){//停止说话
  const that=this
  this.setData({
   showDailog:false,
  })
  recorderManager.stop();
  recorderManager.onStop((res) => {
   const { sendData, chatData } = that.data;
   let { tempFilePath, duration, fileSize} = res
   sendData.tempFilePathData=res
   duration = Math.ceil(duration / 1000)
   const data = { content: tempFilePath, duration , fileSize, contentType: 'voice', type: 1};
   chatData.push(data);
   wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
    // 使页面滚动到底部
    wx.pageScrollTo({
     scrollTop: rect.bottom + 5000
    })
   }).exec();
   that.setData({
    'tempFilePath': tempFilePath,
    sendData,
    chatData,
    scrollHeight: (windowHeight - 0) + 'px',
    toView: 'msg-' + (chatData.length - 1),
    inputBottom: '0px'
   })
  })
 },

 playRecord(e){//播放语音
  const { currentTarget: { dataset: { duration } }}=e;
  const { tempFilePath} = this.data
  innerAudioContext.autoplay = true;
  innerAudioContext.src = tempFilePath ,
   innerAudioContext.onPlay(() => {
    this.setData({
     toastTitle: "播放中....",
     showDailog: true,
    })
   })
  innerAudioContext.onEnded((res) => {
   this.setData({
    toastTitle: "录音中....",
    showDailog: false,
   })
  })
  innerAudioContext.onError((res) => {
  });
  innerAudioContext.play()
 },

 uploadeImg(e){
  const { file: { path,size:fileSize} } = e.detail;
  const { chatData } = this.data;
  const data = { content: path, fileSize, contentType: 'img', type: 1 };
  chatData.push(data);
  wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
   // 使页面滚动到底部
   wx.pageScrollTo({
    scrollTop: rect.bottom + 5000
   })
  }).exec()
  this.setData({
   chatData,
   scrollHeight: (windowHeight - 0) + 'px',
   toView: 'msg-' + (chatData.length - 1),
   inputBottom:'0px'
  })
 },
 getEmoji(){//获取表情包
  wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
   // 使页面滚动到底部
   wx.pageScrollTo({
    scrollTop: rect.bottom + 5000
   })
  }).exec()
 this.setData({
  showEmoji:true,
  bottomHeight:"48vw"
 })
 },

 clickEmoji: function (e) {//选择表情包
  const {
   detail: {
    value
   },
   currentTarget: {
    dataset: {
     key
    }
   }
  } = e;
  this.setData({
   [key]: value
  })
 },

 onPreview(e){
  const {
   currentTarget: {
    dataset: {
     src
    }
   }
  } = e;
  const urls = [src]
  wx.previewImage({
   current: src,
   urls
  })
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
  let { pagination: { currentPage } } = this.data
  this.getData({
   param: CHAT_DATA,
   pagination: {
    pageSize: 5,
    currentPage: currentPage + 1,
   }
  });
 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 获取聚焦
  */
 inputValue(e){
  const {detail:{value}}=e
  this.setData({
   inputVal:value
  })
 },
 focus: function (e) {
  const { chatData}=this.data
  keyHeight = e.detail.height;
  wx.pageScrollTo({
   scrollTop: windowHeight - keyHeight
  })
  this.setData({
   toView: 'msg-' + (chatData.length - 1),
   inputBottom: keyHeight + 'px',
   scrollHeight: (windowHeight - keyHeight) + 'px',
   showEmoji:false,
   bottomHeight: "18vw"
  })
  //计算msg高度
  // calScrollHeight(this, keyHeight);

 },

 //失去聚焦(软键盘消失)
 blur: function (e) {
  const { chatData } = this.data
  this.setData({
   scrollHeight: '100vh',
   inputBottom: 0
  })
  this.setData({
   toView: 'msg-' + (chatData.length - 1)
  })

 },

 /**
  * 发送点击监听
  */
 sendClick: function (e) {
  const { chatData, scrollHeight}=this.data;
  wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
   // 使页面滚动到底部
   wx.pageScrollTo({
    scrollTop: rect.bottom + 5000
   })
  }).exec()
 
  chatData.push({
   type: 1,
   contentType: 'text',
   content: e.detail.value,
   headImg: '../../assets/common/images/headHortrait.jpeg',
  })
  this.setData({
   chatData,
   inputVal:''
  });


 },

 /**
  * 退回上一页
  */
 toBackClick: function () {
  wx.navigateBack({})
 }

})// pages/contact/contact.js
const {
 pageFunc
} = require('../../utils/util.js');
const app = getApp();
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;
const { CHAT_DATA}=require("../../data/customerService.js");
import Toast from '../../components/vant/toast/toast';
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
const db = wx.cloud.database();
/**
 * 初始化数据
 */
/**
 * 计算msg总高度
 */
function calScrollHeight(that, keyHeight) {
 var query = wx.createSelectorQuery();
 query.select('.scrollMsg').boundingClientRect(function(rect) {
 }).exec();
}
Page({

 /**
  * 页面的初始数据
  */
 data: {
  scrollHeight: '100vh',
  inputVal:"",
  inputBottom: 0,
  chatData:[],
  show:true,
  showDailog:false,
  bottomHeight:"18vw",
  sendData:{},
  pagination: {
   pageSize: 5,
   currentPage: 1,
   total: 0,
  },
  showEmoji:false,
  toastTitle:"录音中...."
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // this.setData({
  //  cusHeadIcon: app.globalData.userInfo.avatarUrl,
  // });
  const {
   pagination
  } = this.data
  this.getData({ param: CHAT_DATA, pagination });
   wx.pageScrollTo({
    scrollTop: 1000
   })
 },
 getData(params) {
  const { chatData } = this.data;
  const {
   param,
   pagination: {
    pageSize = 10,
    currentPage = 1
   },
  } = params;
  this.setData({
   pagination: { pageSize, currentPage }
  });
  const {
   data,
   pagination
  } = pageFunc(param, currentPage, pageSize);
  data.forEach((item) => {
   if (item.duration) {
    item.duration = Math.ceil(item.duration / 1000)
   }
  });
   this.setData({
    'chatData': data.concat(chatData)
   });
 },
 startRecord(){//开始录音
 const {show}=this.data
  if (show){
   this.setData({
    show: false,
   })
  }else{
   this.setData({
    show: true,
   })
  }
  
  
 },
 startTalk(e){//开始说话
  this.setData({
   showDailog:true,
  })
  const options = {
   duration: 60000,
   sampleRate: 44100,
   numberOfChannels: 1,
   encodeBitRate: 192000,
   format: 'aac',
   frameSize: 50
  }
  recorderManager.start(options)
  recorderManager.onStart((res) => {
  })
 },
 stopRecord(){//停止说话
  const that=this
  this.setData({
   showDailog:false,
  })
  recorderManager.stop();
  recorderManager.onStop((res) => {
   const { sendData, chatData } = that.data;
   let { tempFilePath, duration, fileSize} = res
   sendData.tempFilePathData=res
   duration = Math.ceil(duration / 1000)
   const data = { content: tempFilePath, duration , fileSize, contentType: 'voice', type: 1};
   chatData.push(data);
   wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
    // 使页面滚动到底部
    wx.pageScrollTo({
     scrollTop: rect.bottom + 5000
    })
   }).exec();
   that.setData({
    'tempFilePath': tempFilePath,
    sendData,
    chatData,
    scrollHeight: (windowHeight - 0) + 'px',
    toView: 'msg-' + (chatData.length - 1),
    inputBottom: '0px'
   })
  })
 },

 playRecord(e){//播放语音
  const { currentTarget: { dataset: { duration } }}=e;
  const { tempFilePath} = this.data
  innerAudioContext.autoplay = true;
  innerAudioContext.src = tempFilePath ,
   innerAudioContext.onPlay(() => {
    this.setData({
     toastTitle: "播放中....",
     showDailog: true,
    })
   })
  innerAudioContext.onEnded((res) => {
   this.setData({
    toastTitle: "录音中....",
    showDailog: false,
   })
  })
  innerAudioContext.onError((res) => {
  });
  innerAudioContext.play()
 },

 uploadeImg(e){
  const { file: { path,size:fileSize} } = e.detail;
  const { chatData } = this.data;
  const data = { content: path, fileSize, contentType: 'img', type: 1 };
  chatData.push(data);
  wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
   // 使页面滚动到底部
   wx.pageScrollTo({
    scrollTop: rect.bottom + 5000
   })
  }).exec()
  this.setData({
   chatData,
   scrollHeight: (windowHeight - 0) + 'px',
   toView: 'msg-' + (chatData.length - 1),
   inputBottom:'0px'
  })
 },
 getEmoji(){//获取表情包
  wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
   // 使页面滚动到底部
   wx.pageScrollTo({
    scrollTop: rect.bottom + 5000
   })
  }).exec()
 this.setData({
  showEmoji:true,
  bottomHeight:"48vw"
 })
 },

 clickEmoji: function (e) {//选择表情包
  const {
   detail: {
    value
   },
   currentTarget: {
    dataset: {
     key
    }
   }
  } = e;
  this.setData({
   [key]: value
  })
 },

 onPreview(e){
  const {
   currentTarget: {
    dataset: {
     src
    }
   }
  } = e;
  const urls = [src]
  wx.previewImage({
   current: src,
   urls
  })
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
  let { pagination: { currentPage } } = this.data
  this.getData({
   param: CHAT_DATA,
   pagination: {
    pageSize: 5,
    currentPage: currentPage + 1,
   }
  });
 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 获取聚焦
  */
 inputValue(e){
  const {detail:{value}}=e
  this.setData({
   inputVal:value
  })
 },
 focus: function (e) {
  const { chatData}=this.data
  keyHeight = e.detail.height;
  wx.pageScrollTo({
   scrollTop: windowHeight - keyHeight
  })
  this.setData({
   toView: 'msg-' + (chatData.length - 1),
   inputBottom: keyHeight + 'px',
   scrollHeight: (windowHeight - keyHeight) + 'px',
   showEmoji:false,
   bottomHeight: "18vw"
  })
  //计算msg高度
  // calScrollHeight(this, keyHeight);

 },

 //失去聚焦(软键盘消失)
 blur: function (e) {
  const { chatData } = this.data
  this.setData({
   scrollHeight: '100vh',
   inputBottom: 0
  })
  this.setData({
   toView: 'msg-' + (chatData.length - 1)
  })

 },

 /**
  * 发送点击监听
  */
 sendClick: function (e) {
  const { chatData, scrollHeight}=this.data;
  wx.createSelectorQuery().select('.content').boundingClientRect(function (rect) {
   // 使页面滚动到底部
   wx.pageScrollTo({
    scrollTop: rect.bottom + 5000
   })
  }).exec()
 
  chatData.push({
   type: 1,
   contentType: 'text',
   content: e.detail.value,
   headImg: '../../assets/common/images/headHortrait.jpeg',
  })
  this.setData({
   chatData,
   inputVal:''
  });


 },

 /**
  * 退回上一页
  */
 toBackClick: function () {
  wx.navigateBack({})
 }

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

微信小程序聊天功能的示例代码

- Author -

lulu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
前端性能优化建议
Sep 17 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
Vue 嵌套路由使用总结（推荐）
Jan 13 #Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
JS document form表单元素操作完整示例
Jan 13 #Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 #Javascript
萨拉雷(1) 怀旧期刊(1) 雄兵连(3) 广播(8) 下载(1) 保养(1) 中学科技(1) 短波(8) 烈阳天道(2) 无线电(12)
You might like
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
javascript的事件描述
2006/09/08 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
每天一篇javascript学习小结（Date对象）
2015/11/13 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python 类之间的参数传递方式
2019/12/20 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
2014年小班元旦活动方案
2014/02/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
信息与工商管理职业规划范文：为梦想而搏击
2014/09/11 职场文书
企业党员个人自我评价
2014/09/20 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
综合管理员岗位职责
2015/02/11 职场文书
财务会计求职信范文
2015/03/20 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL