微信小程序练习笔记
微信小程序的练习笔记,用来整理思路的,文档持续更新中。。。
案例一:实现行的删除和增加操作
test.js
// 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部的,是无法被其他方法所使用的
// 初始数据赋值
var initData = "this is first line\n this is second line"
var listData = [];
Page({
// 初始数据复制
data: {
text: initData
},
// 自定义添加方法
add: function(e) {
// 对于listData进行数据处理使用的push方法
listData.push("other line")
// 通过setData方法进行赋值操作 this表示当前对象
this.setData({
text: initData + "\n" + listData.join("\n")
})
},
remove: function(e) {
// 处于业务逻辑考虑,我们需要进行一个判断,防止误删
if (listData != null) {
// 对于listData进行数据处理使用的pop方法进行删除
listData.pop("other line")
// 通过setData方法进行赋值操作,this表示当前对象
this.setData({
text: initData + "\n" + listData.join("\n")
})
} else {
this.setData({
text: "没有新增的行了,所以删除全部行"
})
}
}
})
View Code
test.wxml
<!-- view相当于我们html的div属于块元素 -->
<!-- html中大多数的选择器都是可以使用的,但是我们微信小程序的默认编码习惯是只设置类选择器 -->
<!-- 归根结底就是做我们的页面样式控制 -->
<view class="btn_area">
<view class="btn_body">
<!-- text标签相当于我们html中的span属于行内元素 -->
<!-- 我们可以使用{{js的变量名}}显示我们的js中赋值的初始数据 -->
<text>{{text}}</text>
<!-- 创建按钮进行事件触发 -->
<!-- bindtap绑定我们的的js方法 -->
<button bindtap="add">添加行</button>
<button bindtap="remove">删除行</button>
</view>
</view>
View Code
案例二:实现页面的跳转与返回操作
index.wxml
<!-- 第二步创建跳转页面一(也就是我们的首页) -->
<view class="btn-area">
<!-- url指定我们的跳转页面,对应的使用?占位符的方式带了一个参数title -->
<!-- 使用hover-class属性增加了我们的点击样式改变了点击颜色 -->
<navigator class="nv1" url="/nv/nv?title=nv" hover-class="nv-hover">
跳转到nv页面
</navigator>
<navigator class="re1" url="/re/re?title=re" hover-class="re-hover" open-type="redirect">
跳转到re页面
</navigator>
</view>
View Code
index.wxss
/* 添加我们的点击样式 */
.btn-area{
margin-left: 250rpx
}
.nv-hover {
color: blue;
}
.re-hover {
color: red;
}
.nv1 {
color: red;
width: 250rpx;
text-align: center;
border: 1px solid red;
margin-top: 500rpx;
}
.re1 {
color: blue;
width: 250rpx;
text-align: center;
border: 1px solid blue;
}
View Code
nv.js
// nv/nv.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (op) {
console.log(op)
// 使用我们的setData方法把我们传过来的参数初始加载到我们的页面
this.setData({
text:op.title
})
},
})
View Code
nv.wxml
<!-- 页面展示,提示怎么返回上一级页面(也就是我们的跳转过来前的页面) -->
<view class="v1">
<text>这是我们从上一个页面传过来的参数【{{text}}】</text>
<text>点击左上角可以返回上级界面此处可以不用设置跳转</text>
</view>
View Code
nv.wxss
.v1{
color: red;
text-align: center;
border: 1px solid red;
margin-top: 500rpx
}
View Code
re.js
// re/re.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
text:options.title
})
}
})
View Code
re.wxml
<!--re/re.wxml-->
<view class="v1">
<text>这是我们从跳转页面传过来的参数【{{text}}】</text>
<view>
<text>改变跳转方式,我们从此页面无法点击左上角进行返回</text>
<navigator url="/index/index" open-type="redirect">返回上级页面</navigator>
</view>
</view>
View Code
re.wxss
.v1{
color:blue;
text-align: center;
border: 1px solid blue;
margin-top: 400rpx
}
View Code