微信小程序 發現之旅（一）—— 項目搭建與頁面跳轉

開發微信小程序須要註冊一個小程序帳號，具體流程能夠參照官方教程：

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

開通帳戶以後，在 「開發設置」 中獲取到 AppID，而後打開開發工具建立項目

 

1、建立項目

 建立項目的時候，建議把 AppId 填上，否則會影響部分功能的使用

 一個 AppId 能夠開發多個小程序，不過發佈的時候只能發佈一個

 

生成的項目結構以下：

其中 project.config.json 是整個項目的配置文件，裏面包含了微信（小程序基礎庫）版本、appid 等信息

具體配置項能夠參考 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

utils 文件夾用於存放一些公用腳本，pages 文件夾存放頁面文件，app.js、app.json、app.wxss 構成程序主體

 

2、認識頁面

微信小程序中採用 WXML + WXSS + JS + JSON 的方式渲染頁面

 

1. WXML  網頁模板，用於編譯小程序的 html 部分

微信小程序也採用了MVVM的形式，因此 WXML 實際寫法更相似於 Vue

好比常見的用 {{ }} 綁定數據

// 基礎綁定
<view> {{ message }} </view>

// 組件屬性
<view id="item-{{id}}"> </view>

// 控制屬性
<view wx:if="{{condition}}"> </view>

WXML 還能夠實現列表渲染、自定義模板，詳情能夠查看文檔中關於WXML的介紹

須要留意的是，小程序底層將 html 元素都封裝成了組件

因此不能在 WXML 文件中直接使用 div、p、span 等標籤，而是使用組件

 

2. WXSS 樣式語言，基於CSS擴展

能夠直接寫CSS樣式，可是隻支持部分選擇器，好比 * 和 > 選擇器都是不支持的（如今都能支持了）

另外只有 app.wxss 中的樣式是全局樣式，對全部組件生效。pages 目錄下的 wxss 僅對當前組件生效

WXSS 中還新增了尺寸單位 rpx，並規定屏幕寬度固定爲750rpx

因此在寬度爲 750px 的設計稿中，1rpx = 750/750 = 1px，

若是是寬度爲 640px 的設計稿，1rpx = 750/640 = 1.17px

 

3. js 還須要解釋麼

微信小程序中沒有再對 js 進行擴展，只是在觸發事件的時候，分爲 bind 和 catch 兩種形式

<view id="outer" bind:tap="handleTap1">
  outer view
  <view id="middle" catch:tap="handleTap2">
    middle view
    <view id="inner" bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

兩者的區別在於，bind 不會阻止冒泡事件向上冒泡，catch 能夠阻止冒泡事件向上冒泡

另外，bind 和 catch 後面的冒號能夠省略

 

4. json 頁面配置文件

app.json 是小程序的全局配置文件，包括了小程序的全部頁面路徑、界面表現等

詳細配置信息能夠查看這裏：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

pages 目錄下的 json 文件和 app.json 相似，可是 page.json 只對當前組件生效

 

3、添加 tabBar

app.json 中有一個配置項 tabBar，能夠經過它生成 tab 欄，具體的文檔以下：

建立項目時生成的快速模板，包含「首頁」和「日誌」兩個頁面，其對應的 tabBar 能夠這麼寫：

"tabBar": {
    "selectedColor": "#1296db",
    "borderStyle": "#e4e4e4",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "assets/homepage.png",
        "selectedIconPath": "assets/homepage_fill.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "assets/order.png",
        "selectedIconPath": "assets/order_fill.png",
        "text": "日誌"
      }
    ]
  }

這裏 list 中的 pagepath 是頁面路徑，至關於路由地址

iconPath 和 selectedIconPath 指的是對應的圖標路徑

但圖標路徑只能是本地圖片路徑，不能使用網絡圖片，也沒法用 class 引入字體圖標

 配置好的 tabBar 效果：

 

4、導航方法

經過 tabBar 能夠實現簡單的導航跳轉功能，此外還可使用 wx.navigateTo、wx.switchTab 等導航方法來切換頁面

若是已經設置了 tabBar，那麼在使用這些導航方法的時候，須要注意一些細節：

wx.navigateTo 只能跳轉到沒有在 tabBar 上配置的頁面

若是須要跳轉到 tabBar 配置的頁面，須要使用 wx.switchTab

 

舉個栗子~

在 pages 下新建一個頁面

PS：能夠在文件夾下快速建立 page 組成文件（wxml、wxss、js、json）

這下就有了 index、 logs、flash 三個頁面

其中 index 和 logs 已經在 tabBar 中的 list 添加了路徑，而 flash 沒有被添加，因此 tabBar 只有「首頁」和「日誌」

在三個頁面中都添加一個 <button>

 

並添加對應的事件處理函數

若是全部的頁面都使用 wx.navigateTo 方法的話，

當 url: '/pages/index/index' 或者 url: '/pages/logs/logs'

沒法正常切換頁面

而 url: '/pages/flash/flash' 能正常切換

這時只要在跳轉到「首頁」和「日誌」的方法中，使用 wx.switchTab 就能正常切換

過程以下：