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

微信小程序练习笔记

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

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

 test.js

// 当我们在特定方法中创建对象或者定义变量给与初始值的时候，它是局部的，是无法被其他方法所使用的
// 初始数据赋值
var initData = "this is first line
 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 + "
" + listData.join("
")
    })
  },
  remove: function(e) {
    // 处于业务逻辑考虑，我们需要进行一个判断，防止误删
    if (listData != null) {
      // 对于listData进行数据处理使用的pop方法进行删除
      listData.pop("other line")
      // 通过setData方法进行赋值操作，this表示当前对象
      this.setData({
        text: initData + "
" + listData.join("
")
      })
    } else {
      this.setData({
        text: "没有新增的行了，所以删除全部行"
      })
    }
  }
})

 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>

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

 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>

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;
}

nv.js

// nv/nv.js
Page({


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (op) {
    console.log(op)
    // 使用我们的setData方法把我们传过来的参数初始加载到我们的页面
    this.setData({
      text:op.title
    })
  },

  
})

nv.wxml

<!-- 页面展示，提示怎么返回上一级页面（也就是我们的跳转过来前的页面） -->
<view class="v1">
  <text>这是我们从上一个页面传过来的参数【{{text}}】</text>
  <text>点击左上角可以返回上级界面此处可以不用设置跳转</text>
</view>

nv.wxss

.v1{
  color: red;
  text-align: center;
  border: 1px solid red;
  margin-top: 500rpx
}

re.js

// re/re.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      text:options.title
    })
  }
})

re.wxml

<!--re/re.wxml-->
<view class="v1">
  <text>这是我们从跳转页面传过来的参数【{{text}}】</text>
  <view>
    <text>改变跳转方式，我们从此页面无法点击左上角进行返回</text>
    <navigator url="/index/index" open-type="redirect">返回上级页面</navigator>
  </view>
</view>

re.wxss

.v1{
  color:blue;
  text-align: center;
  border: 1px solid blue;
  margin-top: 400rpx
}

 全部代码

配置

{
  "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/board.js
Page({

  /**
   * 页面的初始数据
   */
data: {
    imgUrls: [
      '/image/背景.jpg',
      '/image/国旗.jpg',
      '/image/二次元4.1.jpg'
     
    ],
    indicatorDots: true,
    interval: 2000,
    duration: 2000,
    indicatorColor: 'rgba(96,96,96,.3)',
    indicatorActiveColor: '#FF8C00',

    boards:[
      { key: 'in_theaters', name: '正在热映' },
      { key: 'coming_soon', name: '即将上映' },
      { key: 'top250', name: 'T0P250' },
      { key: 'us_box', name: '北美票房榜' },

    ]



  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

<!--board/board.wxml-->
<view class="head">
<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:for-item='it'>
    <swiper-item>
        <image src="{{it}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

  <view class="header">
    <text class="title">豆瓣电影榜单</text>
    <text class="de">豆瓣出品 仅供娱乐</text>
  </view>
  <view class="body">
    <scroll-view scroll-y="true" height="100%">
      <block wx:for="{{boards}}">
        <navigator url="../list/list?type={{item.key}}&title={{item.name}}">
          <view class="board">
            <view class="board-info">
              <text class="board-name">{{item.name}}</text> 
              <image class="board-img" src="/image/arrowright.png"></image>
            </view>
          </view>
        </navigator> 
      </block>
    </scroll-view>
  </view>
</view>

/* board/board.wxss */

.head{
line-height: 1;
}
.body{
  padding-left: 30rpx;
  padding-right: 30rpx;
  flex: 1;
  overflow: auto;
}
.header{
  padding: 40rpx 80rpx 20rpx;
}
.title{
  display: block;
  font-size: 50rpx;
}
.de{
  display: block;
  margin-top: 30rpx;
  color: #888;
  font-size: 28rpx;
}
.board{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background-color: #FBF9FE;
  overflow: hidden;
  border-radius: 4rpx;
  cursor: pointer;

}
.board-info{
  display: flex;
  padding: 40rpx;
  align-items: center;
  flex-direction: row;
}
.board-name{
  flex:1；
}
.board-img{
  width:32rpx;
  height:32rpx;
}

跳转页面

// index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      imgUrls:[
        '/image/ccq.png',
        'https://i.cnblogs.com/EditGalleries.aspx?catid=1538321',
        'https://www.cnblogs.com/cainiao-chuanqi/gallery/image/258134.html',
        'https://www.cnblogs.com/cainiao-chuanqi/gallery/image/258137.html',
        'https://i.cnblogs.com/EditGalleries.aspx?catid=1532380'

      ],
      indicatorDots:true,
      interval:2000,
      duration:2000,
      indicatorColor:'rgba(96,96,96,.3)',
      indicatorActiveColor:'#FF8C00'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

<!-- 第二步创建跳转页面一（也就是我们的首页） -->
<view class="btn-area">



<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:for-item='it'>
    <swiper-item>
        <image src="{{it}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>


<!-- url指定我们的跳转页面，对应的使用？占位符的方式带了一个参数title -->
<!-- 使用hover-class属性增加了我们的点击样式改变了点击颜色 -->
<view class="nv1">
  <navigator  url="/nv/nv?title=nv" hover-class="nv-hover">
    跳转到nv页面
  </navigator>
  </view>
  <view class="re1">
    <navigator url="/re/re?title=re" hover-class="re-hover" open-type="redirect">
    跳转到re页面
    </navigator>
  </view>
</view>

/* 添加我们的点击样式 */



.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;
}

List电影列表

// list/list.js
Page({
  data:{
    list:[],
    loading:false,
    title:"正在加载中。。。"
  },
  onLoad:function(options){
    const apiUrl = "https://douban.uieee.com/v2/movie/" + options.type
    const _this = this
    wx.request({
      url: apiUrl,
      header:{
        'Content-Type':'json'
      },
      success:function(res){
        _this.setData({
          list:res.data.subjects,
          title:res.data.title,
          loading:false
        })
      }
    })
  }
})

<loading hidden="{{!loading}}">
  加载中，请稍等。。。
</loading>
<view class="header">
  <text>{{title}}</text>
</view>
<view class="list">
  <navigator wx:for="{{list}}" url="../item/item?id={{item.id}}">
    <view class="list-item">
    
    <div id="rights">
      <image src="{{item.images.small}}"></image>
    </div>

      <view class="info">
      <div id="zhong1">
        <text>{{item.original_title}} ( {{item.year}} )</text>
      </div>
       <div id="zhong2">
        <span>导演：
          <block wx:for = "{{item.directors}}">
            {{item.name}}
          </block>
        </span>
        </div>

      </view>

      <view class="rating">
        <text>{{item.rating.average}}</text>
      </view>
    </view>
  </navigator>
</view>




<!-- <loading hidden="{{!loading}}">
  加载中，请稍等。。。
</loading>
<view class="header">
  <text></text>
</view>
<view class="list">
  <navigator url="../item/item?id={{item.id}}">
    <view class="list-item">
      <image src="/image/二次元4.1.jpg"></image>
      <view class="info">
        <text>{{item.original_title}} (红红火火恍恍惚惚)</text>
        <span>导演：
          <block >
           啦啦啦
          </block>
        </span>
      </view>
      <view class="rating">
        <text>9</text>
      </view>
    </view>
  </navigator>
</view> -->

.header{
text-align: center;
font-size: 60rpx;
background-color:     rgb(170, 16, 11);
border-radius: 80rpx;
margin-bottom:30rpx; 
color: white;
}

.list-item image{
  float: left;
  width:400rpx;
  height:550rpx;
  margin-left: 37rpx;
  margin-bottom: -200rpx;
  box-shadow: 0rpx 0rpx 20rpx #696969;

}

.list text{
  padding: 500rpx
}

#zhong1{
background-color:#DCDCDC;
float: right;
margin-left: -450rpx;
position: relative; 
top:230rpx; 
font-size: 45rpx;
border-radius: 50rpx;
}

#zhong2{
width:400rpx;
height:550rpx;
/* background-color: bisque; */
/* float: left; */
position: relative; 
top:250rpx;

}

.rating text{ 
 position:relative; 
 top:-500rpx;
 left: -50rpx;
 color: red; 
 font-size: 200rpx;
/* box-shadow: 0rpx 0rpx 10rpx #696969; */
}

电影详情

// 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- 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
}