微信小程序开发常用代码

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 + '&region=' + 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 
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>

str="1_abcdefg" //字符串，想要的是以下划线截取前后的字符

s = str.indexOf('_') //找到第一次出现下划线的位置

str_new 1= str.substring(0,s ) //取下划线前的字符

str_new 1= str.substring(s+1) //取下划线后的字符

微信小程序开发常用代码相关推荐

微信小程序开发常用的npm包
本篇主要介绍在微信小程序中使用 npm 包以及使用微信开发者工具开发微信小程序时最常用的 Vant Weapp 小程序 UI 组件库.miniprogram-api-promise 将 API Pro ...
软件创新实验室：微信小程序开发——配置文件代码编写
文章目录声明 App.json 文件代码编写 Windows 代码编写 Page 代码编写底部触摸栏代码编写声明 1)该文章部分内容整理自网上的资料,如不小心侵犯了大家的权益,还望海涵,并联系博 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充
零.回顾在上节课我们主要是基于 Promise 加 await.async关键字改写了登录模块代码, 但是我们在自动登录这一块的代码仍然有问题,这节课我们看一下, 如何在接口调用中实现微信用户的自动 ...
微信小程序开发常用知识
生命周期应用的生命周期函数 onLaunch(Object object) 小程序初始化完成时触发,全局只触发一次.参数也可以使用 wx.getLaunchOptionsSync 获取. onSho ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.7 网络接口简介（七）学习EventChannel对象
零.回顾在之前我们自定义实现picker-view组件的时候, 曾经使用过一个pop-up的自定义组件, 这个组件可以在底部滑入一个面板, 现在我们把登录按钮放在底部滑入的面板之上, 然后在完成登录 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.5 网络接口简介（五）基于Promise+await、async关键字改写登录模块
零.回顾在上节课我们主要实践练习了Promise的三个方法,包括any.all.race. 现在我们对Promise变成已经有了一个大致的了解. 这节课我们尝试将登录模块使用Promise编程方式进 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合
零.回顾在上节课我们主要介绍了观察者模式, 并据此模式实现了一个event模块, 这节课我们基础用户登录的自动整合, 尝试在wxp模块当中扩展出一个request3这样的一个接口. 一.在wxp组件 ...
微信小程序开发常用快捷键
常用快捷键格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C,Ctrl+V:复制粘贴,如果 ...
微信小程序开发--常用开发实例
一.常用商品列表的换行排布 <view class="box_max"><view class="box_min">限时秒杀</v ...
微信小程序开发——常用快捷键
格式调整快捷键序号快捷键作用 1 Ctrl+S 保存文件 2 Ctrl+[ 代码行缩进,左 3 Ctrl+] 代码行缩进,右 4 Ctrl+Shift+[,Ctrl+Shift+] 折叠打开代码 ...

微信小程序开发常用代码

微信小程序开发常用代码相关推荐

最新文章

热门文章