微信小程序开发常用代码
wx.showLoading({
? ? ? title: '玩命加載中',
})
wx.hideLoading();
wx.showToast({
? ? ? ? ? title: '沒有更多數據',
})
//頁面上拉加載更多
onReachBottom ?當數據不夠一屏幕時不會觸發
控件（按鈕）橫向排列 wxss
.view_class {
? ?display: flex;
? ?flex-direction: row;
? ?justify-content: center;
?}
控件（按鈕）縱向排列 wxss
view_class {
? ?display: flex;
? ?flex-direction: column;
? ?justify-content: center;
}
console.log("控制臺打印輸出");
wx.showModal({
?title: '提示',
?content: '這是一個模態彈窗',
?success: function(res) {
? if (res.confirm) {
? ?console.log('用戶點擊確定')
? }
?}
})
for(var i = 0; i < _this.data.array.length; i++){
}
//跳轉傳json參數
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",
//返回上級頁面，默認返回1級
wx.navigateBack();
wx.navigateBack({
? ? ?//返回級數設置?? ?
? ? ?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;
? ? }
｝
// 表單驗證
? ? if (!_this.validation(values)) {
? ? ? App.showError(_this.data.error);
? ? ? return false;
? ? }
//設置不可點擊
disabled="{{disabled}}"
//滾動默認選項設置 ?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="請選擇"></input>
? </picker>
//點擊事件
bindtap=""
//數據回傳上個頁面
var pages = getCurrentPages();
? ? ? var prevPage = pages[pages.length - 2]; ?//上一個頁面
? ? ? prevPage.setData({
? ? ? ? deptId: _this.data.deptId,
? ? ? ? deptName: _this.data.deptName,
? ? ? ? deptNo: _this.data.deptNo
? ? ? });
//刪除指定數組項 ? splice參數說明 第一個參數是數據下標，第二個參數是刪除數量
_this.data.personList.splice(i,1);
//取出對象的鍵
Object.keys(對象)[0]
//取出對象的值
Object.values(對象)[0]
wx1a6abf2f8d546a7e
wx.setStorageSync（同步緩存）wx.getStorageSync（取數據）
wx.setStorage（異步緩存）wx.getStorage（取數據）
catchtap 如果在這個控件下面子控件還有點擊，會阻止子控件執行點擊
bindtap 如果在這個控件下面子控件還有點擊，不會阻止子控件執行點擊
delete values.鍵值 ? ?剔除對象中不需要的參數;
//字符串轉數組
var words = words.split(","); ? ?//轉成數組類似php的explode函數?
Page({
? data: {
? ? text: "This is page data."
? },
? onLoad: function(options) {
? ? // 頁面創建時執行
? },
? onShow: function() {
? ? // 頁面出現在前臺時執行
? },
? onReady: function() {
? ? // 頁面首次渲染完畢時執行
? },
? onHide: function() {
? ? // 頁面從前臺變為后臺時執行
? },
? onUnload: function() {
? ? // 頁面銷毀時執行
? },
? onPullDownRefresh: function() {
? ? // 觸發下拉刷新時執行
? },
? onReachBottom: function() {
? ? // 頁面觸底時執行
? },
? onShareAppMessage: function () {
? ? // 頁面被用戶分享時執行
? },
? onPageScroll: function() {
? ? // 頁面滾動時執行
? },
? onResize: function() {
? ? // 頁面尺寸變化時執行
? },
? onTabItemTap(item) {
? ? // tab 點擊時執行
? ? console.log(item.index)
? ? console.log(item.pagePath)
? ? console.log(item.text)
? },
? // 事件響應函數
? viewTap: function() {
? ? this.setData({
? ? ? text: 'Set some data for updating view.'
? ? }, function() {
? ? ? // this is setData callback
? ? })
? },
? // 自由數據
? customData: {
? ? hi: 'MINA'
? }
})
//圖片旋轉
<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">旋轉</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; // 動畫實體
var _animationIndex = 0; // 動畫執行次數index（當前執行了多少次）
var _animationIntervalId = -1; // 動畫定時任務id，通過setInterval來達到無限旋轉，記錄id，用于結束定時任務
const _ANIMATION_TIME = 60; // 動畫播放一次的時長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'
? ? })
? },
? /**
? ?* 實現image旋轉動畫，每次旋轉 1 * n度
? ?*/
? rotateAni: function (n) {
? ? _animation.rotate(1 * (n)).step()
? ? this.setData({
? ? ? animation: _animation.export()
? ? })
? },
? /**
? ?* 開始旋轉
? ?*/
? startAnimationInterval: function () {
? ? var that = this;
? ? that.rotateAni(++_animationIndex); // 進行一次旋轉
? ? _animationIntervalId = setInterval(function () {
? ? ? that.rotateAni(++_animationIndex);
? ? }, _ANIMATION_TIME); // 每間隔_ANIMATION_TIME進行一次旋轉
? },
? /**
? ?* 停止旋轉
? ?*/
? stopAnimationInterval: function () {
? ? if (_animationIntervalId > 0) {
? ? ? clearInterval(_animationIntervalId);
? ? ? _animationIntervalId = 0;
? ? }
? },
})
setTimeout(function () {
? ? console.log("----Countdown----");
? }, 1000);
獲取控件的高度是px, 再乘以750轉換成rpx
page{
? ? height:100%;//這樣你在頁面中的view設置height:100%就起作用了
}
view{
?? ? height:100vh;//相對于視口的高度。視口被均分為100單位的vh，100vh就是充滿整個屏幕了
}
//view一個設置了高度,另一個填滿剩下空間
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;
}
?微信小程序開發中bindtap和catchtap的區別
父元素使用 bindtap 綁定事件后，子元素也用 bindtap 綁定事件。
那么當觸發子元素事件時，我們發現同時也觸發使用 bindtap 綁定事件的父元素事件。
如果我們需求只要觸發子元素事件，那么我們可以在子元素中用 catchtap 代替 bindtap 去綁定事件。
//微信小程序CheckBox樣式修改
/* 未選中的 背景樣式 */
checkbox .wx-checkbox-input{
? width: 40rpx;
? height: 40rpx;
? float: left
}
/* 選中后的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
? border: none;
? background: rgba(65,163,250,1);
}
/* 選中后的 對勾樣式 （白色對勾 可根據UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
? border-radius: 50%;/* 圓角 */
? width: 40rpx;/* 選中后對勾大小，不要超過背景的尺寸 */
? height: 40rpx;/* 選中后對勾大小，不要超過背景的尺寸 */
? line-height: 40rpx;
? text-align: center;
? font-size:30rpx; /* 對勾大小 30rpx */
? color:#fff; /* 對勾顏色 白色 */
? background: transparent;
? transform:translate(-50%, -50%) scale(1);
? -webkit-transform:translate(-50%, -50%) scale(1);
}
字體劃線效果
? <view style='font-size:14px;'>
? ? ? ?原價：
? ? ? ?<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('_') //找到第一次出現下劃線的位置
str_new 1= str.substring(0,s ) ?//取下劃線前的字符
str_new 1= str.substring(s+1) //取下劃線后的字符
總結
以上是生活随笔為你收集整理的微信小程序开发常用代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最近幻影的两个ARP欺骗工具 挺不错的
- 下一篇： C++匿名对象