微信小程序练习笔记（更新中。。。）

微信小程序练习笔记

微信小程序的练习笔记，用来整理思路的，文档持续更新中。。。

案例一：实现行的删除和增加操作

 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

 

转载于:https://www.cnblogs.com/cainiao-chuanqi/p/11603272.html