微信小程序零基礎(chǔ)入門踩坑之路

微信小程序.jpg

簡(jiǎn)介

小程序是一種新的開放能力渔期，開發(fā)者可以快速地開發(fā)一個(gè)小程序。小程序可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)肘迎。

本人是一名忠實(shí)的Android研發(fā),沒有出過(guò)軌,對(duì)于css html js等僅僅是一知半解,這是在業(yè)余之際覺得想接觸一下web,其實(shí)剛出來(lái)小程序那時(shí)候就嘗試過(guò),不過(guò)由于工作較忙,中途放棄了,如今小程序發(fā)展的還是挺快的,還是特別想學(xué)下前端知識(shí).一是總結(jié),二是分享給有需要的人,節(jié)省時(shí)間,少百度一些.

不說(shuō)廢話,直接說(shuō)有用的,開始吧.

申請(qǐng)帳號(hào)

注冊(cè):小程序注冊(cè)(不能是微信開放平臺(tái)的郵箱)
登錄后, 我們可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 廓推。

appid.png

安裝開發(fā)工具

前往開發(fā)者工具下載頁(yè)面刷袍，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝.
打開小程序開發(fā)者工具，用微信掃碼登錄開發(fā)者工具
選擇小程序項(xiàng)目類型

項(xiàng)目類型.png

填入你申請(qǐng)的APPID 會(huì)自動(dòng)生成一個(gè)QuickStart Project 直接進(jìn)入即可看到一個(gè)簡(jiǎn)單的小程序

QuickStart.png
看看項(xiàng)目結(jié)構(gòu) 挺清晰的.

項(xiàng)目結(jié)構(gòu).png

至此,第一個(gè)小程序已經(jīng)呈現(xiàn)在你面前,開發(fā)工具頂部欄有預(yù)覽,你可以用手機(jī)掃描體驗(yàn)一下.

?

編輯器選擇

經(jīng)過(guò)一頓百度和前端的朋友咨詢,發(fā)現(xiàn)了目前網(wǎng)上流行的幾款: 微信開發(fā)工具樊展、VSCode呻纹、Subline堆生、webstom......說(shuō)多無(wú)益,我們就選朋友推薦的VSCode 其他的沒用過(guò),暫時(shí)不進(jìn)行對(duì)比了.

當(dāng)然了我們是進(jìn)行微信小程序開發(fā),而且是沒有前端基礎(chǔ)的,所以建議先在微信開發(fā)工具中進(jìn)行開發(fā)
如果喜歡其他編輯器也可以下載 VScode 里面有插件商店,提供各種插件,挺好的,主要是免費(fèi).

UI組件庫(kù)使用

這里說(shuō)明下為什么要有使用這個(gè),正所謂站在前人的肩膀上,能夠看的更遠(yuǎn),看到的東西更多,省去了你在造輪子了,

為了更快更好的開放一款自己的小程序,對(duì)于UI有強(qiáng)烈要求的就要用到別人寫好的組件庫(kù)了,不為什么,因?yàn)槲也欢岸?讓我自己寫要學(xué)基礎(chǔ)好幾天,不過(guò)話說(shuō)回來(lái),基礎(chǔ)還是要學(xué)的,這里只是想最快速度了解前端和小程序開發(fā)整體

原生組件庫(kù) 微信本身提供的一套基礎(chǔ)組件官方教程有詳細(xì)文檔
WeUI 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)
MinUI 第三方基于規(guī)范的小程序組件庫(kù)雷酪，簡(jiǎn)潔淑仆、易用、工具化,并支持wepy和組件化方案等
ZanUI 第三方的一個(gè)顏值高哥力、好用蔗怠、易擴(kuò)展的微信小程序 UI 庫(kù)

立項(xiàng)

如果你有其他語(yǔ)言的開發(fā)基礎(chǔ),那么可以直接進(jìn)行開發(fā),別怕,我們邊做邊學(xué),我用了一個(gè)星期搞定,你也可以3天或者1天.下面拿我的練習(xí)項(xiàng)目為例《學(xué)安卓》數(shù)據(jù)來(lái)源鴻洋大神的網(wǎng)站API 《玩安卓》用于搜集安卓技術(shù)文章及眾多實(shí)用工具的,很方便,詳細(xì)API可以查看玩安卓的API文檔

下面我們就開始第一個(gè)頁(yè)面的開發(fā) 這是效果圖功能很簡(jiǎn)單,banner+列表

1.png

頁(yè)面的生命周期

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function () {},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function () {},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
   */
  onUnload: function () {},
  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {},
  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {},
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {}
})

首頁(yè)

1.首頁(yè)banner

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

方法：GET
參數(shù)：無(wú)

可直接點(diǎn)擊查看示例：http://www.wanandroid.com/banner/json

2.首頁(yè)文章列表

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

方法：GET
參數(shù)：頁(yè)碼，拼接在連接中吩跋，從0開始寞射。

可直接點(diǎn)擊查看示例：http://www.wanandroid.com/article/list/1/json。

注意：頁(yè)碼從0開始钞澳，拼接在鏈接上怠惶。

其中有兩個(gè)易混淆的字段:

"superChapterId": 153, 
"superChapterName": "framework", // 一級(jí)分類的名稱

superChapterId其實(shí)不是一級(jí)分類id，因?yàn)橐唇犹D(zhuǎn)url轧粟，內(nèi)容實(shí)際都掛在二級(jí)分類下策治，所以該id實(shí)際上是一級(jí)分類的第一個(gè)子類目的id，拼接后故可正常跳轉(zhuǎn)兰吟。

附上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'>時(shí)間: </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>
<!--上拉加載更多l(xiāng)oading組件-->
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
  <view class="weui-loading"></view>
  <view class="weui-loadmore__tips">正在加載</view>
</view>
<!--上拉加載更多無(wú)數(shù)據(jù)提示-->
<view hidden="{{loadingMoreHidden ? true : false}}" class="no-more-photos">沒有更多啦</view>

附上index.js參考代碼:

data里是數(shù)據(jù)綁定的關(guān)鍵,即布局中定義的變量和這里都是對(duì)應(yīng)的,當(dāng)這里的值被賦值或變更,影響頁(yè)面更新.
使用方法變量名:默認(rèn)值如:imgUrls: []
imgUrls:[] 為banner的數(shù)組來(lái)源,在布局wxml中可以找到在wxml中一定是{{}}雙層大括號(hào)才可以.
? block為塊具體查看文檔介紹
? wx:for為循環(huán)列表對(duì)應(yīng)的數(shù)據(jù)源在小程序中即為數(shù)組對(duì)象
? wx:key 為每個(gè)item的唯一標(biāo)識(shí)
item變量代指為循環(huán)列表默認(rèn)的其中的元素對(duì)象也可以指定名稱如:wx:for-item="{{banner_item}}"

wxml.png

//獲取應(yīng)用實(shí)例
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'
  },
  //進(jìn)入文章詳細(xì)頁(yè)面
  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')
    //顯示標(biāo)題菊花
    wx.showNavigationBarLoading()
    //獲取輪播圖
    this.getBanners()
    //默認(rèn)加載第0頁(yè)
    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參考代碼:

說(shuō)明: 我項(xiàng)目中的UI組件庫(kù)引用了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組件樣式

1522639536966.png

將下載的weui.wxss文件放至項(xiàng)目的根目錄下在app.wxss文件中 @import 'weui.wxss'即可使用了.

底部tabBar

在app.json中配置即可

"tabBar": {
    "selectedColor": "#69C3AA",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)",
        "iconPath": "pages/images/nav/home_normal.png",
        "selectedIconPath": "pages/images/nav/home_select.png"
      },
      {
        "pagePath": "pages/nav/nav",
        "text": "導(dǎo)航",
        "iconPath": "pages/images/nav/nav_normal.png",
        "selectedIconPath": "pages/images/nav/nav_select.png"
      },
      {
        "pagePath": "pages/project/project",
        "text": "項(xiàng)目",
        "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"
      }
    ]
  }

網(wǎng)絡(luò)請(qǐng)求

示例代碼

說(shuō)明:

url:為請(qǐng)求接口
data:請(qǐng)求參數(shù)
method: 請(qǐng)求方式
header:請(qǐng)求頭
success:function(res){}請(qǐng)求回調(diào)函數(shù) 一般在這里進(jìn)行數(shù)據(jù)綁定賦值達(dá)到頁(yè)面更新
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
        })
      }
})

頁(yè)面跳轉(zhuǎn)及參數(shù)傳遞

示例代碼

說(shuō)明:

item_index:e.currentTarget.dataset.index 獲取item下標(biāo)索引對(duì)應(yīng)wxml中 data-index="{{index}}"

wx.navigateTo({})頁(yè)面跳轉(zhuǎn)

url:'path?xxx=xxx&xxx=xxx....' 頁(yè)面路徑+參數(shù)拼接

options.xxx 參數(shù)接收在onload中

//進(jìn)入文章詳細(xì)頁(yè)面
  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
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {
    var that = this
    var title = options.title
    var link = options.link
    that.setData({
      artical_title: title,
      artical_link : link
    })
    //動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題---文章標(biāo)題
    wx.setNavigationBarTitle({
      title: that.data.artical_title
    })
  },

下拉刷新/上拉加載更多

1.在app.json中加入開關(guān) 只有打開開關(guān) 生命周期函數(shù)才會(huì)被調(diào)用

在這里說(shuō)明一個(gè)容易犯錯(cuò)的就是創(chuàng)建page的時(shí)候會(huì)自動(dòng)生成四個(gè)文件,js文件中也會(huì)自動(dòng)生成模板代碼生命周期函數(shù)都會(huì)自動(dòng)生成,千萬(wàn)不要自己去在寫一個(gè) 否則不報(bào)錯(cuò) 也不觸發(fā).

"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
    <!--請(qǐng)求文章列表數(shù)據(jù)-->
    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
        })
        <!--上拉加載更多的關(guān)鍵處理-->
        <!--定義一個(gè)新的文章對(duì)象數(shù)組 用于裝載拼接所有頁(yè)的數(shù)據(jù)-->
        var articalsTemp = that.data.articals
        <!--當(dāng)前如果處于第一頁(yè) 那么清空這個(gè)對(duì)象數(shù)組 只裝載第一頁(yè)數(shù)據(jù)即可-->
        if (that.data.curPage == 1) {
          articalsTemp = []
        }
        <!--定義一個(gè)新的文章對(duì)象數(shù)組 賦值于請(qǐng)求返回對(duì)應(yīng)頁(yè)碼的文章數(shù)據(jù)-->
        var articals = res.data.data.datas
        <!--判斷,如果返回的某頁(yè)的數(shù)據(jù)長(zhǎng)度小于每頁(yè)的數(shù)據(jù)長(zhǎng)度 說(shuō)明當(dāng)前加載的頁(yè)是最后一頁(yè)了-->
        if (articals.length < that.data.perPageSize) {
          console.log('沒有更多了')
          that.setData({
            <!--contcat 意思是向articalsTemp數(shù)組中添加數(shù)組 -->
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: false
          })
        } else {
        <!-否則 當(dāng)前不是最后一頁(yè),向articalsTemp數(shù)組中添加數(shù)組  -->
          console.log('有更多可加載')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: true,
             <!--當(dāng)前頁(yè)碼增加1 依次類推-->
            curPage: that.data.curPage + 1
          })
        }
      }
    })
  },

自定義組件

創(chuàng)建自定義組件與創(chuàng)建普通頁(yè)面類似也包含.js .json .wxml .wxcss四個(gè)文件
修改.json文件組件屬性

{
  "component": true,
  "usingComponents": {}
}

編寫wantab.js 附上wantab.js源碼

// dist/wantab.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //標(biāo)題列表
    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: ''
    }


  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

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

編寫wantab.js 附上wantab.wxml 模板代碼

<!--dist/wantab.wxml-->
<!-- 自定義tab標(biāo)簽組件-->
<!-- 標(biāo)題列表-->
<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>
<!--內(nèi)容列表-->
<slot>
</slot>

編寫wantab.js 附上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
}

以上就可以完成一個(gè)組件的定義了,下面貼出使用方法

{
  "navigationBarTitleText": "項(xiàng)目",
  "usingComponents": {
    "wantab":"../../dist/component/wantab/wantab"
  }
}

使用方式與其他第三方的組件引入一致,在頁(yè)面的.json文件中加入以上代碼即可注意路徑根據(jù)項(xiàng)目而改變

效果圖展示

最后放上其他頁(yè)面的效果圖實(shí)現(xiàn)過(guò)程基本差不多剛接觸web 所以多做了些重復(fù)的工作,為了更熟悉使用這些組件和交互

1.png

2.png

3.png

4.png

5.png

完結(jié)

感謝閱讀,如有不對(duì)地方請(qǐng)見諒.

最后編輯于：2018.04.02 17:47:28

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末通惫，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子混蔼，更是在濱河造成了極大的恐慌履腋，老刑警劉巖，帶你破解...
沈念sama閱讀 216,496評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件惭嚣，死亡現(xiàn)場(chǎng)離奇詭異遵湖，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)晚吞，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,407評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門延旧，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人槽地，你說(shuō)我怎么就攤上這事迁沫。” “怎么了捌蚊？”我有些...
開封第一講書人閱讀 162,632評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵集畅，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我缅糟，道長(zhǎng)挺智，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,180評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任窗宦，我火速辦了婚禮逃贝，結(jié)果婚禮上谣辞，老公的妹妹穿的比我還像新娘迫摔。我一直安慰自己沐扳，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,198評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布句占。她就那樣靜靜地躺著沪摄，像睡著了一般。火紅的嫁衣襯著肌膚如雪纱烘。梳的紋絲不亂的頭發(fā)上杨拐，一...
開封第一講書人閱讀 51,165評(píng)論 1贊 299
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音擂啥，去河邊找鬼哄陶。笑死，一個(gè)胖子當(dāng)著我的面吹牛哺壶，可吹牛的內(nèi)容都是我干的屋吨。我是一名探鬼主播，決...
沈念sama閱讀 40,052評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼山宾，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼至扰！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起资锰，我...
開封第一講書人閱讀 38,910評(píng)論 0贊 274
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤敢课，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后绷杜，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體直秆，經(jīng)...
沈念sama閱讀 45,324評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,542評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年鞭盟，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了圾结。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,711評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡懊缺，死狀恐怖疫稿，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情鹃两，我是刑警寧澤遗座，帶...
沈念sama閱讀 35,424評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站俊扳，受9級(jí)特大地震影響途蒋，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜馋记，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,017評(píng)論 3贊 326
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一号坡、第九天我趴在偏房一處隱蔽的房頂上張望懊烤。院中可真熱鬧，春花似錦宽堆、人聲如沸腌紧。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,668評(píng)論 0贊 22
一樁弒父案畜隶，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)壁肋。三九已至，卻和暖如春籽慢，著一層夾襖步出監(jiān)牢的瞬間浸遗，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,823評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工箱亿，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留跛锌，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,722評(píng)論 2贊 368
代替公主和親
正文我出身青樓届惋，卻偏偏與公主長(zhǎng)得像髓帽，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子盼樟，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,611評(píng)論 2贊 353

微信小程序零基礎(chǔ)入門踩坑之路

簡(jiǎn)介

申請(qǐng)帳號(hào)

安裝開發(fā)工具

編輯器選擇

UI組件庫(kù)使用

立項(xiàng)

1.png

頁(yè)面的生命周期

首頁(yè)

1.首頁(yè)banner

2.首頁(yè)文章列表

底部tabBar

網(wǎng)絡(luò)請(qǐng)求

頁(yè)面跳轉(zhuǎn)及參數(shù)傳遞

下拉刷新/上拉加載更多

自定義組件

效果圖展示

5.png

完結(jié)

推薦閱讀更多精彩內(nèi)容