微信小程序开发常用代码
wx.showLoading({
? ? ? title: '玩命加載中',
})
wx.hideLoading();
wx.showToast({
? ? ? ? ? title: '沒有更多數(shù)據(jù)',
})
//頁面上拉加載更多
onReachBottom ?當(dāng)數(shù)據(jù)不夠一屏幕時(shí)不會(huì)觸發(fā)
控件（按鈕）橫向排列 wxss
.view_class {
? ?display: flex;
? ?flex-direction: row;
? ?justify-content: center;
?}
控件（按鈕）縱向排列 wxss
view_class {
? ?display: flex;
? ?flex-direction: column;
? ?justify-content: center;
}
console.log("控制臺(tái)打印輸出");
wx.showModal({
?title: '提示',
?content: '這是一個(gè)模態(tài)彈窗',
?success: function(res) {
? if (res.confirm) {
? ?console.log('用戶點(diǎn)擊確定')
? }
?}
})
for(var i = 0; i < _this.data.array.length; i++){
}
//跳轉(zhuǎn)傳json參數(shù)
wx.navigateTo({
? ? ? ? url: '/pages/register/organname?orgType=' + this.data.orgType + '®ion=' + JSON.stringify(this.data.region),
})
JSON.parse(arrJosn);
"navigationStyle": "custom" 去除title
url: '/pages/faceinfo/facepreview?tag=' + "1",
//返回上級(jí)頁面，默認(rèn)返回1級(jí)
wx.navigateBack();
wx.navigateBack({
? ? ?//返回級(jí)數(shù)設(shè)置?? ?
? ? ?delta: 2
});
校園版小程序 ?AppID(小程序ID)?? ?wx1a6abf2f8d546a7e
https://www.yasuotu.com/ ? ? 圖片無損壓縮
disabled="false"
小程序分包
"subPackages": [
? ? {
? ? ? ?"root": "packageA",
? ? ? ? ? "pages": [
? ? ? ? ? ? "pages/detail"
? ? ? ]
? ? }
? ],
validation: function(values) {
? ? if (values.name === '') {
? ? ? this.data.error = '姓名不能為空';
? ? ? return false;
? ? }
｝
// 表單驗(yàn)證
? ? if (!_this.validation(values)) {
? ? ? App.showError(_this.data.error);
? ? ? return false;
? ? }
//設(shè)置不可點(diǎn)擊
disabled="{{disabled}}"
//滾動(dòng)默認(rèn)選項(xiàng)設(shè)置 ?value就可以了
<picker mode="multiSelector" bindchange="bindPickerTime" value="{{index5}}" range="{{timeArray}}">
? ? ? <input class="text-msg view-msg-color" disabled="false" placeholder-style="color:#009ad6;" name="operateTime" value="{{timeStr}}" placeholder="請(qǐng)選擇"></input>
? </picker>
//點(diǎn)擊事件
bindtap=""
//數(shù)據(jù)回傳上個(gè)頁面
var pages = getCurrentPages();
? ? ? var prevPage = pages[pages.length - 2]; ?//上一個(gè)頁面
? ? ? prevPage.setData({
? ? ? ? deptId: _this.data.deptId,
? ? ? ? deptName: _this.data.deptName,
? ? ? ? deptNo: _this.data.deptNo
? ? ? });
//刪除指定數(shù)組項(xiàng) ? splice參數(shù)說明 第一個(gè)參數(shù)是數(shù)據(jù)下標(biāo)，第二個(gè)參數(shù)是刪除數(shù)量
_this.data.personList.splice(i,1);
//取出對(duì)象的鍵
Object.keys(對(duì)象)[0]
//取出對(duì)象的值
Object.values(對(duì)象)[0]
wx1a6abf2f8d546a7e
wx.setStorageSync（同步緩存）wx.getStorageSync（取數(shù)據(jù)）
wx.setStorage（異步緩存）wx.getStorage（取數(shù)據(jù)）
catchtap 如果在這個(gè)控件下面子控件還有點(diǎn)擊，會(huì)阻止子控件執(zhí)行點(diǎn)擊
bindtap 如果在這個(gè)控件下面子控件還有點(diǎn)擊，不會(huì)阻止子控件執(zhí)行點(diǎn)擊
delete values.鍵值 ? ?剔除對(duì)象中不需要的參數(shù);
//字符串轉(zhuǎn)數(shù)組
var words = words.split(","); ? ?//轉(zhuǎn)成數(shù)組類似php的explode函數(shù)?
Page({
? data: {
? ? text: "This is page data."
? },
? onLoad: function(options) {
? ? // 頁面創(chuàng)建時(shí)執(zhí)行
? },
? onShow: function() {
? ? // 頁面出現(xiàn)在前臺(tái)時(shí)執(zhí)行
? },
? onReady: function() {
? ? // 頁面首次渲染完畢時(shí)執(zhí)行
? },
? onHide: function() {
? ? // 頁面從前臺(tái)變?yōu)楹笈_(tái)時(shí)執(zhí)行
? },
? onUnload: function() {
? ? // 頁面銷毀時(shí)執(zhí)行
? },
? onPullDownRefresh: function() {
? ? // 觸發(fā)下拉刷新時(shí)執(zhí)行
? },
? onReachBottom: function() {
? ? // 頁面觸底時(shí)執(zhí)行
? },
? onShareAppMessage: function () {
? ? // 頁面被用戶分享時(shí)執(zhí)行
? },
? onPageScroll: function() {
? ? // 頁面滾動(dòng)時(shí)執(zhí)行
? },
? onResize: function() {
? ? // 頁面尺寸變化時(shí)執(zhí)行
? },
? onTabItemTap(item) {
? ? // tab 點(diǎn)擊時(shí)執(zhí)行
? ? console.log(item.index)
? ? console.log(item.pagePath)
? ? console.log(item.text)
? },
? // 事件響應(yīng)函數(shù)
? viewTap: function() {
? ? this.setData({
? ? ? text: 'Set some data for updating view.'
? ? }, function() {
? ? ? // this is setData callback
? ? })
? },
? // 自由數(shù)據(jù)
? customData: {
? ? hi: 'MINA'
? }
})
//圖片旋轉(zhuǎn)
<view class="container">
? <view class="page-body">
? ? <view class="page-section">
? ? ? <view class="animation-element-wrapper">
? ? ? ? <view class="animation-element" animation="{{animation}}"></view>
? ? ? </view>
? ? ? <view class="animation-buttons" scroll-y="true">
? ? ? ? <button class="animation-button" bindtap="startAnimationInterval">旋轉(zhuǎn)</button>
? ? ? ? <button class="animation-button" bindtap="stopAnimationInterval">暫停</button>
? ? ? ? <button class="animation-button" bingtap=""></button>
? ? ? ? <button class="animation-button animation-button-reset" bindtap="reset">還原</button>
? ? ? </view>
? ? </view>
? </view>
</view>
var _animation; // 動(dòng)畫實(shí)體
var _animationIndex = 0; // 動(dòng)畫執(zhí)行次數(shù)index（當(dāng)前執(zhí)行了多少次）
var _animationIntervalId = -1; // 動(dòng)畫定時(shí)任務(wù)id，通過setInterval來達(dá)到無限旋轉(zhuǎn)，記錄id，用于結(jié)束定時(shí)任務(wù)
const _ANIMATION_TIME = 60; // 動(dòng)畫播放一次的時(shí)長(zhǎng)ms
Page({
? data: {
? ? animation: ''
? },
? onReady: function () {
? ? _animationIndex = 0;
? ? _animationIntervalId = -1;
? ? this.data.animation = '';
? },
? onShow: function () {
? ? _animation = wx.createAnimation({
? ? ? duration: _ANIMATION_TIME,
? ? ? timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
? ? ? delay: 0,
? ? ? transformOrigin: '50% 50% 0'
? ? })
? },
? /**
? ?* 實(shí)現(xiàn)image旋轉(zhuǎn)動(dòng)畫，每次旋轉(zhuǎn) 1 * n度
? ?*/
? rotateAni: function (n) {
? ? _animation.rotate(1 * (n)).step()
? ? this.setData({
? ? ? animation: _animation.export()
? ? })
? },
? /**
? ?* 開始旋轉(zhuǎn)
? ?*/
? startAnimationInterval: function () {
? ? var that = this;
? ? that.rotateAni(++_animationIndex); // 進(jìn)行一次旋轉(zhuǎn)
? ? _animationIntervalId = setInterval(function () {
? ? ? that.rotateAni(++_animationIndex);
? ? }, _ANIMATION_TIME); // 每間隔_ANIMATION_TIME進(jìn)行一次旋轉(zhuǎn)
? },
? /**
? ?* 停止旋轉(zhuǎn)
? ?*/
? stopAnimationInterval: function () {
? ? if (_animationIntervalId > 0) {
? ? ? clearInterval(_animationIntervalId);
? ? ? _animationIntervalId = 0;
? ? }
? },
})
setTimeout(function () {
? ? console.log("----Countdown----");
? }, 1000);
獲取控件的高度是px, 再乘以750轉(zhuǎn)換成rpx
page{
? ? height:100%;//這樣你在頁面中的view設(shè)置height:100%就起作用了
}
view{
?? ? height:100vh;//相對(duì)于視口的高度。視口被均分為100單位的vh，100vh就是充滿整個(gè)屏幕了
}
//view一個(gè)設(shè)置了高度,另一個(gè)填滿剩下空間
page{
? height:100%;
? display: flex;
? flex-direction: column;
? background: #6e6d6b;
}
.view-1{
? background: #ff9900;
}
.view-2{
? background: blue;
? flex: 1;
? align-items: center;
? justify-content: center;
? display: flex;
}
?微信小程序開發(fā)中bindtap和catchtap的區(qū)別
父元素使用 bindtap 綁定事件后，子元素也用 bindtap 綁定事件。
那么當(dāng)觸發(fā)子元素事件時(shí)，我們發(fā)現(xiàn)同時(shí)也觸發(fā)使用 bindtap 綁定事件的父元素事件。
如果我們需求只要觸發(fā)子元素事件，那么我們可以在子元素中用 catchtap 代替 bindtap 去綁定事件。
//微信小程序CheckBox樣式修改
/* 未選中的 背景樣式 */
checkbox .wx-checkbox-input{
? width: 40rpx;
? height: 40rpx;
? float: left
}
/* 選中后的 背景樣式 （紅色背景 無邊框 可根據(jù)UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
? border: none;
? background: rgba(65,163,250,1);
}
/* 選中后的 對(duì)勾樣式 （白色對(duì)勾 可根據(jù)UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
? border-radius: 50%;/* 圓角 */
? width: 40rpx;/* 選中后對(duì)勾大小，不要超過背景的尺寸 */
? height: 40rpx;/* 選中后對(duì)勾大小，不要超過背景的尺寸 */
? line-height: 40rpx;
? text-align: center;
? font-size:30rpx; /* 對(duì)勾大小 30rpx */
? color:#fff; /* 對(duì)勾顏色 白色 */
? background: transparent;
? transform:translate(-50%, -50%) scale(1);
? -webkit-transform:translate(-50%, -50%) scale(1);
}
字體劃線效果
? <view style='font-size:14px;'>
? ? ? ?原價(jià)：
? ? ? ?<text style='color:#FF6F10;text-decoration:line-through;'> 9.00 </text>
? </view>
1 /**index.wxss**/ ?
2 .content{ ?
3 ? height: 600px; ?
4 ? display: flex; ?
5 ? flex-direction: column; ?
6 } ?
1 <!--index.wxml--> ?
2 <view class="content"> ?
3 ? <view style="flex:1;width:100%;background-color:green">box1</view> ?
4 ? <view style="flex:1;width:100%;background-color:blue">box2</view> ?
5 ? <view style="flex:1;width:100%;background-color:yellow">box3</view> ?
6 </view> ?
<text class="time">0:00</text>
<view class="btns">
? ? ? ? <image class="preBtn" bindtouchstart="touchPreBtn" bindtouchend="pre" src="/images/play-last.png" mode="aspectFit">?</image>
? ? ? ? <image class="playBtn" bindtouchstart="touchPlayBtn" bindtouchend="playOrpause" src="/images/play.png" mode="aspectFit"></image>
? ? ? ? <image class="nextBtn" bindtouchstart="touchNextBtn" bindtouchend="next" src="/images/play-next.png" mode="aspectFit">?</image>
</view>
str="1_abcdefg" ?//字符串，想要的是以下劃線截取前后的字符
?s = str.indexOf('_') //找到第一次出現(xiàn)下劃線的位置
str_new 1= str.substring(0,s ) ?//取下劃線前的字符
str_new 1= str.substring(s+1) //取下劃線后的字符
總結(jié)
以上是生活随笔為你收集整理的微信小程序开发常用代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最近幻影的两个ARP欺骗工具 挺不错的
- 下一篇： Retrofit2源码解析——网络调用流