国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序 bug 集中營

PascalXie / 2312人閱讀

摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內的,有中文文檔,雖然它的文檔說明有點坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。

Create by jsliang on 2018-9-17 17:58:56  
Recently revised in 2018-11-19 08:19:13


?Hello 小伙伴們,如果覺得本文還不錯,記得給個 star , 你們的 star 是我學習的動力!GitHub 地址

寫在前面

?首個微信小程序實踐記錄:
?工作量: PSD 18 張 (導出的 JPG 30 張)
?耗時:12 個工作日
?總結1: 在頁面制作商,需要 3 周工作日(工作 15 天)搞定,前后端對接口另計。實際上,12 個工作日可以搞定所有頁面,但是應該往前鋪 1.5D 熟悉框架,往后鋪 1.5D 整理代碼。當然每個人的耗時可能不同,可根據個人實際情況進行調整。
?總結2:在 API 調用上,根據接口數量可能需要 7-12 個工作日進行 API 調用,難點表現在: 1. 接口不夠豐富,數據量不足; 2. 接口數據不夠正式真實,跟前面的假數據相差太大; 3. 接口可能沒法正常調用 等原因。故因根據小程序業(yè)務邏輯進行工作時長的報備。

?這里有 jsliang 微信小程序開發(fā)中遇到的所有坑,以及在填坑過程中的一些個人經驗。jsliang 利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。它可能教不了你什么,但至少能省下你百度的功夫。

?請結合 《目錄》 和 《返回目錄》 來進行跳轉,獲得更好的閱讀體驗。

?本文技術支持:Ansen江

?注1:由于更新頻繁,有時候平臺上的文章版本可能沒有圖片或者目錄無法跳轉,所以小伙伴需要獲取最新資料的,請前往 GitHub:地址

?注2:如果小伙伴使用的是手機版打開,那么推薦小伙伴使用電腦打開,因為各平臺的手機端大都不支持頁內跳轉,看起來比較費勁。


一 目錄

?目前已有 48 個坑。

請各位按目錄檢索時注意:  
3.1、3.2、3.3…… 等二級目錄對應著一個章節(jié)。
3.1.1、3.1.2、3.1.3…… 等三級目錄將該二級目錄這個大章節(jié)詳細拆分成諸多小坑,方便查看。

?注意!!!

?由于 SF 可能有字數限制,故 章節(jié) 12.1 之后的內容需要小伙伴前往 GitHub 地址查看

?GitHub 地址


目錄
一 目錄
二 前言
三 填坑實戰(zhàn)
?3.1 swiper 輪播圖 5
??3.1.1 行內樣式無效
??3.1.2 圖片樣式修改不了
??3.1.3 swiper 屬性值設置
??3.1.4 輪播圖圖片跳轉
??3.1.5 wx:key
??3.1.6 實戰(zhàn)代碼
?3.2 tabBar 與 switchTab 3
??3.2.1 底部導航跳轉
??3.2.2 自定義底部導航
??3.2.3 自定義組件
?3.3 px、rem 與 rpx 1
?3.4 微信 web 開發(fā)者工具 2
??3.4.1 無法輸入中文
??3.4.2 無法滑動滾輪
?3.5 組件與 API 2
??3.5.1 概念混淆:組件 VS API
??3.5.2 API 查詢不到對應的方法
?3.6 flex 布局 2
??3.6.1 基礎概念
??3.6.2 左右布局
??3.6.3 混合布局
?3.7 background-image 套用本地圖片無效 1
?3.8 1
?3.9 搜索框 2
??3.9.1 margin-top 無法上浮
??3.9.2 改造 WeUI 搜索框
?3.10 微信小程序分享 1
?3.11 border-box 設置 1
?3.12 自定義導航條 6
??3.12.1 WeUI 選項卡
??3.12.2 自定義選項卡效果與實現
??3.12.3 綁定事件如何傳遞數據
??3.12.4 不允許駝峰
??3.12.5 獲取 data 數據
??3.12.6 實現文字省略
?3.13 黑科技: 2
??3.13.1 被遺棄的
??3.13.2 四種彈窗寫法
?3.14 小程序解析 HTML 6
??3.14.1 解析 HTML 的三種方法
??3.14.2 wxParse
??3.14.3 rich-text
??3.14.4 web-view
?3.15 詭異的 open-type 1
?3.16 1
?3.17 下拉刷新和上拉加載 2
?3.18 獲取 input 的值 1
?3.19 onLaunch 加載問題 2
??3.19.1 小程序執(zhí)行順序
??3.19.2 路由守衛(wèi)
?3.20 request 封裝與 api 抽離 1
?3.21 判斷數據是否讀取完 1
?3.22 客服系統(tǒng)研究 1
?3.23 文件在線預覽 2
?3.24 盡量使用 ES6 1
?3.25 視頻功能實現 1


二 前言

?返回目錄

本文章原名【微信小程序 100 坑】

?微信小程序的開發(fā)教程,或許寫出來是非常受歡迎的。
?但是:

第一,微信小程序是國內的,有中文文檔,雖然它的文檔說明有點坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。

第二, jsliang 的文筆并沒有想象中的那么好,想想如果我?guī)銈冏吡艘槐樾〕绦蜷_發(fā),然后你們以為是一條平坦路,結果碰到一堆坑坑洼洼,咋辦?最后的鍋,會不會到我背啊,可怕!

?所以,在這里, jsliang 結合 “日常躺坑” ,先為你解決小程序的 100 個坑!雖然現在可能還不夠,但是第一天我就碰到 4/5 個了,我想我可以幫你們躺完 100 個的!!!
?現在的微信開發(fā)者工具顯示的開發(fā)版本是:"libVersion": "2.0.4"
?如果你開發(fā)的版本已經解決了這個 bug ,或者你覺得這個 bug 還有其他解決方法,或者你覺得這個玩意還有其他 bug ,請告訴我,我會補充到這篇文檔上,順帶記上您的大名,謝謝!
?QQ: 1741020489


三 填坑實戰(zhàn)

?返回目錄

?這里的坑:

有的來源于微信自帶的開發(fā)文檔:小程序開發(fā)文檔。在文檔中,你會發(fā)現很多的樂趣!畢竟,你不知道什么時候中文成為了你的語言障礙~

有的是開發(fā)中遇到的,然后結合大量的百度結果,進行的有效性總結。

?希望小伙伴在百度中或者無意看到這篇文章,請熟練使用瀏覽器的 Ctrl + F,查找需要的問題答案。


3.1 swiper 輪播圖

?返回目錄

本組件目前已有 5 個坑,有興趣的小伙伴可以詳看。


? 代碼來源于該地址:微信組件 swiper 。

?為方便小伙伴查看,下面貼出原版代碼:

demo.wxml

  
    
      
    
  



 interval
 duration


demo.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
    })
  }
})


?好的,上面就是微信官方文檔的演示代碼,如果你跟著演示代碼走了一遍碰到疑問的話,看看這里我挖的土是不是能填好你的坑:


3.1.1 行內樣式無效

?返回目錄

?demo.wxml 中出現的 這行, widthheight 的行內屬性是忽悠老百姓的,它并沒卵用 !我們需要在 slide-image 這個 class 類中修改 widthheight。簡而言之,行內樣式都是騙人的,乖,我們還是去 demo.wxss 寫樣式吧~


3.1.2 圖片樣式修改不了

?返回目錄

?在任何出現圖片的地方(包括但不限于輪播圖),如果你發(fā)現不僅行內寫法無效之外,還發(fā)現單純地給圖片加 class,去 *.wxss 寫樣式也無效的話。那么,我建議小伙伴最好采用樣式加重法,即 .image-wrap .image 這種寫法格式,來確保圖片樣式能進行修改。詳細用法可看下文。


3.1.3 swiper 屬性值設置

?返回目錄

?swiper 屬性值。官方文檔說明:

?雖然,它的屬性名和屬性值是這么說的。但是,用的時候,首先你需要在 demo.wxml 中的 swiper 綁定這個屬性名,然后在 demo.js 中設置其屬性值。值得注意的是,它的綁定值,稍微不同于 Vue, 需要設置 {{}} 形式。如果文字描述你看得不是很清楚,可以參照下面的代碼進行理解。


3.1.4 輪播圖圖片跳轉

?返回目錄

?關于輪播圖的地址跳轉,在微信小程序的官網是沒用提及的,也是 jsliang 去百度查看了下,才知道怎么設置(可能是我一開始就挑戰(zhàn)的難度太高了么 -_-|| ),在下面 jsliang 貼出來代碼~想知道怎么解決的可以去看看:首先,在 data 中設置 link ;然后,設置 navigator 導航遍歷 item.link


3.1.5 wx:key

?返回目錄

?關于 wx:keywx:key 的作用是:當數據改變觸發(fā)渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創(chuàng)建,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率。但是,在其 swiper 中,小程序本身是沒有寫的,所以它會帶有 warning ,這里也是個小坑, jsliang 也是百度了下也知道這件事:點我了解。


3.1.6 實戰(zhàn)代碼

?返回目錄

?下面給出這 5 個坑的解決代碼,如有不對,盡情指出:

index.wxml

  
    
    
      
        
          
        
      
    
  


index.wxss
.carousel .slide-image {
  width: 100%;
  height: 420rpx;
}


index.js
Page({
  data: {
    imgUrls: [
      {
        link: "../index/index",
        url: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg",
      },
      {
        link: "../demo/demo",
        url: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg",
      },
      {
        link: "../logs/logs",
        url: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})


3.2 tabBar 與 switchTab

?返回目錄

本組件目前已有 3 個坑,有興趣的小伙伴可以詳看。

?tabBar :底部菜單欄,需要在 app.json 中設置。使用方法:見下文。
?navigator :導航切換。使用方法:地址
?switchTab :控制 tabBar 的切換。使用方法:地址


3.2.1 底部導航跳轉

?返回目錄

?在這里,我們講下 tabBar 的坑,如果你在 app.json 中設置了 tabBar

app.json
"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "./public/index_tabBar1_nor.png",
      "selectedIconPath": "./public/index_tabBar1.png"
    }, {
      "pagePath": "pages/demo/demo",
      "text": "發(fā)現",
      "iconPath": "./public/index_tabBar2_nor.png",
      "selectedIconPath": "./public/index_tabBar2.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "我的",
      "iconPath": "./public/index_tabBar3_nor.png",
      "selectedIconPath": "./public/index_tabBar3.png"
    }]
  }


?那么,我們就需要通過設置 switchTab 來控制底部導航的跳轉,而不能通過 navigator 來跳轉:

demo.wxml

  


demo.js
linkTo: function () {
  wx.switchTab({
    url: "../index/index"
  });
},


3.2.2 自定義底部導航

?返回目錄

?那么問題又來了,當我們切換到子頁面的時候,我們發(fā)現 tabBar 這個底部導航欄不見了,然后問了下 Ansen江 ,他說之前是整個小程序都有的,有些頁面還要想方設法去隱藏。
?但是現在嘛……它沒了!沒了啊!!!在微信小程序的文檔沒看到有喚起底部導航條的方法,難道我要做一個導航條了么 -_-||
?回答是:yes!
?所以,下面給出該底部導航條 tabBar 的實現情況和代碼片段:

注:圖片寬高均為 54rpx

*.wxml


  
    
    首頁
  
  
    
    在線咨詢
  
  
    
    電話咨詢
  
  
    
      立即訂購
    
  


*.wxss
.nav {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
  border: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background: #fff;
}
.nav view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav image {
  width: 54rpx;
  height: 54rpx;
}
.nav text {
  margin-top: 7rpx;
}
.nav-home {
  border-right: 1px solid #ccc;
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-service {
  border-right: 1px solid #ccc;
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-phone {
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-buy {
  background: #eb333e;
  color: #fff;
  width: 360rpx;
  height: 98rpx;
  line-height: 80rpx;
  font-size: 34rpx;
}


*.js
callWaiter: function(res) {
  wx.makePhoneCall({
    phoneNumber: "13264862250",
    success: function(res) {
      console.log("撥打成功");
      console.log(res);
    },
    fail: function(res) {
      console.log("撥打失敗");
      console.log(res);
    },
    complete: function(res) {
      console.log("撥打完成");
      console.log(res);
    }
  })
},
goHome: function() {
  wx.switchTab({
    url: "../index/index"
  })
},


3.2.3 自定義組件

?返回目錄

?在最近的工作中,又發(fā)現一個小問題:

?像這個導航條,它需要根據頁面所在的模塊,動態(tài)地展示不同位置的狀態(tài)為活躍,而且它是需要在多個頁面重復出現的,如果每個頁面我都要復制粘貼一遍,到時候要修改起來的時候,麻煩不說,最重要的是,它可能影響我前端的性能了,能不能直接將其封裝起來呢?

?自定義組件:鏈接

?是的,發(fā)現在小程序文檔中是存在這個東西的。當然,至于過程中我百度了幾篇文章來輔助寫出下面的代碼,你猜?

?子組件寫法

navBar.wxml


  
    
    
    首頁
  
  
    
    
    發(fā)現
  
  
    
    
    我的
  


navBar.wxss
/* 底部導航條 */
.navBar {
  width: 100%;
  padding: 18rpx 0;
  border-top: 1rpx solid #cccccc;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background: #fff;
}
.navBar image {
  width: 55rpx;
  height: 55rpx;
}
.navBar view {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20rpx;
  color: #999999;
}
.navBar-user text {
  color: #d0a763;
}


navBar.js
// pages/componentNavBar/navBar.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    homeActive: {
      type: Boolean,
      value: false
    },
    exploreActive: {
      type: Boolean,
      value: false
    },
    userActive: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    // 返回首頁
    goHome: function (e) {
      wx.switchTab({
        url: "../index/index",
      })
    },
    // 返回發(fā)現頁 
    goExplore: function (e) {
      wx.switchTab({
        url: "../explore/explore",
      })
    },
    // 返回我的頁面
    goUser: function (e) {
      wx.switchTab({
        url: "../user/user",
      })
    },
    showCode: function(e) {
      console.log(e);
      let that = this;
      console.log(that.data);
    }
  }
})


navBar.json
{
  "component": true,
  "usingComponents": {}
}


?然后,在父組件的使用,只需要:

*.wxml

  


*.json
{
  "usingComponents": {
    "navBar": "../componentNavBar/navBar"
  }
}


*.js
data: {
  userActive: true
},


?怎樣?這就是自定義組件的寫法,是不是覺得特好用涅,一次寫完,終身受用。


3.3 px、rem 與 rpx

?返回目錄

本節(jié)目前已有1個坑,有興趣的小伙伴可以詳看。

?在微信中,它自帶了一套屬于自己的單位:rpxrpx 不同于之前我們認識的 pxremem ,如果你的設計稿是 750 px 的,那么很容易的, 1px = 1rpx ,但是,如果設計稿不是 750 px ,那么將造成一個 bug ,至于這個 bug 如何解決……
?-_-|| 誰知道呢……要不先把UI設計師宰了?
?知識補充:關于 rpx 。


3.4 微信 web 開發(fā)者工具

?返回目錄

本節(jié)目前已有 2 個坑,有興趣的小伙伴可以詳看。


3.4.1 無法輸入中文

?返回目錄

?如果你在開發(fā)過程中,發(fā)現只能寫英文了,而中文無法輸入了,千萬別急,也別怪輸入法出 bug 了,你只需要:重啟開發(fā)工具。


3.4.2 無法滑動滾輪

?返回目錄

?如果你某時刻,突然發(fā)現你沒法滾動代碼進行查看,而是需要拖動滾動條才行,請別怪你的鼠標,你可以去瀏覽器打開一篇文章看看,enm...你的鼠標還是好的~所以,請:重啟開發(fā)工具。


3.5 組件與 API

?返回目錄

本節(jié)目前已有 2 個坑,有興趣的小伙伴可以詳看。
3.5.1 概念混淆:組件 VS API

?返回目錄

?首先,科普下 組件 與 API 是什么:

組件:對數據和方法的封裝,使用組件可以實現拖放式編程、快速的屬性處理以及真正的面向對象的設計【百度百科】。那么,可以理解為:開發(fā)中常用的一些部件,我們都可以封裝起來,然后在需要的時候拿來用,即為組件。

API:預先定義的函數,提供應用程序與開發(fā)人員無需訪問源碼,基于某軟件或硬件得以訪問一組例程的能力【百度百科】。就是說已經寫好的一些 Function 或者后端接口,前端直接調用就行了。

?但是,在微信小程序官方文檔中,組件與API,拆分地有點不科學。
?例如:輪播圖底部導航條

一個在組件中,一個在 API 中;

一個在 wxmlwxssjs 中要設置對應的參數,一個只需要在 app.json 中設置就行。

?可能微信小程序考慮到底部導航條不應該有太大的變化(例如讓你修改太多樣式或者 js ),所以將導航條內嵌至源碼中了。
?但是,這可能導致什么重要影響嗎?是的,如果底部導航條需要進行修改呢?例如:3.2.3 自定義組件。這樣的情況下,我們的開發(fā)時間就有所增加了。


3.5.2 API 查詢不到對應的方法

?返回目錄

?如果小伙伴你經常有去看微信小程序官方文檔的話,那么你一定會有一件事需要吐槽,那就是:
?明明上次我見到過某個 API 實現了我需要做的功能,但是改天我回去查找的時候,它卻提示我沒有這個玩意,這是什么鬼?!
?是的,跟我們 3.13 黑科技: 這一章中講到的 這個黑科技一樣,有時候官方文檔也不是萬能的,它總會有這樣那樣的毛病,導致我們找不到需要的東西,只能去百度了 -_-||


3.6 flex 布局

?返回目錄

本節(jié)目前已有 3 個坑,有興趣的小伙伴可以詳看。

?Flex布局又稱彈性布局,在小程序開發(fā)中比較適用。但是由于 jsliang 之前沒怎么用過 Flex 布局,所以在這里咱們特意去踩下坑,充實下自己。【小程序開發(fā)之頁面布局】【阮一峰-Flex 布局教程】
?在我們布局頁面的時候,最好看看 阮一峰 的教程,平時遇到布局的問題的時候,我都習慣去上面 阮一峰 的文章看看:


3.6.1 基礎概念

?返回目錄

?基礎概念:地址

  
  display: flex;

  
  flex-direction: row | row-reverse | column | column-reverse;
  
  
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  
  flex-flow:  || ;
  
  
  justify-content: flex-start | flex-end | center | space-between | space-around;
  
  
  align-items: flex-start | flex-end | center | stretch | baseline;
  
  
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;


3.6.2 左右布局

?返回目錄

?實現效果如下:

?如圖,這是我們要實現的左右布局效果。那么,在微信小程序要怎么做呢?

*.wxml

  
    熱門推薦
  
  
    
  
  
    查看全部 >
  


*.wxss
.top-recommended-headlines {
  display: flex;
  align-items: flex-end;
  height: 31rpx;
  line-height: 31rpx;
  margin-bottom: 10rpx;
}
.top-recommended-headlines-left text {
  font-size: 32rpx;
  font-weight: bold;
}
.top-recommended-headlines image {
  width: 366rpx;
  height: 31rpx;
  margin-left: 10rpx;
}
.top-recommended-headlines-right navigator {
  font-size: 26rpx;
  color: #a9a9a9;
  margin-left: 50rpx;
}


3.6.3 混合布局

?返回目錄

?實現效果如下:

?如圖,這是我們要實現的左右布局效果。那么,在微信小程序要怎么做呢?

*.wxml

  
    
      
      {{item.title}}
    
    
      
      {{item.content}}
    
    
      {{item.datatime}}
      {{item.reader}}閱讀
      #{{item.label}}#
    
  
  
    
  


*.wxss
.weui-tab__content-item3 {
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-top: -10rpx;
  margin-bottom: 10rpx;
}
.weui-tab__content-item3:first-child {
  padding: 40rpx 30rpx 0;
}
.weui-tab__content-item3-question image {
  width: 30rpx;
  height: 30rpx;
}
.weui-tab__content-item3-question text {
  font-size: 30rpx;
  line-height: 46rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}
.weui-tab__content-item3-answer image {
  width: 30rpx;
  height: 30rpx;
}
.weui-tab__content-item3-answer text {
  font-size: 26rpx;
  line-height: 42rpx;
  color: #a9a9a9;
  margin-left: 10rpx;
}
.weui-tab__content-item3-detail {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #a9a9a9;
}
.weui-tab__content-item3-detail-label {
  color: #d0a763;
}
.weui-tab__content-item3-gap image {
  width: 100%;
  height: 30rpx;
}


*.js
tabs3Content: [
  {
    title: "員工發(fā)明創(chuàng)造是否屬于職務發(fā)明的認證標準?",
    content: "隨著企業(yè)對知識產權在企業(yè)發(fā)展中核心競爭力的認識力提高,企業(yè)保護自身知識產權的意識不斷增強,使其技術得......",
    datatime: "2018-03-05",
    reader: "2081",
    label: "知識產權"
  }
]


3.7 background-image 套用本地圖片無效

?返回目錄

本節(jié)目前已有 1 個坑,有興趣的小伙伴可以詳看。

?在小程序中,如果你使用 wxss,你是可以發(fā)現有 background-image 的提示的。但是,如果你設置它的背景圖是本地圖片,你會發(fā)現,它是不生效的。
?解決方案:

在使用背景圖片的時候用網絡圖片,就是用外鏈的形式,比如你將這張圖片放到你的服務器,如:https://xxxx/xxx.jpg

將背景圖片使用編碼base64進行轉換,可以在這個網址進行 點我前往 轉換,如:background-image: url("轉換后得到的編碼文本"),如果多次使用的話可以將該值設置為全局變量,再在js文件進行引用即可。

使用 image 組件 + position 定位而不是使用 background-image


3.8

?返回目錄

本節(jié)目前已有 1 個坑,有興趣的小伙伴可以詳看。

?兩者的區(qū)別是, 是一個組件,會在頁面上做渲染; 不是一個組件,它僅僅是一個包裝元素,只接受控制屬性,不會在頁面中做任何渲染。
?所以,如果你僅僅是需要包裹,而不是渲染一個層,可以使用 提升性能。


3.9 搜索框

?返回目錄

本節(jié)目前已有 2 個坑,有興趣的小伙伴可以詳看。


3.9.1 margin-top 無法上浮

?返回目錄

?首先,我們要實現的效果是:

?然后, jsliang 的想法是:

*.wxml

  
  
  


*.wxss
.search {
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.search-product-input {
  background: #f5f5f5;
  width: 650rpx;
  height: 65rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
}
.search-placeholder {
  font-size: 26rpx;
  text-align: center;
  margin-top: -65rpx;
  z-index: 2;
}
.search-placeholder-icon {
  width: 24rpx;
  height: 24rpx;
}
.search-placeholder-text {
  margin-left: 10rpx;
}


?你注意到了嗎?在 *.wxml 中, jsliang 設置了個空的 ,如果你把這個 去掉,你會驚奇地發(fā)現,它……下來了……

?好吧,可能有其他的實現方式,但是如果你下次使用這種方式,注意上面這個坑~


3.9.2 改造 WeUI 搜索框

?返回目錄

?回頭看了下 WeUI 的實現方式,發(fā)現跟我的思路是挺像的,關于 input 的實現方式,現在依據 WeUI ,成功實現了輸入框:

?源碼奉上:

*.wxml


  
    
      
        
        
        
          
        
      
      
    
    
    
  


*.js
Page({
  data: {
    inputShowed: false,
    inputVal: ""
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  }
})


*.wxss
.search {
  height: 100rpx;
  padding: 18rpx 30rpx;
}
.weui-search-bar {
  padding: 0;
  background-color: #fff;
  border-top: none;
  border-bottom: none;
  height: 64rpx;
}
.weui-search-bar__form {
  border: none;
}
.form-border {
  border: 1rpx solid #f5f5f5;
  background: #f5f5f5;
}
.weui-search-bar__label {
  background: #f5f5f5;
  border-radius: 30rpx;
}
.weui-search-bar__cancel-btn {
 font-size: 26rpx; 
 background: rgb(8, 202, 186);
 color: #fff;
 padding: 2rpx 20rpx 0 20rpx;
 border-radius: 10rpx;
}
.weui-search-bar__submit-btn {
  font-size: 26rpx; 
  background: rgb(8, 200, 248);
  color: #fff;
  padding: 10rpx 20rpx 0 20rpx;
  border-radius: 10rpx;
}


3.10 微信小程序分享

?返回目錄

本節(jié)目前已有 1 個坑,有興趣的小伙伴可以詳看。

?官方文檔:地址
?在這里,提醒廣大小伙伴注意了,注意了,注意了!重要的事說三遍。
?當你新建 page 的時候,微信 web 開發(fā)者工具會自動幫你添加分享事件:

/**
  * 用戶點擊右上角分享
  */
onShareAppMessage: function (res) {
  // 實現分享功能
  return {
    title: this.data.productName,
    path: "/pages/indexProductDetail.js?productId=" + this.data.productId,
    imageUrl: this.data.videoImageSrc,
    success: (res) => {
      console.log("分享成功~");
    },
    fail: (res) => {
      console.log("分享失敗~");
    }
  }
}


?所以,如果你在前面定義了,它會在最下面偷偷幫你清空,然后你就覺得無法自定義分享事件……
?是的,jsliang 打死都不承認這是我自己的鍋,新手注意!新手注意!!新手注意!!!


3.11 border-box 設置

?返回目錄

本節(jié)目前已有 1 個坑,有興趣的小伙伴可以詳看。

?熟知盒模型的小伙伴應該知道,盒模型有兩種計算方式:

box-sizing: border-box;

box-sizing: content-box;

?在 border-box 中,整個 view 的寬、高,包括 marginpaddingborder
?而在 content-box 中,整個 view 的寬、高,則不包括上面元素。

?如上圖,如果一個 view ,你的代碼如下:

view {
  box-sizing: border-box;
  margin: 10rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 10rpx;
}


?那么,你的整個寬高還是 100rpx
?但是,如果你的代碼如下:

view {
  box-sizing: content-box;
  margin: 10rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 10rpx;
}


?那么,你的整個盒子寬高是 120rpx

?如果你在設計頁面中,發(fā)現內容區(qū)被撐爆了,那么,請檢查下現在的 border-box 是什么。


3.12 自定義選項卡

?返回目錄

本節(jié)目前已有 6 個坑,有興趣的小伙伴可以詳看。


3.12.1 WeUI 選項卡

?返回目錄

?使用 WeUI 的導航條,首先需要引用 WeUI 的 CSS 樣式:地址

?下載 weui.wxss 并在 app.wxss 中引用即可

app.wxss
/* 引用WeUI */
@import "weui.wxss";


?然后,我們直接往頁面加入它的選項卡并根據項目需求修改其樣式:


*.wxml

  
    
      
        
          {{item}}
        
      
      
    
    
      
      
      
      
      
      
    
  


*.wxss
.tab {
  font-size: 26rpx;
}
.tab image {
  width: 173rpx;
  height: 29rpx;
}
.weui-navbar {
  border-top: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
}
.weui-navbar__slider {
  background: #d0a763;
  width: 4em;
}
.weui-navbar__item.weui-bar__item_on {
  color: #d0a763;
}
.weui-tab__content {
  margin-bottom: 100rpx;
}


*.js
var sliderWidth = 52; // 需要設置slider的寬度,用于計算中間位置

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 選項卡導航
    tabs: ["全部", "已付款", "待付款"],
    activeIndex: 1,
    sliderOffset: 0,
    sliderLeft: 0,
  },
  // 選項卡切換
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },

  /**
   * 生命周期函數--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    // 計算搜索框活躍條
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  }
})

?2018-11-15:新增一個 bug 修復,就是在第一個 tab 能流暢切換的情況下,第二個及其他的 tab,需要多次滑動才能上拉加載。這時候,只需要在 weui-tab__content 這個類新增三行代碼就可以解決該問題:

*.css
.weui-tab__content {
  padding: 30rpx 30rpx 0;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}


3.12.2 自定義選項卡效果與實現

?返回目錄

?自定義選項卡的代碼實現:

?實現效果圖如下:

?實現代碼如下:

*.wxml

  
    {{item.label}}
  
  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        {{item.title}}
        
          發(fā)布時間:{{item.datatime}}
          生效時間:{{item.effectiveTime}}
        
      
    
    
      
    
  


*.wxss
.weui-tab__nav {
  background: #f5f5f5;
  border: 1rpx 0rpx solid #e6e6e6;
  height: 90rpx;
  padding: 17rpx 41rpx;
  display: flex;
  justify-content: space-between;
}
.weui-tab__nav text {
  border-radius: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 15rpx 23rpx;
  font-size: 26rpx;
  font-weight: bold;
}
.weui-tab__nav-active {
  color: #fefefe;
  background: #d0a763;
}
.weui-tab__content-item2 {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 30rpx;
}
.weui-tab__content-item-descritpion {
  display: flex;
  justify-content: space-between;
}
.weui-tab__content-item-descritpion image {
  width: 60rpx;
  height: 70rpx;
}
.hide {
  display: none;
}
.weui-tab__content-item-descritpion-content {
  margin-left: 26rpx;
}
.weui-tab__content-item-descritpion-content-title {
  font-size: 28rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.weui-tab__content-item-descritpion-content-datatime {
  font-size: 22rpx;
  color: #bbb;
}
.weui-tab__content-item-descritpion-content-datatime1 {
  margin-right: 35rpx;
}
.weui-tab__content-item-download-state image {
  width: 64rpx;
  height: 64rpx;
}


*.js
data: {
  tabs2Nav: [
    {
      id: "1",
      label: "法律大全",
      state: 1
    },
    {
      id: "2",
      label: "合同模板",
      state: 0
    },
    {
      id: "3",
      label: "民事",
      state: 0
    },
    {
      id: "4",
      label: "行政",
      state: 0
    },
    {
      id: "5",
      label: "執(zhí)行",
      state: 0
    }
  ],
  tabs2Content: [
    {
      title: "中華人名共和國民用航空法(2015年...).doc",
      url: "https://wxmcard.imusic.cn/testfordocdownload.doc",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "1"
    },
    {
      title: "原生申訴表格.xls",
      url: "https://wxmcard.imusic.cn/testfordocdownload.doc",
      datatime: "2018-01-26",
      type: "2"
    },
    {
      title: "法律常識大匯集及范例.ppt",
      url: "https://wxmcard.imusic.cn/testforpptdownload.pptx",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "3"
    },
    {
      title: "事業(yè)單位法律基礎知識總結.pdf",
      url: "https://wxmcard.imusic.cn/testforpdfdownload.pdf",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "4"
    }
  ],

  // 選項卡第二屏分組
  tabs2Content1: [
    {
      title: "中華人名共和國民用航空法(2015年...).doc",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "1"
    },
    {
      title: "原生申訴表格.xls",
      datatime: "2018-01-26",
      type: "2"
    },
    {
      title: "法律常識大匯集及范例.ppt",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "3"
    },
    {
      title: "事業(yè)單位法律基礎知識總結.pdf",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "4"
    }
  ],
  tabs2Content2: [
    {
      title: "合同模板.doc",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "1"
    }
  ],
  tabs2Content3: [
    {
      title: "民事合同模板.doc",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "1"
    }
  ],
  tabs2Content4: [
    {
      title: "行政合同模板.doc",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "1"
    }
  ],
  tabs2Content5: [
    {
      title: "執(zhí)行合同模板.doc",
      datatime: "2018-01-26",
      effectiveTime: "2018-01-26",
      type: "1"
    }
  ]
},
// 選項卡2切換
tabs2NavClick: function(e) {
  var that = this;
  console.log("完整的數據是:");
  console.log(that.data.tabs2Nav);
  
  console.log("點擊的標簽是:");
  console.log(e.currentTarget.dataset.labelid);

  var newTabs2Content;

  console.log("正在經歷的標簽是:");
  for(var i=0; i
注意

?由于 SF 可能有字數限制,故 章節(jié) 12.1 之后的內容需要小伙伴前往 GitHub 地址查看

?GitHub 地址



jsliang 的文檔庫 由 梁峻榮 采用 知識共享 署名-非商業(yè)性使用-相同方式共享 4.0 國際 許可協(xié)議進行許可。
基于https://github.com/LiangJunro...上的作品創(chuàng)作。
本許可協(xié)議授權之外的使用權限可以從 https://creativecommons.org/l... 處獲得。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114243.html

相關文章

  • 信小程序 bug 中營

    摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內的,有中文文檔,雖然它的文檔說明有點坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯,記得給個...

    he_xd 評論0 收藏0
  • 信小程序 bug 中營

    摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內的,有中文文檔,雖然它的文檔說明有點坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯,記得給個...

    lordharrd 評論0 收藏0
  • 信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里,也歡迎各位 UI組件開發(fā)框架實用庫開發(fā)工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

    Olivia 評論0 收藏0
  • 信小程序從入坑到放棄之坑八:textarea在蘋果手機中的大Bug

    摘要:順便補充一句,微信官方提供的判斷依舊不全面,最新出來的蘋果手機還沒有完全支持相關的坑可以在官方社區(qū)的問答中找到。 首次在這里寫點東西,還請各位大佬擔待點。 摘要:昨天的placeholder-class只是希望各位看官注意,而今天的textarea就絕對是一個超級大坑!而且如果看官手中沒有蘋果手機測試的話,這個可就真的是個坑了!為啥?難道要等到用戶向你反饋你們產品有bug???.......

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<