小程序 - 學習筆記

 1、小程序文檔筆記

 

默認開發目錄

開發目錄解析

1.　 app.js、app.json、app.wxss 這三個文件必須有不能刪掉。

 　　一個小程序主體部分由這三個文件組成，並且必須放在項目的根目錄

• js後綴的是腳本文件，調用小程序框架提供的 API—— API 文檔
• json後綴的文件是對整個小程序的全局配置文件——配置詳解
  • 　　微信小程序中的每個頁面的【路徑+頁面名】都須要寫在 app.json 的 pages 中，用來激活。

　　例如，你沒寫他就會報這個錯

     

 app.json文件的pages屬性的路徑配置與tabBar內的list屬性的路徑配置必須一一對應，協調一致，否則調用了哪一個頁面，兩者中有一個沒配置都不起做用

另外，pages屬性是要必定必定要在引用頁面的時候配置好路徑。

就像官方文檔說的：

【注意】json文件不要加任何註釋信息，任何json文件都是這樣；

• wxss後綴的是樣式表文件。是整個小程序的公共樣式表
• 其餘自定義文件夾下的頁面中，wxml後綴的文件是頁面結構文件。

　　

2.　pages文件夾下的index 頁面和 logs 頁面

 pages 中的第一個頁面是小程序的首頁，一個小程序頁面由四個文件組成。

index 頁面——小程序的歡迎頁

頁面的樣式表（.wxss文件)是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。

若是不指定頁面的樣式表，也能夠在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。【.json文件同理】

index.js、index.json、index.wxml、index.wxss——描述頁面的這四個文件必須具備相同的路徑與文件名

logs 頁面——小程序啓動日誌的展現頁

 

3.　　框架

小程序的核心—響應的數據綁定系統

即：在邏輯層修改數據，視圖層就會作相應的更新

視圖層

視圖層（View）描述語言：wxml，wxss

邏輯層（App Service）框架：基於javascript

 

//util文件夾下的util.js

 1 function formatTime(date) {  2   var year = date.getFullYear()  3   var month = date.getMonth() + 1
 4   var day = date.getDate()  5 
 6   var hour = date.getHours()  7   var minute = date.getMinutes()  8   var second = date.getSeconds()  9 
10 
11   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 } 13 
14 function formatNumber(n) { 15   n = n.toString() 16   return n[1] ? n : '0' + n 17 } 18 
19 module.exports = { 20  formatTime: formatTime 21 }

View Code

判斷時分秒是否大於10，不大於10，前邊加一個0：

 n[1] ? n : '0' + n

 

4.    pages屬性——一個數組

每一項都是字符串，寫入路徑信息，來指定小程序由哪些頁面組成。字符串之間用逗號隔開。

每一項表明對應頁面的【路徑+文件名】信息，數組的第一項表明小程序的初始頁面。

小程序中新增/減小頁面，都須要對 pages 數組進行修改。

 

5.   page.json

　　至關於app.json下的window裏的設置，只不過多了第七條:disableScroll

　　disableScroll：true,

　　這個狀況，設置了也沒用，頁面超出後照樣滾動，問題待解決。

 

6.    page.js

　　page(data):

　　data 數據必須是能夠轉成 JSON 的格式：字符串，數字，布爾值，對象，數組。

 

 7.　　wxs

該有的在文檔都有： https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/01wxs-module.html

如下是我實驗的：

一個wxs還能夠調用兩個wxs甚至多個

 

　　

 

 

多個頁面能夠嵌套調用，好比：b調a，c調b，那麼在c裏邊也能夠輸出a裏邊的原始數據

文件a與其原始數據

文件b的調用

文件c的調用

 

注意，定義了變量還要輸出變量：「exports」的拼寫，另外對象裏邊的結構也老是寫錯，key：value，（鍵名、冒號、鍵值、逗號、最後一條沒有逗號，更沒有分號）

 

 

能夠把js中的data的數據傳入到wxs中，直接使用就行了。

 

<wxs src="./../tools.wxs" module = "toolJs"/>【能夠閉合標籤引入wxs頁面】

直接把test.js中的數據當作參數傳到wxs的函數中，調用獲得boo函數的結果。如：{{toolJs.boo(msg)}}

 

tool.wxs截圖在上邊(是文件a的截圖)，text.js文件截圖以下

 

組件

——scroll-view

經驗總結、實驗代碼以下

html

 1 <view class="container">
 2   <view class="dir-header">
 3  scroll-view-y 垂直滾動練習  4   </view>
 5   <scroll-view class="scroll-view" scroll-y enable-back-to-top bindscroll="scrollStart" bindscrolltoupper="scrollTop" bindscrolltolower="scrollBottom">
 6   <!-- 
 7  自由滾動 練習  8  bindscrolltoupper="upper"  9  bindscrolltolower="lower" 10  bindscroll="scroll" 11   -->
12     <view class="one">第一部分</view>
13     <view class="two">第二部分</view>
14     <view class="three">第三部分</view>
15     <view class="four">第四部分</view>
16     <view class="five">第五部分</view>
17     <view class="six">第六部分</view>
18     <view class="seven">第七部分</view>
19   </scroll-view>
20   <view class="btn-area">
21     <button class="btnScroll" size="mini">鼠標移上去+滾輪滑動查看</button>
22   </view>
23   <scroll-view class="scroll-view scroll-view1" scroll-y enable-back-to-top scroll-into-view="{{toView}}">
24   <!-- 配合按鈕點擊tap函數，製做點擊 翻動 效果 25  scroll-into-view="{{toView}}" 26  -->
27     <view class="one" id="one">第一部分</view>
28     <view class="two" id="two">第二部分</view>
29     <view class="three" id="three">第三部分</view>
30     <view class="four" id="four">第四部分</view>
31     <view class="five" id="five">第五部分</view>
32     <view class="six" id="six">第六部分</view>
33     <view class="seven" id="seven">第七部分</view>
34   </scroll-view>
35   <view class="btn-area">
36     <button class="btnScroll" size="mini" bindtap="tap">點擊我來切換內容哦</button>
37   </view>
38   <scroll-view class="scroll-view scroll-view2" scroll-y enable-back-to-top scroll-top="{{scrollTop}}">
39   <!-- 配合按鈕點擊tapMove函數，製做點擊向上滾動指定距離效果 40  scroll-top="{{scrollTop}}" -->
41     <view class="one" id="ones">第一部分</view>
42     <view class="two" id="twos">第二部分</view>
43     <view class="three" id="threes">第三部分</view>
44     <view class="four" id="fours">第四部分</view>
45     <view class="five" id="fives">第五部分</view>
46     <view class="six" id="sixs">第六部分</view>
47     <view class="seven" id="sevens">第七部分</view>
48   </scroll-view>
49    <view class="btn-area">
50     <button size="mini" bindtap="tapMove">點擊我來實現內容滾動哦</button>
51   </view>
52 </view>

wxml

css

 1 .container{
 2  padding:20rpx 0;
 3 }
 4 .dir-header{
 5  font-size: 16px;
 6  color: #aaa;
 7  text-align: center;
 8  font-weight: bold;
 9 }
10 .scroll-view,.scroll-view2{
11  height: 120px; 
12  margin-top: 10px;
13 }
14 .scroll-view1{
15  height: 100px; 
16 }
17 .scroll-view view{
18  height: 100px;
19  line-height: 100px;
20  text-align: center;
21   /* border: 1px solid #188eee; */
22 }
23 .one{
24  background: #f7f7f7;
25  color: #aaa;
26 }
27 .two{
28  background: #f1f1f1;
29  color: #c7c7c7;
30 }
31 .three{
32  background: #e9e9e9;
33  color: #d2d2d2;
34 }
35 .four{
36  background: #e1e1e1;
37  color: #d8d8d8;
38 }
39 .five{
40  background: #d8d8d8;
41  color: #e1e1e1;
42 }
43 .six{
44  background: #d2d2d2;
45  color: #e9e9e9;
46 }
47 .seven{
48  background: #c7c7c7;
49  color: #f1f1f1;
50 }
51 /*btn-area */
52 .btn-area{
53  margin-top: 10px;
54 }
55 .btnScroll{margin-right: 5px;}

wxss

js

 1 // 變量定義區域
 2 var scrollorder = ["one", "two", "three", "four", "five", "six", "seven"];  3 var scrollorder_s = ["ones", "twos", "threes", "fours", "fives", "sixs", "sevens"];  4 // 調用page方法api
 5 Page({  6   /**  7  * 頁面的初始數據  8    */
 9  data: { 10     toView: "one", 11     scrollTop: 100
12  }, 13   /** 14  * 用戶的自定義數據 15    */
16   // 3條不一樣效果滾動事件的觸發反饋
17   scrollStart: function (event) { 18     console.log("scrolling。。。"); 19  }, 20   scrollTop:function(){ 21     console.log("到頂了"); 22  }, 23   scrollBottom:function(){ 24     console.log("到底了"); 25  }, 26   // 點擊一次按鈕，向上滾動完一個view內容
27   // 本身加了判斷條件，若是翻頁到最後一個，就讓他返回到第一個
28   // 這個i換成--，就能夠作成輪播圖的左右切換效果了
29   // 另外若是能夠設置滾動一次的距離，就能夠作成觸摸效果的左右切換banner圖了。
30   tap:function(event){ 31     for(var i = 0; i < scrollorder.length; ++i){ 32       if(scrollorder[i] === this.data.toView){ 33         // console.log(i);
34         if (i == scrollorder.length-1) { 35           this.setData({ 36             toView: scrollorder[0] 37  }) 38         }else{ 39             this.setData({ 40               toView: scrollorder[i + 1] 41  }) 42  } 43         break; 44  } 45  } 46  }, 47   // 點擊按鈕，向上滾動自定義距離的內容
48   tapMove:function(event){ 49     console.log("點擊了"); 50     // 這個還得判斷，若是滾到頂部了就讓他變回來或者提示
51     // 另外，100 和 7 能夠後期動態判斷
52     if(this.data.scrollTop >= (100 * 7)){ 53       console.log("您已經查看底部了哦") 54  } 55     this.setData({ 56       // 這裏，若是最後加100，而且總盒子scroll-view的高度也是100的話，能夠模擬tapMove的效果，點擊一下就是翻一頁
57       // scrollTop: this.data.scrollTop + 100
58       scrollTop:this.data.scrollTop + 20
59  }) 60  }, 61 })

js

 　　

——block

　　　　<block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性（想wx:if，wx:else，wx:for等）。

 

——template

模板定義：

template，雙標籤，且要給他起一個獨一無二的name

<template name=「onlyName」>模板內容</template>

示例：

模板中也能夠放變量，調用的時候再傳入不一樣的數據。方便重複調用：

<template name=「onlyName」>

    <view >{{text}}</view>

</template>

 

模板引用：

經過import引用、調用目標文件中<template>中定義的內容

調用某個wxml頁面中定義好的模板部分，template處用is調用

1 <import src=「定義模板的頁面路徑」/>
2 <template is=「要引用的模板的name值」/>

示例：

技巧：

template的is中可使用Mustache語法，裏邊放判斷用的三元表達式，這樣就能夠動態性的根據需求渲染模板。

文檔案例：

問題：

在模板頁面設置的css樣式，調用到另外一個頁面後，是不受管制的，因此可能須要複製一份css樣式到調用的頁面，或者把模板用到的css寫到公用樣式app.wxss中。

還有一種方法是調用wxss文件：@import方法：

 

@import "../about/about.wxss"; 

 

這個方法，能夠把about.wxss裏邊的樣式所有調到目標頁面，可是仍是建議公用的代碼放到app.wxss中。

 

調用帶數據的模板：

<template is="aboutTwo" data="{{msg:'我是index.wxml裏邊傳入的數據'}}"/>

問題：

目前用這種，在template標籤上放data屬性來傳入數據值得方法。可是若是數據多了咋辦？那就要想怎麼把數據放到js文件的data中，而後在template中調用。

永遠記住一點

想要傳入多個參數，能夠試試三個點的符號加對象/數組名字的方法，這在es6中的新方法，在vue，小程序，甚至pug中均可用，真的很好用。

<template is="aboutTwo" data="{{...對象名}}"/> 

模板（template）的做用域：

模板擁有本身的做用域，因此js數據不會跟着模板結構被引過來，就和css也沒過來同樣，只能使用data傳入的數據。不過能夠把這些公共的數據放到app.js的data中，公用。

 

下邊是demo代碼：2017-09-01  17:19:42

<view class="cont">
  <view class="block">template模板學習--import引用</view>
  <import src="../about/about.wxml" />
  <template is="aboutOne" />
  <view class="info">模板具備做用域——以上這種，在b頁面裏引用了a，再在c頁面裏引用b，那麼在c裏邊智能顯示b裏邊的內容，a模板裏的不會顯示</view>

  <view class="block">帶數據的模板——數據傳輸失敗</view>
  <import src="../about/about.wxml" />
  <template is="aboutTwo" />
  <view class="info">模板帶有數據，在about.wxml裏邊有一個變量，變量的值放在about.js中，可是引用到index頁面後，變量沒渲染出來，這說明了，js數據不會跟着模板結構被引過來，就和css也沒過來同樣。</view>

  <view class="block">帶數據的模板2——本頁定義數據</view>
  <import src="../about/about.wxml" />
  <template is="aboutTwo" data="{{msg:'我是 index.wxml 裏邊傳入的數據'}}"/>
  <view class="info">模板裏邊的數據沒有進來，可是在調用的時候，咱們傳入了一個數據，他也正常解析了。看來，在調用的頁面，傳入當前頁面須要的對應值纔是正解。</view>

  <view class="block">帶數據的模板3——本頁js文件定義數據</view>
  <import src="../about/about.wxml" />
  <template is="aboutTwo" data="{{...dataInfo}}"/>
  <view class="info">在標籤裏邊傳數據是很不明智的，萬一數據多了就麻煩了，此次測試把須要的數據放到index.js文件中，而後在data屬性這裏先放三個點點，再放一個對象名。歐了，其餘任何多少個數據均可以在js文件中羅列了。不過名字要和模板所在頁的變量名字相同，否則找不到數據的        </view>
</view>

index.wxml

 1 <template name="aboutOne">
 2   <text>pages/about/about.wxml</text>
 3 </template>
 4 <template name="aboutTwo">
 5   <view class="info">我是帶數據的模板的說明部分</view>
 6   <text>{{msg}}</text>
 7 </template>
 8 
 9 <import src="../logs/logs.wxml" />
10 <template is="logOne"/>

about.wxml

1 <template name="logOne">
2   <view class="">我是logs.wxml模板裏邊的內容</view>
3 </template>

logs.wxml

 1 about.js  2 
 3 data: {  4  msg: "我是about裏邊的數據",  5  }  6 
 7 index.js  8 
 9 data: { 10  motto: 'Hello World', 11  userInfo: {}, 12  dataInfo: { 13  msg: "我是放在 index.js 裏邊的數據哦！", 14  msg2: "我是放在 index.js 裏邊的數據哦！", 15  msg3: "我是放在 index.js 裏邊的數據哦！", 16  msg4: "我是放在 index.js 裏邊的數據哦！", 17  msg5: "我是放在 index.js 裏邊的數據哦！", 18  msg6: "我是放在 index.js 裏邊的數據哦！", 19  } 20   }

about.js+index.js

 

——inport 做用域

先說一個官方文檔中的說法：

　官方文檔的這種作法，應該在B.html定義的b模板中調用A中的a模板

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
    <template is="A" />
</template>

親測有效，這樣就能夠連環調，不過有缺陷就是，若是a裏邊的內容是交叉放在b裏邊的，就沒辦法這樣作了，畢竟在c裏邊調取的是一整個b，就沒辦法再拆開穿插了。

 

——include 引用模板頁面

注意兩點：

include引用除<template>模板之外的一整張頁面的內容：

include引用的是一整個頁面，若是目標頁面當中有template模板的話，template裏邊的內容不會被調取出來。

可是，A頁面經過include，能夠調用到B頁面裏邊經過import調取來的C頁面的內容 :

即、A頁面include目標頁面爲B頁面，若是目標頁面B中使用import和<template is=「C頁面模板名字」>配合調用了第三個頁面C裏邊的內容C-C，那麼第三個頁面的C-C內容也會在A頁面裏顯示出來。

 示例：

C頁面（logs.wxml）的 C-C內容 :

1 <!--logs.wxml-->
2 <template name="logOne">
3   <view class="">我是about從logs.wxml調用的模板裏邊的內容</view>
4 </template>

logs.wxml

B頁面（about.wxml）的內容：

裏邊包含普通文本、<template name="">定義的模板文本、import調用C頁面內容的命令文本

 1 <!--pages/about/about.wxml-->
 2 <view >只有我是about頁面中沒有在模板裏邊的部分</view>
 3 
 4 <!--定義模板  -->
 5 <template name="aboutOne">
 6   <text>pages/about/about.wxml</text>
 7 </template>
 8 <template name="aboutTwo">
 9   <view class="info">我是帶數據的模板的說明部分</view>
10   <text>{{msg}}</text>
11 </template>
12 
13 <!--調用logs.wxml的模板  -->
14 <import  src="../logs/logs.wxml" />
15 <template is="logOne"/>

about.wxml

A頁面（index.wxml）裏調用B頁面（about.wxml）的命令：

1   <!--include about.wxml裏邊的內容 -->
2   <view class="block">include引用模板學習</view>
3   <view class="info">include引用頁面，可是目標頁面當中在template裏的那部份內容不會被調過來。</view>
4   <include src="../about/about.wxml" />
5   <view class="info info-error">神奇的是：include引用了目標文件中調用的第三方頁面模板裏的內容</view>

index.wxml

A頁面的顯示：

 

2、小程序組件大綱——20170803版本

視圖容器

基礎內容

 

 

表單

　　　　

input的type類型詳解：

關於picker的multiSelector的mode詳解： 

導航

 

多媒體

 

地圖

畫布

 

開發數據

 

客服會話

 

 

3、小程序困惑：

1.問：小程序的文本換行？即原來html中的<br />標籤，在小程序中能夠用什麼模擬？

1.答：小程序text文本組件支持轉義字符，那麼\n就能夠用來換行。示例以下：

<text>小程序\n換行</text>

2.問：小程序的彈窗提示怎麼作？即原來js中的alert功能，在小程序中能夠用什麼模擬？

2.答：使用console.log調試

3.小程序的頁面跳轉？即原來html中的a連接標籤，在小程序中能夠用什麼模擬？，

3.答：用navigator或用js編碼配置來實現小程序的頁面跳轉。

navigator以下：設置open-type爲switchTab（導航間頁面切換）或者reLaunch（應用內部跳轉）,

 <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>

這樣點擊「切換 Tab」文字就能進行跳轉。

js以下，在wxml頁面給view等組件綁定bindTap點擊事件，而後js頁面中配置事件時，讓其navigateTo（跳轉到）、並指定目標連接便可

問：如何跳轉到指定的外部連接？

 

4、小程序開發問題彙總

2017-08-08  11:30:30

• Padding的問題

必定要計算在寬度裏邊

若寬度是百分百，則儘可能用內部內容的margin解決，否則會撐開頁面，致使左右滑動的

不計算在裏邊，就用box-sizing設置一下

 

• 字體大小、間距問題

手機看和電腦看有差距

因此涉及到的時候，要定可適應性的死寬度比較合適，不光本身，其餘也是同樣，不一樣的界面看，

雖然margin、padding一致，可是屏幕寬度不同，最後留下的間隙就會有便宜，出現問題。

 

 2017-08-11  11:28:23

• 模擬機能夠css調用背景圖可是真機不顯示background-image

1  background: linear-gradient(to right, rgba(0,140,201,0.8),rgba(0,158,165,0.8)),url('https://pic.cnblogs.com/avatar/956663/20170428110911.png') no-repeat center/cover;

上邊那張圖片高興地太早了，真機測試的時候，那張圖根本就出不來。

 

仔細想一想，我這張圖是用的background-image。我想我學的知識真的是餵了狗了。

在小程序的開發文檔（mp.weixin.qq.com/debug/wxadoc/dev/qa.html）中有這麼一句話被我拋在了腦後：

 

既然如此，不廢話，那就尋找解決/替代方法吧：

解決辦法老是有的，不就是網絡圖片嗎！我讓這些圖在我本身測試的時候，先調取我的網絡空間地址啊，作上標記，等到上線的時候把鏈接再改過來就行了。

至於base64：

http://base64.xpcha.com/indexie.php    這是一個base64在線轉碼的網站。能夠轉換字符或者圖片的編碼。

這個網站，

 

第一步選擇圖片編碼的tab，

第二步選擇本地文件，

第三步複製編碼，

第四步把這逆天的代碼連接複製到對應的url中去。

搞定！

 

 2017-08-10  16:49:44

• rpx和px的使用場景

字體大小、寬度等要用到rpx，而且數值是px的兩倍。否則小的設備觀看是會被截掉的。

px用在margin、padding啥的上邊。重點是上下邊距和間距，左右的也可能要自適應式的、

 

• 溢出隱藏+小標點符號不能顯示

溢出隱藏+小標點符號不能顯示，不知道是配錯組件仍是由於啥。有待實驗。

我沒有實現的狀況是：view裏邊套了text，給view溢出隱藏的三條代碼沒用，把代碼給了text並設置其display爲block也不出效果

 

• 小程序本頁面內樓層跳轉

用到scroll-view組件：

講解頁面：http://blog.csdn.net/liona_koukou/article/details/54408396
組件文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=2017112
大體思路就是：把全部須要滾動、跳轉的東西都放到scroll-view中，而後給scrol-view一個scroll-into-view屬性，

屬性值用變量表示，在js數據中進行判斷點擊的是哪一個按鈕，傳參改變scroll-into-view的值。

這種想法是能夠，可是不適合我本次項目。畢竟scroll-view要設置固定的高度，若是沒有固高，scroll-into-view根本不起做用

 

• 如何讓傳入的json數據渲染到頁面後，帶組件的標籤格式？或者正確區分並翻譯個人組件代碼和文本？

好比我json裏這麼寫：

  

翻譯結果—：

這麼作翻譯不出來。其餘方法有嗎？我想在json中插入圖片

哈哈，我用了if判斷，json中有連接的地方我就給他顯示這一組view組件，不然就是另外一組：

 

Json數據中這樣寫：

這樣有圖片地址的就會調用圖片地址，而且把結構寫成if的狀況，沒有picsrc的就會直接一個text組件！

 

• 關於頁面跳轉

我用的js的跳轉方法，加一個點擊監聽，bindtap後執行函數wx.navigateTo 可是沒反應老報錯，

一直返回跳轉失敗和跳轉完成的函數內容。後來才發現，是我沒有在app.json裏邊加入新增長的頁面，致使跳轉不成功的。

如下是報錯截圖

因此app.json的頁面註冊真的很重要，切記切記！大問題。

——跳轉路徑src的填寫

直接寫路徑名便可，不用加.wxml，否則報錯。

跳轉到應用內、非tabBar頁面

就是說你src的連接處填寫的頁面，不能是外部連接，而且內部的頁面如今app.json上註冊了，

而且不是tabBar正在使用的頁面，而且連接的書寫方式不能加後綴名字！！才能夠跳轉成功！所以看來，

要跳轉到該頁面時，在頁面的命名上，wxml頁面和其餘js、css頁面不能重名？

通過試驗，是能夠重名的——以下:由於我註冊text頁面的時候，自動加了其餘三個同名的文件，

可是最後我調用這個目錄下的text名字文件時，依舊跳轉成功，看來他本身只認wxml

 

 

5、小程序技巧

• 頁面加載後切換一次類名，實現初始頁動畫展現、初始頁切換類名、配合一次性定時器切換類名

• 1 onLoad: function (options) { 2 
  3  setTimeout(()=>{ 4 
  5  this.setData({ a: 'a-class-name', b: 'b-class-name' }) 6 
  7     },1000)},

  View Code

   

• 返回頂部 效果

 要配合scroll-view組件、wx:if功能、、、、具體代碼以下：

主要是scroll-top這個屬性目前在微信中是scroll-view組件支持的，因此須要他配合完成。

wxml

1 <scroll-view class="scrollview-style" scroll-y bindscroll="wrapScroll" bindscrolltolower= "scrolltolower" scroll-top="{{scrollTop}}">
2     <view class="toTop" bindtap="goTop" wx:if="{{floorstatus}}">返回頂部</view>
3 <view>接下來的其餘各類內容。。。</view>
4 </scroll-view>

html代碼解析: 

scroll-view做爲整個頁面的大package，全部頁面內容都要放在滾動組件內部

至於返回頂部按鈕，由於是要固定在頁面底部的，因此能夠不放在scroll-view組件中，這裏我放進去了。

css

 1  1 .scrollview-style {
 2  2 background: #fff;
 3  3 position: absolute;
 4  4 left: 0;
 5  5 top: 0;
 6  6 bottom: 0;
 7  7 right: 0;
 8  8 }
 9  9 10 10 .toTop {
11 11 position: fixed;
12 12 background: #f4f5f5;
13 13 border: 1px solid #ddd;
14 14 right: 40rpx;
15 15 bottom: 40rpx;
16 16 z-index: 999;
17 17 width: 26px;
18 18 height: 26px;
19 19 padding: 8px;
20 20 text-align: center;
21 21 line-height: 14px;
22 22 border-radius: 50%;
23 23 font-size: 12px;
24 24 }

css

css代碼解析：

croll-view給了一個絕對定位，不過他的上下左右皆是0，這樣目的是爲了把scroll-view撐開。

不過通過我後來的測試，把絕對定位這一套代碼刪掉，而後只要有scroll-y屬性都是能夠的，

關鍵是這個屬性，放在scroll-view內的全部內容組成的頁面才能夠滾動。

而後返回頂部這個按鈕的樣式就沒啥好說的了。

根據本身想要的效果隨便設置了，可是fixed固定定位確定是少不了的。

js

——data配置

data: { scrollTop: 0, floorstatus: false }

先說初始數據這裏，

由於wxml中要調取，因此會須要一個初始數據放在data這裏：

scrollTop是對應scroll-view這裏的距離頂部距離，初始是0。

Floorstatus這裏是定義返回頂部按鈕的初始渲染狀態，初始值爲false，

這樣wx:if進行判斷爲否的話，view那條代碼就不會被渲染，咱們在頁面中就看不到按鈕，由於他沒有被編譯出來，死在了if手上。

——函數配置

 1 //scroll-view組件的滾動事件函數
 2 wrapScroll: function (e) {  3     if (e.detail.scrollTop > 500) {  4       this.setData({  5         floorstatus: true
 6  });  7     } else {  8       this.setData({  9         floorstatus: false
10  }); 11  } 12   }

1 //返回頂部按鈕的點擊事件
2 goTop: function (e) { 3     //console.log("點擊了我了"); 4     this.setData({ 5       scrollTop: 0
6  }) 7 }

以後開始動態的改變這兩個值進而改變頁面的呈現效果：

scroll-view給一個滾動的事件監聽wrapScroll，當頁面滾動的時候他就判斷scroll-top的大小，若是大於咱們設定的值（這裏是500）的時候，他就執行一條設置數據的代碼，不然就執行另外一條設置數據的代碼。

而他設置的數據爲設定返回頂部按鈕的渲染狀態值——若是大於500就設置data裏邊的Floorstatus爲true，反應到wxml中，if條件成立，就渲染view組件。進而咱們就能看到他了。反之不渲染咱們就看不到這個按鈕。

至於返回按鈕的那個點擊事件goTop，原理上就是要點擊他，改變scroll-view的高度值，因此在函數中，直接setData，改變高度值爲0，反映到頁面上的效果就是頁面返回到了頂部。

從這裏邏輯中，我以爲收穫最大的是用if判斷值，動態改變一個變量等於false仍是ture，而後在wxml中再if判斷，變量等於false仍是ture，這樣就能千迴百轉的完成邏輯。

我就說if是個好東西，把咱們的思惟傳遞給電腦。由於他只分是非，而人類有時候卻分不了是非。。。

 

• 動態的添加內容、渲染結構

wx:for功能——列表渲染！！

重複的結構均可以用其配置，而後傳數據就ok；

 

另外，配合wx:if、wx:else來判斷並動態選擇將參數傳入哪一個結構中

 

• Console.log(event)

Event::事件對象，方法在執行的時候，當前環境攜帶的一些信息

能夠打印出來、獲取不少信息，根據這些信息再度尋找你須要的信息的路徑。如小程序裏的event.detail.width;;;;

 

• 關於rpx單位的用法：

rpx是用來自適應的，設計圖是750px的模式下，用rpx直接一比一復刻建模，出來後就是標準的i6的界面，也能自適應絕大多數頁面了

不過有些小的5px、3px、1px啥的間距或border，我就用px了，

能夠大概記憶：1px = 2rpx;固然這麼說很不科學，他們並不全等，可是作頁面的時候這麼想着能夠很快地計算粗大概的數值。

 

• 巧用if判斷和for循環搭建結構

判斷真的好用，在這個代碼中，沒有數據的時候，下邊的結構就不會渲染出來。

還能夠利用判斷顯示隱藏、添加刪除類名啥的，達到本身想要的效果。

 

• 如何實現「萬能（無論內部文字極限）」垂直居中

見我另外一篇博文的總結：http://www.cnblogs.com/padding1015/p/6194422.html

 

• 終於研究出來怎麼讓Scroll-x實現橫向滾動拉！！ 

代碼關鍵：

Scroll-view關鍵css： width：100%；scroll-x=「true」

裏邊view-wrap的關鍵css：width：要多長有多長px；（確保往後全部內容都能裝下），不清楚浮動

最裏邊的image/內容：float：left；

具體以下：

 

 

6、小程序友情連接：

公衆平臺登陸網頁：https://mp.weixin.qq.com

小程序社區：http://developers.weixin.qq.com/

微信小程序你不知道的事（小程序系統文章）：http://caibaojian.com/toutiao/6663

 

 

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請註明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/