首页 > 编程语言 >微信小程序练习笔记（更新中。。。）

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

时间：2023-02-15 09:24:36浏览次数：53  
标签：listData 微信 练习 list 笔记 item initData text setData

 

 

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

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

 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: "没有新增的行了，所以删除全部行"
      })
    }
  }
})
复制代码

 test.wxml

 View Code

案例二：实现页面的跳转与返回操作

 index.wxml

 View Code

index.wxss

 View Code

nv.js

 View Code

nv.wxml

 View Code

nv.wxss

 View Code

re.js

 View Code

re.wxml

 View Code

re.wxss

 View Code

 全部代码

 

配置

复制代码 
{
  "pages": [
   "board/board",
   "serach/serach",
   "profile/profile",
   "index/index",
   "nv/nv",
   "re/re",
   "list/list"
  ],
  "tabBar":{
    "color":"red",
    "selecteColor":"green",
    "borderStyle":"black",
    "backgroundColor":"#ccc",
    "list":[
      {
        "pagePath":"board/board",
        "iconPath":"image/board.png",
        "selectedIconPath":"image/board-actived.png",
        "text":"榜单"
      },
    {
        "pagePath": "serach/serach",
        "iconPath": "image/search.png",
        "selectedIconPath": "image/search-actived.png",
        "text": "接口"
    },
     {
        "pagePath": "profile/profile",
        "iconPath": "image/profile.png",
        "selectedIconPath": "image/profile-actived.png",
        "text": "入口"
    }
    ]
  },



  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Hello World",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}
复制代码

轮播图

 board.js  board.wxml  board.wxss

跳转页面

 index.js  index.wxml  index.wxss

List电影列表

 list.js  list.wxml  list.wxss

电影详情

复制代码 
// list/list.js
Page({
  data: {
    list: [],
    loading: false,
    title: "正在加载中。。。"
  },
  onl oad: function (options) {
    const apiUrl = "https://douban.uieee.com/v2/movie/" + options.id
    const _this = this
    wx.request({
      url: apiUrl,
      header: {
        'Content-Type': 'json'
      },
      success: function (res) {
        _this.setData({
          list: res.data,
          title: res.data.title,
          loading: false
        })
      }
    })
  }
})
复制代码 复制代码 
<loading hidden="{{!loading}}">
  加载中，请稍等。。。
</loading>

<scroll-view scroll-y="true" wx:if="{{list.title}}">
  <view class="meta">
    <image class="poster" src="{{list.image}}" background-size="cover"/>
    <text class="title">{{list.title}} ( {{list.attrs.year[0]}} )</text>
    <text class="info">评分：{{list.rating.average}}</text>
    <text class="info3">导演：{{list.author[0].name}}{{list.author[1].name}}</text>
    <text class="info2">主演：
      <block wx:for="{{list.attrs.cast}}">
        {{item}}
      </block>
    </text>
    <view class="summary">
      <text class="label">摘要：</text>
      <text class="content">{{list.summary}}</text>
    </view>
  </view>
</scroll-view>
复制代码 复制代码 
.poster{
  width:400rpx;
  height:550rpx;
  box-shadow: 0rpx 0rpx 20rpx #696969;
  border-radius: 20rpx;
  display: block;
  margin-left: 25%;
}
.title{
  text-align: center;
  display: block;
  font-size: 50rpx;
}
.info{
color: red;
display: block;
text-align: center;
}
.info3{
display: block;
text-align: center;
}
.info2 {
padding: 5rpx 10rpx;
display: inline-block;
font-size: 35rpx;
margin-left:120rpx;
/* float: middle; */
border: 10rpx;
border-color:  #a8a8a8;
border-width: 5rpx;
border-style: groove;
text-align: center;
}
.label{
color: red;
font: 70rpx;
}
.content{
/* border-color: rgb(8, 8, 8);
border-width: 1rpx;
border-style: ridge; */
}
复制代码

搜索接口

复制代码 
// 设置初始数组为空
var initData = [];
Page({
  data: {
    search: "请输入搜索字",
    // 显示在页面的数组数据
    listData: []
  },
  search: function (e) {
    // console.log(e.detail.value)
    // 创建我们的url
    const apiUrl = "https://api.jisuapi.com/zidian/word?word=" + e.detail.value,
      _this = this
    wx.request({
      url: apiUrl,
      data: {
        appkey: "05498a73e2b2ac4c",
      },
      // 考虑数据调用报错，传输数据类型
      header: {
        'Content-Type': 'json'
      },
      // 调用成功
      success: function (res) {
        // console.log(res.data.result)
        // 增加判断以处理俄二次查询后在此追加数据的bug
        if (initData.length == 0) {
          initData.push(res.data.result);
          // 调用我们的setData进行赋值
          _this.setData({
            listData: initData
          })
        } else {
          // 当我们已经查询过数据后，下面已经有查询结果，所以需要先清除原有数据，在增加现有数据
          initData.pop();
          initData.push(res.data.result);
          // 调用我们的setData进行赋值
          _this.setData({
            listData: initData
          })
        }
      }
    })
  }
})
复制代码 复制代码 
<!-- 因为是搜索页，所以需要搜索框 -->
<view class="page-headert">
  <input placeholder="{{search}}" bindchange="search"></input>
</view>
<view class="view-text">
  <block wx:for="{{listData}}">
  <text>字：{{item.name}}</text>
  <text>拼音：{{item.pinyin}}</text>
  <text>笔画：{{item.bihua}}</text>
  <text>部首：{{item.bushou}}</text>
  <text>结构：{{item.jiegou}}</text>
  <text>笔顺：{{item.bishun}}</text>
  <text>五笔：{{item.wubi}}</text>
  <text>英文：{{item.english}}</text>
  <!-- 在此进行了循环来获取我们的解释 -->
  <block wx:for="{{item.explain}}">
    <text>内容：{{item.content}}</text>
  </block>
  </block>
</view>
复制代码 复制代码 
.page-headert{
  /* 文本居中 */
  text-align: center;
  /* 添加边框 */
  border: 3rpx solid beige
}
/* 对于查到数据进行样式控制 */
.view-text text{
  color: darkgray;
  margin: 0 20rpx 0;
  display: block;
  line-height: 50rpx
}

 

 

from：https://www.cnblogs.com/cainiao-chuanqi/p/11603272.html

 

标签：listData,微信,练习,list,笔记,item,initData,text,setData
From： https://www.cnblogs.com/im18620660608/p/17121509.html

相关文章

  • 数据结构练习
    题单https://www.luogu.com.cn/training/282126#problems P3372线段树1 区间加，区间和#include<bits/stdc++.h>usingnamespacestd;typedeflonglongll;int......
  • 读Java实战（第二版）笔记10_函数式编程的技巧
    1. 设计原则1.1. 将所有你愿意接受的作为参数的函数可能带来的副作用以文档的方式记录下来1.2. 最理想的情况下你接收的函数参数应该没有任何副作用1.3. 延迟数据......
  • 【学习笔记】数列特征方程与特征根
    觉得有意思就稍微微写写,内容大多摘自某本书.1.不动点求数列通项对于函数\(f(x)\),若存在实数\(x_0\)使得\(f(x_0)=x_0\),则称\(x_0\)是函数\(f(x)\)的一......
  • VisionPro学习笔记（1）——软件介绍和基本使用
    前言自己使用visionPro已经有段时间了，最近也一直在研究其算子的理论，为了加深印象，计划将自己的学习笔记整理在博客园，当然其官方文档对如何使用及其各种算子都有详细的......
  • 谷粒商城day01笔记
    mybatis目录mybatis特性mybatis日志使用1.insert2.update3.select4.delete5.性能分析插件5.条件构造器lombok注解mp是一个MyBatis的增强工具，在MyBatis的基础......
  • 【量化读书笔记】【打开量化投资的大门】Ch.03 阿尔法模型：Qunat如何盈利？
    阿尔法模型非常规定义：在交易中关于买卖时机把握和持有头寸选择的技巧。阿尔法是指扣除市场基准回报之后的投资回报率。一、两类阿尔法模型：理论驱动型和数据驱动型1.1......
  • ctfshow---misc入门练习-----2023.2.14
    1,misc1打开就是flag2,misc2打开发现.png然后改后缀为.png即可得到flag3,misc3发现为.bpg的后缀，用bpgview.exe打开即可得到flag4，misc4下载了6个.txt文件，然后直接全......
  • PMP学习笔记《第一章 引论》
    什么是项目？项目是：为创造独特的产品、服务或成果而进行的临时性工作。项目的三大特性：临时性、独特性、渐进明细。1）项目的过程是临时的，但临时并不意味着时间短比如：修建体育场......
  • 2月14日笔记
    Pycharm的基本使用1.修改Pycharm主题File→settings→Apperance→Theme  2.修改字体大小File→settings→Editor→Font  3.切换解释器File→settings→Proj......
  • 第7天笔记
    第七天笔记日期对象日期对象是用于表示日期时间的一个对象，他里面包含对应设置日期时间及获取日期时间的方法日期对象的声明使用new关键字定义newDate()无参构造声明......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99