微信小程式零基礎入門踩坑之路

二十jiu歲仲夏發表於2018-04-02

簡介

小程式是一種新的開放能力，開發者可以快速地開發一個小程式。小程式可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

本人是一名忠實的Android研發,沒有出過軌,對於css html js等僅僅是一知半解,這是在業餘之際覺得想接觸一下web,其實剛出來小程式那時候就嘗試過,不過由於工作較忙,中途放棄了,如今小程式發展的還是挺快的,還是特別想學下前端知識.一是總結,二是分享給有需要的人,節省時間,少百度一些.

不說廢話,直接說有用的,開始吧.

申請帳號

註冊:小程式註冊(不能是微信開放平臺的郵箱)
登入後, 我們可以在選單 “設定”-“開發設定” 看到小程式的 AppID 。

安裝開發工具

前往開發者工具下載頁面，根據自己的作業系統下載對應的安裝包進行安裝.
開啟小程式開發者工具，用微信掃碼登入開發者工具
選擇小程式專案型別
填入你申請的APPID 會自動生成一個QuickStart Project 直接進入即可看到一個簡單的小程式
看看專案結構挺清晰的.

至此,第一個小程式已經呈現在你面前,開發工具頂部欄有預覽,你可以用手機掃描體驗一下.

編輯器選擇

經過一頓百度和前端的朋友諮詢,發現了目前網上流行的幾款: 微信開發工具、VSCode、Subline、webstom......說多無益,我們就選朋友推薦的VSCode 其他的沒用過,暫時不進行對比了.

當然了我們是進行微信小程式開發,而且是沒有前端基礎的,所以建議先在微信開發工具中進行開發
如果喜歡其他編輯器也可以下載 VScode 裡面有外掛商店,提供各種外掛,挺好的,主要是免費.

UI元件庫使用

這裡說明下為什麼要有使用這個,正所謂站在前人的肩膀上,能夠看的更遠,看到的東西更多,省去了你在造輪子了,

為了更快更好的開放一款自己的小程式,對於UI有強烈要求的就要用到別人寫好的元件庫了,不為什麼,因為我不懂前端,讓我自己寫要學基礎好幾天,不過話說回來,基礎還是要學的,這裡只是想最快速度瞭解前端和小程式開發整體

原生元件庫微信本身提供的一套基礎元件官方教程有詳細文件
WeUI 同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計
MinUI 第三方基於規範的小程式元件庫，簡潔、易用、工具化,並支援wepy和元件化方案等
ZanUI 第三方的一個顏值高、好用、易擴充套件的微信小程式 UI 庫

立項

如果你有其他語言的開發基礎,那麼可以直接進行開發,別怕,我們邊做邊學,我用了一個星期搞定,你也可以3天或者1天.下面拿我的練習專案為例《學安卓》資料來源鴻洋大神的網站API 《玩安卓》用於蒐集安卓技術文章及眾多實用工具的,很方便,詳細API可以檢視玩安卓的API文件

下面我們就開始第一個頁面的開發這是效果圖功能很簡單,banner+列表

頁面的生命週期

Page({
  /**
   * 頁面的初始資料
   */
  data: {},
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {},
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {},
  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {},
  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {},
  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {},
  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {},
  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {}
})
複製程式碼

首頁

1.首頁banner

http://www.wanandroid.com/banner/json

方法：GET
引數：無
複製程式碼

可直接點選檢視示例：www.wanandroid.com/banner/json

2.首頁文章列表

http://www.wanandroid.com/article/list/0/json

方法：GET
引數：頁碼，拼接在連線中，從0開始。
複製程式碼

可直接點選檢視示例：www.wanandroid.com/article/lis…。

注意：頁碼從0開始，拼接在連結上。

其中有兩個易混淆的欄位:

"superChapterId": 153, 
"superChapterName": "framework", // 一級分類的名稱
複製程式碼

superChapterId其實不是一級分類id，因為要拼接跳轉url，內容實際都掛在二級分類下，所以該id實際上是一級分類的第一個子類目的id，拼接後故可正常跳轉。

附上index.wxml參考程式碼:

<view class="swiper-container">
  <!--banner輪播元件-->
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item>
        <image src="{{item.imagePath}}" mode="{{item.mode}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>
<!--banner文章列表元件-->
<view class="container artical-list">
  <block wx:for-items="{{articals}}" wx:for-item="artical" wx:key="*this">
    <view class="artical-item" bindtap='goToArticalDetail' data-index="{{index}}">
      <text class='artical-item-title'>{{artical.title}}</text>
      <wxc-flex class="warp" main="{{item_content_dir}}">
        <wxc-flex class="wrap" dir="{{dir}}">
          <view>
            <text class='artical-item-desc'>作者: </text>
            <text class='artical-item-desc_content'>{{artical.author}}</text>
          </view>
          <view class='category'>
            <text class='artical-item-desc'>分類: </text>
            <text class='artical-item-desc_content'>{{artical.superChapterName}}/{{artical.chapterName}}</text>
          </view>
          <view class='category'>
            <text class='artical-item-desc'>時間: </text>
            <text class='artical-item-desc'>{{artical.niceDate}}</text>
          </view>
        </wxc-flex>
        <image src="{{likesrc}}" style="width: 28px; height: 28px;" mode="{{mode}}" bindtap='onClickAddLike' ></image>
      </wxc-flex>

    </view>

  </block>
</view>
<!--上拉載入更多loading元件-->
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
  <view class="weui-loading"></view>
  <view class="weui-loadmore__tips">正在載入</view>
</view>
<!--上拉載入更多無資料提示-->
<view hidden="{{loadingMoreHidden ? true : false}}" class="no-more-photos">沒有更多啦</view>
複製程式碼

附上index.js參考程式碼:

data裡是資料繫結的關鍵,即佈局中定義的變數和這裡都是對應的,當這裡的值被賦值或變更,影響頁面更新.
使用方法變數名:預設值如:imgUrls: []
imgUrls:[] 為banner的陣列來源,在佈局wxml中可以找到在wxml中一定是{{}}雙層大括號才可以.
block為塊具體檢視文件介紹
wx:for為迴圈列表對應的資料來源在小程式中即為陣列物件
wx:key 為每個item的唯一標識
item變數代指為迴圈列表預設的其中的元素物件也可以指定名稱如:wx:for-item="{{banner_item}}"

//獲取應用例項
var app = getApp()
Page({
  data: {
    imgUrls: [],
    mode: 'aspectFill',
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    articals: [],
    curPage: 1,
    perPageSize: 20,
    pageCount: 59,
    isHideLoadMore: false,
    loadingMoreHidden: true,
    dir:'top',
    item_content_dir:'between',
    likesrc:'../images/index/like_normal.png'
  },
  //進入文章詳細頁面
  goToArticalDetail: function (e) {
    var that = this
    var item_index = parseInt(e.currentTarget.dataset.index)
    console.log("item_index = " + item_index)
    wx.navigateTo({
      url: '../index-detail/index-detail?title=' + that.data.articals[item_index].title + '&link=' + that.data.articals[item_index].link
    })
  },
  onLoad: function () {
    console.log('onLoad')
    //顯示標題菊花
    wx.showNavigationBarLoading()
    //獲取輪播圖
    this.getBanners()
    //預設載入第0頁
    var curPage = 0
    //獲取文章列表
    this.getArticals(curPage)
  },
  onPullDownRefresh: function () {
    this.data.curPage = 0
    this.getArticals(0)
    console.log('下拉重新整理')
  },
  onReachBottom: function () {
    console.log('載入更多')
    if (!this.data.loadingMoreHidden) {

    } else {
      this.getArticals(this.data.curPage)
    }
    this.setData({
      loadingMoreHidden: true
    })

  },
  showAddItem: function () {
    this.setData({
      addVlue: !this.data.addVlue
    })

  },
  getArticals: function (artical_pageindex) {
    var that = this
    wx.request({
      url: 'http://www.wanandroid.com/article/list/' + artical_pageindex + '/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.hideNavigationBarLoading()
        that.setData({
          perPageSize: res.data.data.size,
          curPage: res.data.data.curPage,
          pageCount: res.data.data.pageCount
        })
        var articalsTemp = that.data.articals
        if (that.data.curPage == 1) {
          articalsTemp = []
        }
        var articals = res.data.data.datas
        if (articals.length < that.data.perPageSize) {
          console.log('沒有更多了')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: false
          })
        } else {
          console.log('有更多可載入')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: true,
            curPage: that.data.curPage + 1
          })
        }


      }
    })
  },
  getBanners: function () {
    var that = this
    wx.request({
      url: 'http://www.wanandroid.com/banner/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.stopPullDownRefresh()
        that.setData({
          imgUrls: res.data.data
        })
      }
    })
  },
  //新增文章到我的收藏
  onClickAddLike: function(){
    
  }

})
複製程式碼

附上index.wcss參考程式碼:

/**index.wxss**/
.container {
  background-color: #fff;
  min-height: 100%;
}
.swiper {
  width: 100%;
  height: 416rpx;
  background-color: #F2f2f2;
}
.swiper-item image{
    width: 100%;
    height: 416rpx;
}
.slide-image{
    width: 100%;
    height: 416rpx;
}
.no-more-photos {
  text-align: center;
  font-size: 24rpx;
  padding-bottom: 48rpx;
  color: #999;
}
.artical-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.artical-item{
  border: lightgrey;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  min-height: 48px;
  width: 100%;
  padding: 10px;
  margin: 10rpx;
}
.artical-subtitle{
  display: flex;
  flex-wrap: wrap row;
  margin-top: 30rpx;
}
.label {
    margin-right: 20rpx;
}
.artical-item-title{
  font-size: 28rpx;
  color: #333333;
  font-weight:bold; 
}
.artical-item-desc{
  font-size: 10px;
  color: #ADADAD;
}
.artical-item-desc_content{
  font-size: 22rpx;
  color: #666666;
}
/* .category{

  margin-left: 8px;
} */
/*  載入更多   */
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}
複製程式碼

附上index.json參考程式碼:

說明: 我專案中的UI元件庫引用了MinUI和WeUI,具體使用參照

{
  "navigationBarTitleText": "玩安卓",
  "usingComponents": {
    "wxc-toast": "../../dist/packages/@minui/wxc-toast/dist/index",
    "wxc-icon": "../../dist/packages/@minui/wxc-icon/dist/index",
    "wxc-label": "../../dist/packages/@minui/wxc-label/dist/index",
    "wxc-flex": "../../dist/packages/@minui/wxc-flex/dist/index"
  }
}

複製程式碼

將下載的weui.wxss檔案放至專案的根目錄下在app.wxss檔案中 @import 'weui.wxss'即可使用了.

底部tabBar

在app.json中配置即可

"tabBar": {
    "selectedColor": "#69C3AA",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "pages/images/nav/home_normal.png",
        "selectedIconPath": "pages/images/nav/home_select.png"
      },
      {
        "pagePath": "pages/nav/nav",
        "text": "導航",
        "iconPath": "pages/images/nav/nav_normal.png",
        "selectedIconPath": "pages/images/nav/nav_select.png"
      },
      {
        "pagePath": "pages/project/project",
        "text": "專案",
        "iconPath": "pages/images/nav/project_normal.png",
        "selectedIconPath": "pages/images/nav/project_select.png"
      },
      {
        "pagePath": "pages/hierarchy/hierarchy",
        "text": "體系",
        "iconPath": "pages/images/nav/tool_normal.png",
        "selectedIconPath": "pages/images/nav/tool_select.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我",
        "iconPath": "pages/images/nav/mine_normal.png",
        "selectedIconPath": "pages/images/nav/mine_select.png"
      }
    ]
  }
複製程式碼

網路請求

示例程式碼

說明:

url:為請求介面
data:請求引數
method: 請求方式
header:請求頭
success:function(res){}請求回撥函式一般在這裡進行資料繫結賦值達到頁面更新
that.setData{()} 賦值data中的變數

wx.request({
      url: 'http://www.wanandroid.com/banner/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.stopPullDownRefresh()
        that.setData({
          imgUrls: res.data.data
        })
      }
})
複製程式碼

頁面跳轉及引數傳遞

示例程式碼

說明:

item_index:e.currentTarget.dataset.index 獲取item下標索引對應wxml中 data-index="{{index}}"

wx.navigateTo({})頁面跳轉

url:'path?xxx=xxx&xxx=xxx....' 頁面路徑+引數拼接

options.xxx 引數接收在onload中

//進入文章詳細頁面
  goToArticalDetail: function (e) {
    var that = this
    var item_index = parseInt(e.currentTarget.dataset.index)
    console.log("item_index = " + item_index)
    wx.navigateTo({
      url: '../index-detail/index-detail?title=' + that.data.articals[item_index].title + '&link=' + that.data.articals[item_index].link
    })
  },
複製程式碼

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var that = this
    var title = options.title
    var link = options.link
    that.setData({
      artical_title: title,
      artical_link : link
    })
    //動態設定頁面標題---文章標題
    wx.setNavigationBarTitle({
      title: that.data.artical_title
    })
  },
複製程式碼

下拉重新整理/上拉載入更多

1.在app.json中加入開關只有開啟開關生命週期函式才會被呼叫

在這裡說明一個容易犯錯的就是建立page的時候會自動生成四個檔案,js檔案中也會自動生成模板程式碼生命週期函式都會自動生成,千萬不要自己去在寫一個否則不報錯也不觸發.

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#69C3AA",
    "navigationBarTitleText": "玩安卓",
    "navigationBarTextStyle": "white",
    <!--開啟下拉重新整理-->
    "enablePullDownRefresh": true,
    <!--開啟上拉載入更多-->
    "onReachBottomDistance": true,
    "backgroundColor": "#69C3AA"
  },
複製程式碼

onPullDownRefresh: function () {
    this.data.curPage = 0
    this.getArticals(0)
    console.log('下拉重新整理')
},
複製程式碼

onReachBottom: function () {
    console.log('上拉載入更多')
    if (!this.data.loadingMoreHidden) {

    } else {
      this.getArticals(this.data.curPage)
    }
    this.setData({
      loadingMoreHidden: true
    })
},
複製程式碼

2.主要的上拉載入邏輯控制在getArticals()f方法裡處理的我們慢慢分析

 getArticals: function (artical_pageindex) {
    var that = this
    <!--請求文章列表資料-->
    wx.request({
      url: 'http://www.wanandroid.com/article/list/' + artical_pageindex + '/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.hideNavigationBarLoading()
        that.setData({
          perPageSize: res.data.data.size,
          curPage: res.data.data.curPage,
          pageCount: res.data.data.pageCount
        })
        <!--上拉載入更多的關鍵處理-->
        <!--定義一個新的文章物件陣列 用於裝載拼接所有頁的資料-->
        var articalsTemp = that.data.articals
        <!--當前如果處於第一頁 那麼清空這個物件陣列 只裝載第一頁資料即可-->
        if (that.data.curPage == 1) {
          articalsTemp = []
        }
        <!--定義一個新的文章物件陣列 賦值於請求返回對應頁碼的文章資料-->
        var articals = res.data.data.datas
        <!--判斷,如果返回的某頁的資料長度小於每頁的資料長度 說明當前載入的頁是最後一頁了-->
        if (articals.length < that.data.perPageSize) {
          console.log('沒有更多了')
          that.setData({
            <!--contcat 意思是向articalsTemp陣列中新增陣列 -->
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: false
          })
        } else {
        <!-否則 當前不是最後一頁,向articalsTemp陣列中新增陣列  -->
          console.log('有更多可載入')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: true,
             <!--當前頁碼增加1 依次類推-->
            curPage: that.data.curPage + 1
          })
        }
      }
    })
  },
複製程式碼

自定義元件

建立自定義元件與建立普通頁面類似也包含.js .json .wxml .wxcss四個檔案
修改.json檔案元件屬性

{
  "component": true,
  "usingComponents": {}
}
複製程式碼

編寫wantab.js 附上wantab.js原始碼

// dist/wantab.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    //標題列表
    tablist: {
      type: Array,
      value: []
    },
    currentTab: {
      type: Number,
      value: 0,
      observer: function (newVale, oldVal) {
        this.setData({
          currentTab: newVale
        })
      }

    },
    tabname: {
      type: String,
      value: ''
    },
    tabtype: {
      type: Number,
      value: ''
    }


  },

  /**
   * 元件的初始資料
   */
  data: {

  },

  /**
   * 元件的方法列表
   */
  methods: {
    onClickNavBar: function (e) {
      this.triggerEvent('changeTab', {
        currentNum: e.currentTarget.dataset.current
      })
    }
  }
})

複製程式碼

編寫wantab.wxml 附上wantab.wxml 模板程式碼

<!--dist/wantab.wxml-->
<!-- 自定義tab標籤元件-->
<!-- 標題列表-->
<scroll-view scroll-x="true" class="scroll-view-x" wx:if="{{!tabtype || tabtype==2}}">
  <view class="scroll-view-item" wx:for="{{tablist}}" wx:key="*this">
    <view class="{{currentTab==(index) ? 'on' : ''}}" bindtap="onClickNavBar" data-current="{{index}}">{{ !tabname ? item.name : item[tabname].name }}</view>
  </view>
</scroll-view>
<!--內容列表-->
<slot>
</slot>
複製程式碼

編寫wantab.wxcss 附上wantab.wxcss 元件樣式

/* dist/wantab.wxss */
.scroll-view-x{
  background-color: #fff;
  white-space: nowrap;
  position:fixed;
  z-index:10;
  top:0
}
.scroll-view-x .scroll-view-item{
  display:inline-block;
  margin:0 35rpx;
  line-height: 33px;
  cursor: pointer;
}
.on{
  border-bottom: 2px solid #69C3AA;
  color: #69C3AA
}
複製程式碼

以上就可以完成一個元件的定義了,下面貼出使用方法

{
  "navigationBarTitleText": "專案",
  "usingComponents": {
    "wantab":"../../dist/component/wantab/wantab"
  }
}
複製程式碼

使用方式與其他第三方的元件引入一致,在頁面的.json檔案中加入以上程式碼即可注意路徑根據專案而改變

效果圖展示

最後放上其他頁面的效果圖實現過程基本差不多剛接觸web 所以多做了些重複的工作,為了更熟悉使用這些元件和互動

完結

感謝閱讀,如有不對地方請見諒.

微信小程式從入坑到入門
2020-04-02
微信小程式
微信小程式踩坑記錄
2018-05-28
微信小程式
微信小程式踩坑指南【一】
2018-12-28
微信小程式
微信小程式BLE踩坑記錄
2018-08-31
微信小程式
微信小程式的踩坑與優化。
2019-01-16
微信小程式優化
微信小程式海報生成踩坑記
2018-09-23
微信小程式
微信小程式mpvue(沒朋友)踩坑指南
2018-04-24
微信小程式Vue
mpvue開發微信小程式踩坑筆記
2018-10-08
Vue微信小程式筆記
mpvue小程式以及微信直播踩坑總結
2018-09-03
Vue
微信小程式踩坑日記1——呼叫微信授權視窗
2019-07-24
微信小程式
微信小程式踩坑之獲取手機號
2021-06-17
微信小程式
入門微信小程式（一）
2018-08-01
微信小程式
微信小程式入門教程
2020-11-05
微信小程式
微信小程式 2019 入坑手冊
2019-03-28
微信小程式
微信小程式跳坑
2019-01-03
微信小程式
微信小程式框架wepy踩坑記錄（與vue對比）
2019-03-11
微信小程式框架Vue
使用 Taro 開發微信小程式的實踐 + 踩坑合集
2019-03-11
微信小程式
微信小程式踩坑之訪問APP物件中的常量
2020-11-10
微信小程式APP物件
微信小程式入門與實踐
2018-04-26
微信小程式
小程式踩坑
2019-04-11
微信小程式填坑心路
2018-06-29
微信小程式
小程式踩坑填坑
2018-07-25
從入門到放棄——快應用踩坑之路
2019-03-02
微信小程式入門到實戰（三）
2019-03-04
微信小程式
微信小程式入門學習筆記
2018-05-11
微信小程式筆記
微信小程式mpvue+vantUI+flyio+vuex入坑(1)
2018-10-16
微信小程式VueUI
微信小程式mpvue+vantUI+flyio+vuex入坑(2)
2018-11-17
微信小程式VueUI
微信小程式填坑清單
2018-11-19
微信小程式
微信小程式爬過的坑
2019-01-18
微信小程式
[小程式] mpVue 踩坑
2018-07-14
Vue
小程式踩坑（2）
2018-12-29
微信小程式入門教程之四：API 使用
2020-11-02
微信小程式API
微信公眾號-入門的坑
2018-08-21
微信小程式登入
2019-02-28
微信小程式
mpvue小程式踩坑之旅
2019-03-05
Vue
微信小程式入門教程之一：初次上手
2020-10-26
微信小程式
零基礎的自學前端之路，當年的入坑之旅
2018-12-20
前端
微信公眾號支付踩坑記
2018-09-30