微信小程式開發學習筆記

内容轉載自：https://blog.csdn.net/zr15829039341/article/details/79872381

部落客：zr1450995198

預設開發目錄

開發目錄解析

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

 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

 wxml

css

 wxss

js

 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

 index.wxml

 about.wxml

 logs.wxml

 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内容 :

 logs.wxml

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

裡邊包含普通文本、<template name="">定義的模闆文本、import調用C頁面内容的指令文本

 about.wxml

A頁面（index.wxml）裡調用B頁面（about.wxml）的指令：

 index.wxml

A頁面的顯示：

二、小程式元件大綱——20170803版本

視圖容器

基礎内容

表單

　　　　

input的type類型詳解：

關于picker的multiSelector的mode詳解： 

導航

多媒體

地圖

畫布

開發資料

客服會話

三、小程式困惑：

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（跳轉到）、并指定目标連結即可

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

四、小程式開發問題彙總

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

五、小程式技巧

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

•  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

 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；

具體如下：

六、小程式友情連結：

公衆平台登入網頁：https://mp.weixin.qq.com

小程式社群：http://developers.weixin.qq.com/

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