小程序之入門佈局篇

前言

閱讀這篇文章你將學到：

• 快速啓動一個小程序項目
• 快速上手小程序重構業務
• 在頁面佈局中遇到的一些坑
• 使用mpvue框架進行快速開發

基礎

起步

安裝

安裝微信web開發者工具，根據本身的操做系統下載對應的安裝包進行安裝，有關開發者工具更詳細的介紹能夠查看《開發者工具介紹》 。

註冊

當打開微信開發者工具後，會須要咱們填寫AppID，點擊註冊申請AppID

將申請好的AppID複製填入相應位置，根據相應提示便可成功建立一個項目。

工具

以下圖所示：

• ①預覽模擬器
• ②調試工具
• ③編譯模式
  • 可保存當前頁的調試
• ④手機預覽
  • Ctrl+Shift+P爲快捷鍵，可沒必要拿手機掃碼預覽
• ⑤目錄樹
  • 文件操做
    • 1.在pages下新建一個文件夾後，可右鍵點擊page生成4個模板頁面wxml、wxss、js、json
    • 2.在app.json的pages字段，添加須要新建的頁面路徑，也會自動生成改頁面所須要的文件
• ⑦ 小程序主題樣式
  • 可配置標題欄的背景色和文字顏色
  • 輸入window可自動補全
• ⑧ 底部菜單欄
  • 輸入tabBar可自動補全

代碼構成

JSON配置

在項目的根目錄有一個app.json和project.json,此外在頁面pages/index目錄下還有一個index.json,下面依次說明一下他們的用途。

開發者工具配置

工具配置 project.config.json

在使用一個工具的時候，會作一些個性化的配置，例如界面的顏色、編譯配置、快捷鍵等等，當咱們重裝這個工具的時候，就又要重複配置一次，很麻煩。因此這個project.config.json用來記錄開發者工具的信息，比較經常使用的一點是，這個文件能夠記錄項目名稱、AppId,就不用去詢問技術同事AppID是多少，他們只需將咱們的微信號添加爲開發者，則可啓動小程序。project.config.json部分配置以下：

{
	"description": "項目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.3.0",
	"appid": "wxdfee0be3b147059f",
	"projectname": "stream",
	"debugOptions": {
		"hidedInDevtools": []
	}
}
複製代碼

其餘配置項細節能夠參考文檔 開發者工具的配置 。

全局配置

小程序全局配置app.json app.json是當前小程序的全局配置，包括了小程序全部的頁面路徑、界面表現、網絡超過期間、底部tab切換等。app.json內容以下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    backgroundColor:#000,
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首頁"
        },
        {
          "pagePath": "pages/logs/logs",
          "text": "日誌"
        }
    ]
  },
}
複製代碼

• 1.pages字段
  • 用於描述當前小程序全部頁面路徑
• 2.window字段
  • 定義小程序全部頁面的下拉背景顏色（可將此背景顏色設置與主頁面背景顏色一致）、導航欄背景顏色、文字顏色等。
• 3.tabBar
  • 底部tab欄的表現

以上字段都可自動補全，其餘配置項細節能夠參考文檔 小程序的配置 app.json

頁面配置

頁面配置 page.json

這個的page.json指的是pages/index.json這類的相關配置。例如，index.json只能配置app.json中"window"字段，且頁面配置會覆蓋app.json中的"window"字段

WXML模板

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，在小程序中，WXML充當HTML的角色，描述當前頁面的結構。

數據綁定

經過 {{ }} 的語法把一個變量綁定到界面上，咱們稱爲數據綁定。
數據綁定的方式，提倡把渲染和邏輯分開，簡單來講就是不要讓JS直接操控DOM，WXML只管渲染，JS只須要管理狀態便可，WXML中動態數據均來自於Page中的data，如如下代碼：

WXML :

<view> {{ message }} </view>

複製代碼

WXS：

Page({ // Page可以自動補全
  data: {
    message: '你好呀!'
  },
  onLoad: function (options) {
   this.setData({ 
    msg: "我很好!" 
   })  
  },
})
複製代碼

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，默認數組的當前項下標默認爲index，數組當前項變量名爲item，以下代碼：

WXML

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
複製代碼

WXS

Page({
  data: {
    array: [
        {
          message: 'foo',
        },
        {
          message: 'bar'
        }
    ]
  }
})
複製代碼

若是你不想使用默認的index和item,可使用小程序提供的wx:for-index,指定當前下標變量名，使用wx:for-item指定當前項變量名，以下代碼：

WXML

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
複製代碼

wx:for 也能夠嵌套，下邊是一個九九乘法表，代碼以下：

WXML

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>
複製代碼

wx:key
若是列表中項目的位置會動態改變，或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵(如中輸入內容， 的選中狀態)，須要使用wx:key來指定列表中項目的惟一標識符。

若是不提供wx:key，會報一個warning，若是明確知道列表是靜態的，或者沒必要關注其順序，能夠選擇忽略

當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組件保持自身的狀態，而且提升列表渲染時的效率。

因此當有循環的時候，建議仍是要加上wx:key。

條件渲染

wx:if

由於 wx:if 是一個控制屬性，須要將它添加到一個標籤上。若是要一次性判斷多個組件標籤，可使用一個 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
複製代碼

注意： 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。

引號變量

組件屬性、控制屬性、關鍵字屬性均須要在雙引號以內，不然會報錯，以下代碼：

WXML

<view id="item-{{id}}">組件屬性</view>
<view wx:if="{{condition}}">控制屬性</view>
<checkbox checked="{{false}}">關鍵字</checkbox>
複製代碼

WXS

Page({
  data: {
    id: 0,
    condition: true,
  }
})
複製代碼

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後表明真值。

WXSS樣式

WXSS 具備 CSS 大部分的特性，小程序在 WXSS 也作了一些擴充和修改。

新增了尺寸單位。在寫 CSS 樣式時，開發者須要考慮到手機設備的屏幕會有不一樣的寬度和設備像素比，採用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者能夠免去換算的煩惱，只要交給小程序底層來換算便可。

提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你能夠寫一個 app.wxss 做爲全局樣式，會做用於當前小程序的全部頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。

此外 WXSS 僅支持部分 CSS 選擇器。

WXS

點擊 button 按鈕的時候，咱們但願把界面上 msg 顯示成 "Hello World"，因而咱們在 button 上聲明一個屬性: bindtap ，在 JS 文件裏邊聲明瞭 clickMe 方法來響應此次點擊操做：

WXML

<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>
複製代碼

WXS

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
複製代碼

踩坑

• Q1：小程序背景圖
  問題：小程序不支持background本地圖。
  解決：將圖片上傳七牛雲服務器中的存儲空間

• Q2：服務器圖片緩存
  問題：在服務器更新圖片時，會有緩存，暫時訪問不到最新的圖片
  解決：在請求的連接後加上參數
  

  

• Q3：小程序上下拉動出現白屏
  問題：當用力往下拉，頁面頂部會出現一段空白的地方，用戶體驗很差
  解決：在當前頁面的json文件裏，加上屬性"disableScroll":true，再配合scroll-view一塊兒使用，可解決多內容超出滾動，適配小屏幕手機

• Q4：小程序open-data組件
  問題：open-data組件添加樣式無效
  解決：使用overflow: hidden

  <view class="userinfo">
      <open-data  type="userAvatarUrl" class="userAvatarUrl"></open-data>
      <open-data type="userNickName" class="userNickName"></open-data>
  </view>
  複製代碼

• Q5：小程序scroll-view橫向划動
  問題：scroll-view橫向划動無效
  解決：
  1.要給scroll-view設置寬度，並設置white-space:nowrap；
  2.將容器內的子元素每一項設置寬度和display:inline-block

mpvue

介紹

mpvue （github 地址請參見）是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

名稱由來

• mp：mini program 的縮寫
• mpvue：Vue.js in mini program

主要特性

• H5 代碼轉換編譯成小程序目標代碼的能力
• 完全的組件化開發能力：提升代碼複用性
• 支持使用 npm 外部依賴
• 完整的 Vue.js 開發體驗
• 方便的 Vuex 數據管理方案：方便構建複雜應用
• 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
• 使用 Vue.js 命令行工具 vue-cli 快速初始化項目

5分鐘教程

經過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，便可快速建立和啓動一個帶熱重載、保存時靜態檢查、內置代碼構建功能的小程序項目：

# 1.全局安裝 vue-cli
npm install -g @vue/cli-init

# 2.建立一個基於 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project

# 3.進入項目文件夾
$ cd my-project

# 4.安裝依賴
$ npm install
複製代碼

建立項目過程以下圖：

mpvue目錄以下圖：

本文參考：developers.weixin.qq.com/miniprogram…