微信小程序小Demo

時間  2019-11-10
標籤 微信 程序 demo 简体版
原文   原文鏈接

微信小程序小Demo

調用API，輪播圖，排行榜，底部BabTar的使用。。。json

board

// board/board.js
Page({

  /**
   * 頁面的初始數據
   */
  // 能夠是網絡路徑圖片，也能夠引入本地圖片地址
  data: {
    imgUrls: [
      '/image/111.jpg',
      '/image/333.jpg',
      '/image/222.jpg'
      // '/image/444.jpg'

    ],
    // 設置相關swiper組件的屬性值
    indicatorDots: true,
    interval: 2000,
    duration: 2000,
    indicatorColor: 'rgba(96,96,96,.3)',
    indicatorActiveColor: '#FF8C00',

    boards: [
      { key: 'in_theaters', name: '漢語詞典 ' },
    ],

    boards2: [
      { key: 'coming_soon', name: '成語大全 ' },
    ],

    boards3: [
      { key: 'coming_soon', name: '新華字典 ' },
    ]

  },


  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})
board.js 
<!--board/board.wxml-->
<!-- indicatorDots：是否顯示面板指示點 -->
<!-- autoplay：是否自動播放 -->
<!--interval：圖片循環時間設置  -->
<!-- duration：動畫滑動時間 -->
<!-- 這裏的屬性值既能夠在js中初始化數據賦值，也能夠直接寫在頁面屬性值中 -->
<view class="head">
<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
  <!-- wx:for 根咱們Java中的for是同樣的，進行循環遍歷的，這裏帶入的是咱們從js傳過來的圖片數組 -->
  <block wx:for="{{imgUrls}}" wx:for-item='it'>
  <!-- 注意事項：wx：for渲染咱們js中的圖片數組，item默認寫法，獲取咱們的圖片數組中的圖片，可經過增長wx:for-item="it"來改變默認的item名 -->
    <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>
    
      <block wx:for="{{boards2}}">
        <navigator url="../list2/list2?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>
      
        <block wx:for="{{boards3}}">
        <navigator url="../list3/list3?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>
<!--           // 第一步：先在咱們的pages中增長咱們須要進行切換的頁面
          // 第二步：在咱們的app.json全局配置文件中增長tabBar欄
          // 注意：咱們的圖片引用路徑以及名稱須要正確匹配
          //先要在咱們的pages中建立對應的tab欄頁面  -->
    </scroll-view>
  </view>
</view>
board.wxml 
/* board/board.wxss */

.head{
line-height: 1;
}
.head swiper{
  margin-top: 20rpx;
}

.body{
  padding-left: 30rpx;
  padding-right: 30rpx;
  flex: 1;
  overflow: auto;
  background-color:     #DEB887;
  border-radius: 25rpx;
}
.header{
  margin-top: 20rpx;
  padding: 40rpx 80rpx 20rpx;
  background-color:     #DCDCDC;
  border-radius: 50rpx;
  margin-bottom: 27rpx;
}
.title{
  display: block;
  font-size: 50rpx;
  text-align: center;
}
.de{
  display: block;
  margin-top: 30rpx;
  color: #888;
  font-size: 28rpx;
  text-align: center;
}
.board{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  background-color:    #F0FFF0 ;
  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;
}
board.wxss

效果圖

list

// 設置初始數組爲空
var initData = [];
Page({
  data: {
    search: "請輸入一個詞:",
    // 顯示在頁面的數組數據
    listData: []
  },
  search: function (e) {
    // console.log(e.detail.value)
    // 建立咱們的url
    const apiUrl = "https://api.jisuapi.com/cidian/word?appkey=yourappkey&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
          })
        }
      }
    })
  }

     

})
list.js 
<!-- 由於是搜索頁，因此須要搜索框 -->
<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.content}}</text>
  <!-- <text>例子：{{item.example}}</text> -->
  <text>出自：{{item.comefrom}}</text>
  <text>近義詞：{{item.thesaurus}}</text>
  <text>反義詞：{{item.fan}}</text>
  <!-- 在此進行了循環來獲取咱們的解釋 -->
 
  <block wx:for="{{item.explain}}">
    <text>例子：{{item.example}}</text>
  </block>
  
  </block>
</view>
list.wxml 
.page-headert{
  /* 文本居中 */
  text-align: center;
  /* 添加邊框 */
  border: 3rpx solid beige;
  
}
/* 對於查到數據進行樣式控制 */
.view-text text{
  color: darkgray;
  margin: 0 20rpx 0;
  display: block;
  line-height: 50rpx
  
}
/*標題的自定義格式*/
.page-headert  {
    border: 1px solid         #696969;
    border-left-width: 5px;
    border-radius: 10px;
    border-right-width: 5px;

    background-color: #FBF9F9;
    background-position: left center;
    padding: 3px 5px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

/*編輯 收藏*/
.view-text text{
    background-color: #51C332;
    border-radius: 3px;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px #8B0000;
    padding: 3.7px 13px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 3px;
    box-shadow: black 0px 2px 8px;
}
list.wxss

list2

// 設置初始數組爲空
var initData = [];
Page({
  data: {
    search: "請輸入一個成語：",
    // 顯示在頁面的數組數據
    listData: []
  },
  search: function (e) {
    // console.log(e.detail.value)
    // 建立咱們的url
    const apiUrl = "https://api.jisuapi.com/chengyu/detail?appkey=yourappkey&chengyu=" + 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
          })
        }
      }
    })
  }
})
list2.js 
.page-headert{
  /* 文本居中 */
  text-align: center;
  /* 添加邊框 */
  border: 3rpx solid beige
}
/* 對於查到數據進行樣式控制 */
.view-text text{
  color: darkgray;
  margin: 0 20rpx 0;
  display: block;
  line-height: 50rpx
}
.page-headert  {
    border: 1px solid #696969;
    border-left-width: 5px;
    border-radius: 10px;
    border-right-width: 5px;
    background-color: #FBF9F9;
    background-position: left center;
    padding: 3px 5px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.view-text text{
    background-color: #51C332;
    border-radius: 3px;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px #8B0000;
    padding: 3.7px 13px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 3px;
    box-shadow: black 0px 2px 8px;
}
list2.wxss 
<!-- 由於是搜索頁，因此須要搜索框 -->
<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.pronounce}}</text>
  <text>解釋：{{item.content}}</text>
  <text>出自：{{item.comefrom}}</text>
  <text>反義詞：{{item.antonym}}</text>
  <text>近義詞：{{item.thesaurus}}</text>
  <!-- 在此進行了循環來獲取咱們的解釋 -->
 
  <block wx:for="{{item.explain}}">
    <text>例子：{{item.example}}</text>
  </block>
  
  </block>
</view>
list2.wxml

list3

// 設置初始數組爲空
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
          })
        }
      }
    })
  }
})
list3.js 
.page-headert{
  /* 文本居中 */
  text-align: center;
  /* 添加邊框 */
  border: 3rpx solid beige
}
/* 對於查到數據進行樣式控制 */
.view-text text{
  color: darkgray;
  margin: 0 20rpx 0;
  display: block;
  line-height: 50rpx
}
.page-headert  {
    border: 1px solid #696969;
    border-left-width: 5px;
    border-radius: 10px;
    border-right-width: 5px;
    background-color: #FBF9F9;
    background-position: left center;
    padding: 3px 5px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.view-text text{
    background-color: #51C332;
    border-radius: 3px;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px #8B0000;
    padding: 3.7px 13px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 3px;
    box-shadow: black 0px 2px 8px;
}
list3.wxss 
<!-- 由於是搜索頁，因此須要搜索框 -->
<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>
list3.wxml

serach

// 設置初始數組爲空
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
          })
        }
      }
    })
  }
})
serach.js 
.page-headert{
  /* 文本居中 */
  text-align: center;
  /* 添加邊框 */
  border: 3rpx solid beige
}
/* 對於查到數據進行樣式控制 */
.view-text text{
  color: darkgray;
  margin: 0 20rpx 0;
  display: block;
  line-height: 50rpx
}
View Code 
<!-- 由於是搜索頁，因此須要搜索框 -->
<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>
serach.wxml

utils

{
  "pages": [
    "board/board",
    "profile/profile",
    "serach/serach",
    "list/list",
   "list2/list2",
   "list3/list3",
    "index/index"
  ],
  "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": "中華文字",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}
app.json
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程