微信小程序練習筆記（更新中。。。）

微信小程序練習筆記

微信小程序的練習筆記，用來整理思路的，文檔持續更新中。。。

案例一：實現行的刪除和增加操作

 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相當於我們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-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
}