微信小程序一

微信小程序開發一

官方文檔路徑：https://developers.weixin.qq.com/miniprogram/dev/framework/

開發工具安裝

下載安裝路徑：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

小程序代碼構成

1. .json 後綴的 JSON 配置文件
2. .wxml 後綴的 WXML 模板文件
3. .wxss 後綴的 WXSS 樣式文件
4. .js 後綴的 JS 腳本邏輯文件

app.json全局配置

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。

屬性名	類型	必填	描述
pages	string[]	是	頁面路徑列表
window	Object	否	全局的默認窗口表現
tabBar	Object	否	底部 tab 欄的表現
networkTimeout	Object	否	各類網絡請求的超時時間，單位均爲毫秒。默認值60000
debug	boolean	否	是否開啓 debug 模式，默認關閉
functionalPages	boolean	否	是否啓用插件功能頁，默認關閉
subpackages	Object[]	否	分包結構配置
workers	string	否	Worker 代碼放置的目錄
requiredBackgroundModes	string[]	否	需要在後臺使用的能力，如「音樂播放」
plugins	Object	否	使用到的插件
preloadRule	Object	否	分包預下載規則
resizable	boolean	否	iPad 小程序是否支持屏幕旋轉，默認關閉
navigateToMiniProgramAppIdList	string[]	否	需要跳轉的小程序列表
usingComponents	Object	否	全局自定義組件配置
permission	Object	否	小程序接口權限相關設置
sitemapLocation	String	是	指明 sitemap.json 的位置
style	String	否	指定使用升級後的weui樣式,微信客戶端 7.0 開始，UI 界面進行了大改版,配置 “style”: "v2"可表明啓用新版的組件樣式。

window配置

屬性名	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色
navigationBarTextStyle	string	white	導航欄標題顏色
navigationBarTitleText	string		導航欄標題文字內容
navigationStyle	string	default	導航欄樣式，僅支持以下值：default 默認樣式custom 自定義導航欄，只保留右上角膠囊按鈕
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持
enablePullDownRefresh	boolean	false	是否開啓全局的下拉刷新。
onReachBottomDistance	number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲 px。
pageOrientation	string	portrait	屏幕旋轉設置，支持 auto / portrait / landscape

tabBar配置

屬性名	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色，僅支持十六進制顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色，僅支持十六進制顏色
backgroundColor	HexColor	是		tab 的背景色，僅支持十六進制顏色
borderStyle	string	否	black	tabbar 上邊框的顏色， 僅支持 black / white
list	Array	是		tab 的列表
position	string	否	bottom	tabBar 的位置，僅支持 bottom / top
custom	boolean	否	false	自定義 tabBar

tabBar list配置

屬性名	類型	必填	描述
pagePath	string	是	頁面路徑，必須在 pages 中先定義
text	string	是	tab 上按鈕文字
iconPath	string	否	圖片路徑，icon 大小限制爲 40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。當 position 爲 top 時，不顯示 icon。
selectedIconPath	string	否	選中時的圖片路徑，icon 大小限制爲 40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。當 position 爲 top 時，不顯示 icon。

networkTimeout配置

屬性名	類型	必填	默認值	描述
request	number	否	60000	wx.request 的超時時間，單位：毫秒。
connectSocket	number	否	60000	wx.connectSocket 的超時時間，單位：毫秒。
uploadFile	number	否	60000	wx.uploadFile 的超時時間，單位：毫秒。
downloadFile	number	否	60000	wx.downloadFile 的超時時間，單位：毫秒。

permission配置

屬性名	類型	必填	默認值	描述
scope.userLocation	PermissionObject	否		位置相關權限聲明

scope.userLocation PermissionObject配置

屬性名	類型	必填	默認值	描述
desc	string	是		小程序獲取權限時展示的接口用途說明。最長 30 個字符

example:

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用於小程序位置接口的效果展示" // 高速公路行駛持續後臺定位
    }
  }
}

頁面配置

每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容爲一個 JSON 對象，有以下屬性：

屬性名	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色
navigationBarTextStyle	string	white	導航欄標題顏色
navigationBarTitleText	string		導航欄標題文字內容
navigationStyle	string	default	導航欄樣式，僅支持以下值：default 默認樣式custom 自定義導航欄，只保留右上角膠囊按鈕
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持
enablePullDownRefresh	boolean	false	是否開啓全局的下拉刷新。
onReachBottomDistance	number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲 px。
pageOrientation	string	portrait	屏幕旋轉設置，支持 auto / portrait / landscape
disableScroll	boolean	false	設置爲 true 則頁面整體不能上下滾動。只在頁面配置中有效，無法在 app.json 中設置
usingComponents	Object		頁面自定義組件配置

WXML 模板

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，可以構建出頁面的結構。
通過Mustache {{ }} 的語法把一個變量綁定到界面上，我們稱爲數據綁定。僅僅通過數據綁定還不夠完整的描述狀態和界面的關係，還需要 if/else, for等控制能力，在小程序裏邊，這些控制能力都用 wx: 開頭的屬性來表達。

• 數據綁定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

• 列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

• 條件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

• 模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

WXSS 樣式

WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎麼顯示。
爲了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。
與 CSS 相比，WXSS 擴展的特性有：尺寸單位、樣式導入。

• 尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。

• 樣式導入

使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
框架組件上支持使用 style、class 屬性來控制組件的樣式。

外聯樣式
```
/** common.wxss **/
.small-p {
  padding:5px;
}
```
```
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
```
內聯樣式
```
<view style="color:{{color}};" />
```
```
<view class="normal_view" />
```

JS 邏輯交互

<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})