當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

小程序 - 学习笔记

發布時間：2023/12/6 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了小程序 - 学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?一、小程序文檔筆記

默認開發目錄

開發目錄解析

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  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  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  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

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

示例：

模板中也可以放變量，調用的時候再傳入不同的數據。方便重復調用：

模板引用：

通過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標簽上放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模板

<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  2 <template name="logOne"> 3 <view class="">我是about從logs.wxml調用的模板里邊的內容</view> 4 </template> logs.wxml

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

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

1  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  14 <import src="../logs/logs.wxml" /> 15 <template is="logOne"/> about.wxml

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

1  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頁面的顯示：

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

視圖容器

基礎內容

表單

input的type類型詳解：

關于picker的multiSelector的mode詳解：?

多媒體

地圖

畫布

?

開發數據

客服會話

三、小程序困惑：

1.問：小程序的文本換行？即原來html中的<br />標簽，在小程序中可以用什么模擬？

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

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

2.答：使用console.log調試

3.小程序的頁面跳轉？即原來html中的a鏈接標簽，在小程序中可以用什么模擬？，

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

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

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

js如下，在wxml頁面給view等組件綁定bindTap點擊事件，然后js頁面中配置事件時，讓其navigateTo（跳轉到）、并指定目標鏈接即可

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

四、小程序開發問題匯總

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

五、小程序技巧

頁面加載后切換一次類名，實現初始頁動畫展示、初始頁切換類名、配合一次性定時器切換類名
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固定定位肯定是少不了的。

——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；

具體如下：

六、小程序友情鏈接：

公眾平臺登錄網頁：https://mp.weixin.qq.com

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

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

聲明：

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

　　博主：xing.org1^

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

轉載于:https://www.cnblogs.com/padding1015/p/7252837.html

總結

以上是生活随笔為你收集整理的小程序 - 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： illegal multibyte se
下一篇： shell变量/环境变量和set/env

编程问答

小程序 - 学习笔记

?一、小程序文檔筆記

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

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

3. 框架

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

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

4. ? ?pages屬性——一個數組

相當于app.json下的window里的設置，只不過多了第七條:disableScroll

6. ? ?page.js

組件

——scroll-view

?

——block

?

——template

——inport 作用域

——include 引用模板頁面

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

視圖容器

基礎內容

表單

導航

多媒體

地圖

畫布

?

開發數據

客服會話

三、小程序困惑：

四、小程序開發問題匯總

Padding的問題

字體大小、間距問題

模擬機可以css調用背景圖但是真機不顯示background-image

rpx和px的使用場景

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

小程序本頁面內樓層跳轉

如何讓傳入的json數據渲染到頁面后，帶組件的標簽格式？或者正確區分并翻譯我的組件代碼和文本？

關于頁面跳轉

五、小程序技巧

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

返回頂部 效果

css

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

Console.log(event)

關于rpx單位的用法：

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

如何實現“萬能（不管內部文字極限）”垂直居中

?

終于研究出來怎么讓Scroll-x實現橫向滾動拉！！?

六、小程序友情鏈接：

總結

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

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

3.　　框架

　　相當于app.json下的window里的設置，只不過多了第七條:disableScroll

?　　

返回頂部效果