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

 

 

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

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

 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

 

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

 index.wxml

 

index.wxss

 

nv.js

 

nv.wxml

 

nv.wxss

 

re.js

 

re.wxml

 

re.wxss

 

 全部代码

 

配置

{
  "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"
}

轮播图

 

 

 

跳转页面

 

 

 

List电影列表

 

 

 

电影详情

// list/list.js
Page({
  data: {
    list: [],
    loading: false,
    title: "正在加载中。。。"
  },
  onLoad: 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