小程序开发笔记
最近我参与了一个小程序的开发,对于小程序开发我是零基础,所以特此记录一些小程序开发中的技术点。
设值与取值
动态修改变量的值
在data对象中创建一个变量
data: {
value: 0
}
修改变量的值
this.setData({
value: 10
});
在wxml中使用变量
<view class="page" value="{{ value }}">{{{ value }}</view>
在JavaScript代码中使用变量
func: function () {
//value是在data对象中定义的变量
this.data.value
}
动态修改对象的属性值
在data对象中创建一个包含一些属性的对象
data: {
obj: {
value: 0
}
}
修改对象的属性值
this.setData({
["obj.value"]: 10
});
在wxml中使用对象的属性
<view class="page" value="{{ obj.value }}">{{{ obj.value }}</view>
在JavaScript代码中使用对象的属性
func: function () {
//value是在data对象中定义的obj对象的属性
this.data.obj.value
}
数据存储方案
将数据保存到本地
wx.setStorageSync("value", 10);
读取保存在本地的数据
var value = wx.getStorageSync("value");
if (value) {
console.log("读取到了保存在本地的数据,保存在本地的数据为:", value);
} else {
console.log("没有读取到保存在本地的数据");
}
清除保存在本地的某个数据
wx.removeStorageSync("value");
清除所有保存在本地的数据
wx.clearStorageSync();
小程序在手机上运行时不能清除本地数据的解决方法
try {
wx.clearStorageSync();
} catch (e) {
wx.showToast({
title: "数据清除异常",
icon: 'none',
duration: 2000
})
}
数据渲染
声明式渲染
小程序允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
在wxml中添加一段小程序的布局代码
<view class="page">{{ message }}</view>
在data对象中定义一个message变量,并给变量设置一个值,此时变量的值便会渲染到页面中
data: {
message: "这是一个小程序的页面"
}
在页面中的效果

条件渲染
在wxml中添加一段小程序的布局代码
<view class="page" wx:if="{{ isShow }}">这是一个小程序的页面</view>
在data对象中定义一个bool类型的变量isShow,此时页面会根据isShow变量的值的不同实现数据的显示或者隐藏,当isShow为true时显示数据,当isShow为false时隐藏数据
data: {
isShow: false
},
当isShow为true时显示的效果

当isShow为false时隐藏的效果

列表渲染
在wxml中添加一段布局代码
<view class="list">
<view class="item" wx:for="{{items}}" wx:key="{{item}}">{{item.text}}</view>
</view>
在data对象中定义一个数组,此时页面会按照数组中的数据渲染
data: {
items: [
{ text: "学习 JavaScript" },
{ text: "学习 Vue" },
{ text: "学习小程序" },
{ text: "整个牛项目" },
]
}
运行结果

给标签绑定一个点击时的回调函数
在wxml中添加一个标签,并给标签绑定一个点击时的回调函数
<button bindtap="onNextStep">下一步</button>
在js中定义回调函数
onNextStep: function() {
console.log("你点击了下一步按钮");
}
页面跳转
在小程序中有两种方式实现页面跳转,分别为wx.navigateTo和wx.redirectTo,其中wx.navigateTo实现的页面跳转后会保留上一个页面,当点击左上角的返回按钮后可以返回到上一个页面,wx.redirectTo实现的页面跳转当跳转到下一个页面后会销毁上一个页面,当点击左上角的返回按钮后不能返回到上一个页面
使用wx.navigateTo实现页面跳转的写法
wx.navigateTo({
url: "/pages/homepage/index"
});
使用wx.redirectTo实现页面跳转的写法
wx.redirectTo({
url: "/pages/result/index"
});
对话框
显示Toast对话框
wx.showToast({
title: "您输入的密码错误",
icon: "none",
duration: 2000
});
代码运行结果

显示确认取消对话框
wx.showModal({
title: '提示',
content: '确定要将这张图片分享到朋友圈吗?',
success: function (result) {
if (confirm) {
console.log("你点击了确认按钮");
} else {
console.log("你点击了取消按钮");
}
}
});
代码运行结果

当选项中有一项选否时,显示下一项
在做小程序过程中遇到一个需求,就是进入某个页面后,页面中有一些选项,在初始状态下只展示第一项,并且该项默认处于选中状态,当选中该项的否时显示下一项,直到显示到选择最后一项,当选中的是除最后一项之外的每项的是时,隐藏后面的选项
最终实现的效果如下

实现方式
在wxml文件中添加下面的页面布局代码
<view class="screenform-list border-top" wx:if="{{ currIndex >= 1 }}">
<view class="top-title">
<span class="top-title-icon"></span>
<text>针对程序员的问卷调查</text>
</view>
<view class="screenform-item" wx:if="{{ currIndex >= 1 }}">
<view class="screenform-question">1.你是程序员吗?</view>
<view class="screenform-select">
<radio-group class="radio-group" id="1" bindchange="onRadioChange">
<label class="radio">
<radio checked="{{ currIndex == 1 ? true : false}}" value="1" /> 是
</label>
<label class="radio">
<radio checked="{{ currIndex > 1 ? true : false}}" value="0" /> 否
</label>
</radio-group>
</view>
</view>
<view class="screenform-item border-top-line" wx:if="{{ currIndex >= 2 }}">
<view class="screenform-question">2.你是做前端开发的吗?</view>
<view class="screenform-select">
<radio-group class="radio-group" id="2" bindchange="onRadioChange">
<label class="radio">
<radio checked="{{ currIndex == 2 ? true : false}}" value="1" /> 是
</label>
<label class="radio">
<radio checked="{{ currIndex > 2 ? true : false}}" value="0" /> 否
</label>
</radio-group>
</view>
</view>
<view class="screenform-item border-top-line" wx:if="{{ currIndex >= 3 }}">
<view class="screenform-question">3.你主要的工作内容是写JavaScript的吗?</view>
<view class="screenform-select">
<radio-group class="radio-group" id="3" bindchange="onRadioChange">
<label class="radio">
<radio checked="{{ currIndex == 3 ? true : false}}" value="1" /> 是
</label>
<label class="radio">
<radio checked="{{ currIndex > 3 ? true : false}}" value="0" /> 否
</label>
</radio-group>
</view>
</view>
<view class="screenform-item border-top-line" wx:if="{{ currIndex >= 4 }}">
<view class="screenform-question">4.你是做微信小程序开发的吗?</view>
<view class="screenform-select">
<radio-group class="radio-group" id="4" bindchange="onRadioChange">
<label class="radio">
<radio checked="{{ currIndex == 4 ? true : false }}" value="1" /> 是
</label>
<label class="radio">
<radio checked="{{ currIndex > 4 ? true : false }}" value="0" /> 否
</label>
</radio-group>
</view>
</view>
</view>
在wxss文件中添加页面样式代码
.radio-group {
display: flex;
flex-direction: row;
align-items: center;
}
.radio-group .radio {
padding: 20rpx 110rpx 20rpx 0;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
/* 单选按钮样式调整 */ radio .wx-radio-input {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border-color: #cccccc;
}
radio .wx-radio-input.wx-radio-input-checked {
background: white !important;
color: #18abff !important;
border-color: #18abff !important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
border-radius: 50%;
text-align: center;
font-size: 28rpx;
background: transparent;
color: #18abff;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
.border-top {
border-top: solid 10rpx #eeefef;
}
.border-top-line {
border-top: 1rpx solid #d5d5d5;
}
.top-title {
padding: 16rpx 0 16rpx 30rpx;
border-bottom: 1rpx solid #d5d5d5;
font-size: 26rpx;
font-weight: bold;
color: #333;
display: flex;
flex-direction: row;
align-items: top;
}
.top-title-icon {
width: 24rpx;
height: 24rpx;
margin-top: 6rpx;
border-radius: 50%;
background: url(http://meishadevs.com/images/top-title-icon.png) left center no-repeat;
display: inline-block;
}
.top-title text {
margin-left: 22rpx;
display: block;
flex: 1;
}
.screenform-list {
padding-bottom: 20rpx;
font-size: 30rpx;
}
.screenform-item {
margin-left: 30rpx;
}
.screenform-question {
line-height: 36rpx;
padding: 24rpx 30rpx 0 0;
}
在js文件中添加js代码
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
//当前选中项的索引
currIndex: 1,
survey: {
title: "针对程序员的问卷调查",
arr: [
{
question: "你是程序员吗?"
},
{
question: "你是做前端开发的吗?"
},
{
question: "你主要的工作内容是写JavaScript的吗?"
},
{
question: "你是做微信小程序开发的吗?"
}
]
}
},
//单选按钮响应函数
onRadioChange: function (e) {
//如果当前项选中的是否
if (e.detail.value == 0) {
//显示下一项
this.setData({
currIndex: parseInt(e.target.id) + 1
});
//如果当前选中的是“是”
} else {
//显示当前选中的选
this.setData({
currIndex: parseInt(e.target.id)
});
}
}
})
以上选项都不选中
这次小程序中还有一个需求,在多选中有一个以上选项都不选中按钮,当选中以上选项都不选中时,之前选中的选项由选中状态变为不选中状态,当选中除以上选项都不选中的其他选项时,以上选项都不选中的选项变为不选中状态

实现代码
wxml中的布局代码如下
<wxs src="./checkedTool.wxs" module="tools" />
<view class="screenform-item">
<view class="screenform-question">请选择你喜欢的编程语言?</view>
<checkbox-group bindchange="onCheckboxChange">
<label class="checkbox" wx:for="{{checkList}}" wx:key="item">
<checkbox value="{{item.name}}" checked="{{tools.checkedTool(check, item.name)}}" />{{item.value}}
</label>
</checkbox-group>
</view>
wxss中的样式代码
/* 复选框样式调整 */
checkbox .wx-checkbox-input {
width: 32rpx;
height: 32rpx;
border-radius: 10rpx;
border-color: #cccccc;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: white;
border-color: #18abff;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
font-size: 26rpx;
border-radius: 50%;
background: transparent;
color: #18abff;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
.screenform-item {
margin-left: 30rpx;
font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif;
font-size: 16px;
}
.screenform-question {
line-height: 36rpx;
padding: 24rpx 30rpx 0 0;
}
checkbox-group {
line-height: 36rpx;
padding-right: 30rpx;
padding-bottom: 9rpx;
display: flex;
flex-direction: column;
}
checkbox-group .checkbox {
padding: 9rpx 0;
}
checkedTool.wxs文件
//判断数组array中是否包含selectValue元素包含返回true
var checkedTool = function (array, selectValue) {
var checked = false;
for (var i = 0; i < array.length; ++i) {
if (array[i] == selectValue) {
checked = true;
break;
}
}
return checked;
}
module.exports.checkedTool = checkedTool;
js代码如下
//pages/test/index.js
Page({
/**
* 页面的初始数据
*/
data: {
checkList: [
{
name: "1",
value: "C"
},
{
name: "2",
value: "C++"
},
{
name: "3",
value: "Java"
},
{
name: "4",
value: "JavaScript"
},
{
name: "5",
value: "PHP"
},
{
name: "6",
value: "以上的编程语言都不喜欢"
}
],
//当前选中的选项
check: []
},
//多选按钮响应函数
onCheckboxChange: function (e) {
//获得当前用户选择的选项中的值
var array = e.detail.value;
//如果最后一项选择的是第6项(最后一项选择的是“以上的编程语言都不喜欢”)
if (array[array.length - 1] == '6') {
//只选择第6项
array = ['6'];
//如果第1项选择的是第6项(第一项选择的是“以上的编程语言都不喜欢”)
} else if (array[0] == '6') {
//移除选择的第6项
array.splice(0, 1);
}
this.setData({
check: array
});
}
})
参考链接
meishadevs欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果。
转载请注明: 【文章转载自meishadevs:小程序开发笔记】