一個簡易的小程序架構，如下圖所示：

一.底部tabBar實現

app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/testlist/testlist",
    "pages/picturedetails/details"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff9000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#000000",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "color": "#6e6d6b",
        "selectedColor": "#000000",
        "backgroundColor": "#fff",
        "iconPath": "images/tab/cash-manage-false.png",
        "selectedIconPath": "images/tab/cash-manage-true.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        "iconPath": "images/tab/edu-manage-false.png",
        "selectedIconPath": "images/tab/edu-manage-true.png"
      },
      {
        "pagePath": "pages/testlist/testlist",
        "text": "測試",
        "iconPath": "images/tab/my-false.png",
        "selectedIconPath": "images/tab/my-true.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  
  "debug": true

}

上面代碼配置tabBar,就是底部tab切換的各項配置。

我們簡單說一下這個配置各個項的含義:

pages字段 —— 用於描述當前小程序所有頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這裏的。
其他配置項細節可以參考文檔https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

在微信小程序我們是通過關鍵字swiper實現圖片輪播，那麼接下來我們通過具體的代碼實現，實現效果圖如下所示：

swiper實現輪播代碼1如下：

.wxml代碼:



 <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}"  bindtap="tapBanner" class="slide-image" height="350" />
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

[點擊並拖拽以移動]

.js代碼如下：

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

以上代碼就可以實現我們圖1效果，詳細細節請查看https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

自定義swiper輪播代碼如下：

.wxml文件代碼如下：

    <view class="swiper-container">
    <swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange" >
      <block wx:for="{{imgUrls}}" wx:key="id">
        <swiper-item>
          <image bindtap="tapBanner" src="{{item}}" class="slide-image" width="750rpx" height="562.5rpx" />
        </swiper-item>
      </block>
    </swiper>

    <view class="dots">
      <block wx:for="{{imgUrls}}" wx:key="unique">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
    </view>
  </view>

wxss代碼如下：

.container {
  background-color: #F2f2f2;
  min-height: 100%;
}
.swiper-container{
  width: 750rpx;
  position: relative;  
}
.swiper_box {
  width: 100%;
  height:562.5rpx;
}

swiper-item image {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  height:562.5rpx;
}
.swiper-container .dots{  
  position: absolute;  
  left: 0;  
  right: 0;  
  bottom: 20rpx;  
  display: flex;  
  justify-content: center;  
}  
.swiper-container .dots .dot{  
  margin: 0 8rpx;  
  width: 14rpx;  
  height: 14rpx;  
  background: #fff;  
  border-radius: 50%;  
  transition: all .6s;  
  opacity: .5;
}  
.swiper-container .dots .dot.active{  
  width: 14rpx;  
  opacity: 1;
}

在.js文件中綁定相應的事件及賦值，具體代碼如下：

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {

     imgUrls: [
       'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
       'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
       'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
       'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
       'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
       "http://img.tuku.cn/file_thumb/201506/m2015060317184193.jpg"
     ],
     indicatorDots: true,
     autoplay: true,
     interval: 5000,
     duration: 1000,
     swiperCurrent: 0
     

  },
  onShareAppMessage: function () {
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  swiperchange: function (e) {
    this.setData({

      swiperCurrent: e.detail.current
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  },
  tapBanner: function (e) {
    wx.showToast({
      title: 'sdfsd',
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
    if (e.currentTarget.dataset.id != 0) {

      // wx.navigateTo({
      //   // url: "/pages/goods-details/index"
      // })
    }
  }
})

至此，我們實現第二個swiper輪播就完成了。

三.實現列表展示

談到列表我們必然會想到 "模板（template）"這個字樣。那麼什麼是模版呢? 微信小程序是這樣的定義模版： WXML提供模板（template），可以在模板中定義代碼片段，然後在不同的地方調用。具體詳細請查看https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html。那麼我們接下來就實現一下列表展示，效果圖入下：

1.定義一個模版template.wxml文件，代碼如下

<template name="msgItem">

 <view class="gooods" wx:for="{{list}}" wx:key="{{index}}">

    <view class="img-box">
      <image src="{{imgsrc}}" class="imgs" bindtap='clickedEvent' />
    </view>
    <view class="goods-title">標題：{{msg}}</view>
    <view class="goods-time">時間 ：{{time}}</view>
  </view>

</template>

2.模版樣式設置template.wxss代碼如下


page{
    /*height: 100%;*/
}
.container{
    justify-content:initial;
}
.img-box {
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-right: 20rpx;
  background-color: #fff;
}

.goods-title {
  font-size: 28rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 20px;
  padding: 10rpx 20rpx 5rpx 0;
}

.goods-time {
  font-size: 28rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 20px;
  padding: 10rpx 20rpx 5rpx 0;
}

那麼模版定義完成，接下來我們要做的是如何引用這個模版,我們需要建立一個testList.wxml文件，具體代碼如下：

1.testList.wxml文件代碼如下：

<import src="../template/template.wxml" />



<view class="container">
  <template is="msgItem" data="{{...item}}" />
</view>

2.testList.js文件代碼如下：

//獲取應用實例
var app = getApp();

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: ""+new Date(),

      list: [1, 2, 3, 4, 5,],
      imgsrc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=494333513,2366496562&fm=200&gp=0.jpg"
    }
  },

  //事件
  clickedEvent: function () {
    // wx.showToast({
    //   title: '點擊事件',
    //   icon: '',
    //   image: '',
    //   duration: 1000,
    //   mask: true,
    //   success: function(res) {},
    //   fail: function(res) {},
    //   complete: function(res) {},
    // })

    wx.navigateTo({
      url: '/pages/picturedetails/details',
    })
  }
  ,
  onShareAppMessage: function () {
    return {
      title: "標題",
      path: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=494333513,2366496562&fm=200&gp=0.jpg",
      success: function (res) {
        // 轉發成功
      },
      fail: function (res) {
        // 轉發失敗
      }
    }
  },
  

})

3.testList.wxss樣式設置如下代碼：

/**index.wxss**/
@import "../template/template.wxss";

page {
  min-height: 100%;
  background: #fff;
}

.container {
  background-color: #fff;
  min-height: 100%;
}

.pos-fiexd{
  position: fixed;
  bottom: 0;
  left: 0;
  top: 0;
}

4.testList.json文件配置導航標題，代碼如下

{
  "navigationBarTitleText": "test"
}

到此！我們的列表功能也就實現了，如上述效果圖。

定義模版詳情請點擊查看 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

網絡請求驗證

App({
  onLaunch: function () {
 
    // request: function () {
      var _this = this;
      wx.request({
        url: 'https://www.icerain.top/index.php',
        data: {
          a: 'Please',
          b: 'Say',
          c: 'Post'
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
        dataType: 'json',
        responseType: 'text',
        success: function (res) {
          console.log(res);
    

        },
      })
    },

  
  globalData:{
    userInfo: null,
    subDomain: "hh", // 如果你的域名是： https://noob.icerain.top/abcd 那麼這裏只要填寫 abcd
    version: "2.0",
    shareProfile: '百款精品商品，總有一款適合您' // 首頁轉發的時候話術
  }
  
  
})

請求測試結果

其他參考

1.事件請查看https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

2.數據綁定請查看https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

4.條件判斷請查看https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html

5.分享請查看https://developers.weixin.qq.com/miniprogram/dev/api/share.html

6.頁面路由請查看https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

微信小程序項目架構搭建及實現swiper輪播，底部tabBar切換，頁面跳轉，分享等功能

一個簡易的小程序架構，如下圖所示：

一.底部tabBar實現

二.Banner輪播實現(swiper)

swiper實現輪播代碼1如下：

自定義swiper輪播代碼如下：

三.實現列表展示

1.定義一個模版template.wxml文件，代碼如下

2.模版樣式設置template.wxss代碼如下

那麼模版定義完成，接下來我們要做的是如何引用這個模版,我們需要建立一個testList.wxml文件，具體代碼如下：

1.testList.wxml文件代碼如下：

2.testList.js文件代碼如下：

3.testList.wxss樣式設置如下代碼：

4.testList.json文件配置導航標題，代碼如下

網絡請求驗證

請求測試結果

其他參考

小程序官網請點擊https://developers.weixin.qq.com/miniprogram/dev/

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

微信小程序項目架構搭建及實現swiper輪播，底部tabBar切換，頁面跳轉，分享等功能

仿D球首頁挖礦動畫

Android Studio 配置：自定義頭部代碼註釋及添加模版後沒有效果

Vue實現多級聯動(扁平數組轉樹形數組)cascader

Compilation failed; see the compiler error output for details

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結