支付寶小程序筆記

一、小程序配置文件

1、app.json全局配置

屬性	類型	必填	描述
page	String Array	是	設置頁面路徑
window	Object	否	設置默認頁面的窗口表現
tabBar	Object	否	設置底部 tab 的表現
networkTimeout	Object	否	設置網絡超時時間
debug	Boolean	否	設置是否開啓 debug 模式

• pages 配置項

用於設置小程序的頁面組成，接受一個數組，每一項都是字符串。

以下是 app.json 中 pages 的配置示例：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}123456

注意：
    1. 數組的第一項代表小程序的初始頁面。
    2. 小程序中新增/減少頁面，都需要對 pages 數組進行修改。
    3. 文件名不需要寫文件後綴，因爲框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。1234

• window 配置項

用於設置小程序的狀態欄、導航條、標題、窗口背景色。

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	000000	導航欄背景顏色，如”#000000”
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字體、loading 圖的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新，詳見頁面相關事件處理函數。
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px

以下是 app.json 中 window 的配置示例：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}123456789

• tabBar 配置項

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

屬性說明：

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top，設置成top是無圖標

其中 list 接受一個數組，數組中的每個項都是一個對象，其屬性值如下：

屬性	類型	必填	說明
pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字
iconPath	String	否	圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px，當 postion 爲 top 時，此參數無效
selectedIconPath	String	否	選中時的圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px ，當 postion 爲 top 時，此參數無效

以下是 app.json 中 tabbar 的配置示例：

"tabBar": {
        "color": "#ddd",
        "selectedColor": "#3cc51f",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/components",
                "text": "組件",
                "iconPath": "images/[e-mail]",
                "selectedIconPath": "images/[e-mail]"
            },
            {
                "pagePath": "pages/interface",
                "text": "接口",
                "iconPath": "images/[e-mail]",
                "selectedIconPath": "images/[e-mail]"
            }
        ]
    }1234567891011121314151617181920

注意：
    1. 當設置 position 爲 top 時，將不會顯示 icon。
    2. tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。123

2、page.json 頁面配置

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	000000	導航欄背景顏色，如”#000000”
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新，詳見頁面相關事件處理函數。
disableScroll	Boolean	false	設置爲 true 則頁面整體不能上下滾動；只在 page.json 中有效，無法在 app.json 中設置該項
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}1234567
注意：頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵，

二、小程序注意

1、關於返回按鈕

返回按鈕是出棧操作，如果導航跳轉用navigateTo，會保留當前頁面，也就是將當前頁面入棧，當返回的時候會將當前頁面出棧，使用redirectTo，會使當前頁面出棧，my.reLaunch（{}）關閉所有頁面，跳轉到指定頁面，my.navigateBack根據頁面棧返回不同深度，如果這裏傳遞的深度大於當前頁面棧長度，則返回首頁

getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。返回按鈕即爲出棧操作

注意：不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。

框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下：

路由方式	頁面棧表現
初始化	新頁面入棧
打開新頁面	新頁面入棧
頁面重定向	當前頁面出棧，新頁面入棧
頁面返回	當前頁面出棧
Tab 切換	頁面全部出棧，只留下新的 Tab 頁面

2、小程序與h5頁面通信

<web-view /> 組件是一個可以用來承載H5網頁的組件，會自動鋪滿整個小程序頁面。
每個頁面只能有一個<web-view />，請不要渲染多個<web-view />，會自動鋪滿整個頁面，並覆蓋其它組件。

注意 這裏的鏈接域名必須添加在小程序H5域名白名單裏面

<!-- axml -->
<!-- 指向支付寶首頁的web-view -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

微信小程序訪問html頁面是通過小程序中的WebView作爲網頁承載容器實現的，通過配置WebView的src屬性進行html頁面的加載；當html返回小程序需要引用小程序類庫，調用指定接口進行跳轉。 目前小程序與html交互，都是通過跳轉鏈接的參數拼接進行數據的傳遞的

• 小程序跳轉到html

1、小程序跳轉到html,需要配置跳轉地址到指定的域名白名單內

2、在白名單配置的域名服務器根目錄下添加簽名文件，文件名如：mAPifgWWWz.txt ，內容如：e1756a5045b2504b499cc1cce1d2c605
3、在頁面內添加webView組件，配置地址：

index.wxml
 <web-view src="{{urlPath}}"></web-view>

index.js
  data: {
      urlPath:'https://visualstreet.cn/website/index.html?path=web-view&mytest=showWebView'
  },

當小程序調用html時，可以在WebView的src中寫入html地址；
eg:https://res.wx.qq.com/index.html;
當小程序調用html希望是登錄狀態時，需要將登錄信息以參數形式傳遞給html；
eg:https://res.wx.qq.com/index.html?user=111&unionId=222;
html頁面window.onload將觸發進行參數的獲取：

window.onload = function() {
    console.log(document.location);
    console.log(window.location);
    document.getElementById("txtMsg").innerText=document.location.href;
    document.getElementById("txtDetail").innerText=window.__wxjs_environment;

}

並且可以通過

window.__wxjs_environment

得到小程序的來源

• html 跳轉到小程序

webView內html頁面可以跳轉回指定的小程序頁面，也就是html頁面可以經過一系列操作，將結果參數返回給小程序即可；
使用html返回小程序需要在返回的html頁面引用小程序類

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

調用小程序類中的指定接口進行返回

wx.miniProgram.navigateTo( )
wx.miniProgram.navigateBack( )
wx.miniProgram.switchTab( )
wx.miniProgram.reLaunch( )
wx.miniProgram.redirectTo( )
wx.miniProgram.postMessage( )
wx.miniProgram.getEnv( )

當html 跳轉回小程序時，可以通過到小程序指定router在該頁面獲取參數信息；

eg: wx.miniProgram.navigateTo( 'login/index?htmlvalue=12dasf&htmlvalue2=231')

3、my.getSystemInfo 獲取設備系統信息

windowWidth 這個屬性是窗口寬度，並非是屏幕寬度，如果獲取屏幕寬度，應該使用screeWidth

4、表單元素需要找到默認的類名來修改樣式

.a-textarea-content{
    font-size: 30rpx;
    color: #333333;
    font-family: '微軟雅黑';
}
.a-input-content{
    font-size: 30rpx;
    color: #333333;
    font-family: '微軟雅黑';
}