小程序之入門布局篇

前言

閱讀這篇文章你將學(xué)到：

  • 快速啟動(dòng)一個(gè)小程序項(xiàng)目
  • 快速上手小程序重構(gòu)業(yè)務(wù)
  • 在頁面布局中遇到的一些坑
  • 使用mpvue框架進(jìn)行快速開發(fā)

基礎(chǔ)

起步

安裝

安裝微信web開發(fā)者工具，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝，有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看《開發(fā)者工具介紹》 。

注冊(cè)

當(dāng)打開微信開發(fā)者工具后，會(huì)需要我們填寫AppID，點(diǎn)擊注冊(cè)申請(qǐng)AppID

1.png

將申請(qǐng)好的AppID復(fù)制填入相應(yīng)位置，根據(jù)相應(yīng)提示即可成功創(chuàng)建一個(gè)項(xiàng)目。

2.png

工具

如下圖所示：

  • ①預(yù)覽模擬器
  • ②調(diào)試工具
  • ③編譯模式
    • 可保存當(dāng)前頁的調(diào)試
  • ④手機(jī)預(yù)覽
    • Ctrl+Shift+P為快捷鍵，可不必拿手機(jī)掃碼預(yù)覽
  • ⑤目錄樹
    • 文件操作
      • 1.在pages下新建一個(gè)文件夾后，可右鍵點(diǎn)擊page生成4個(gè)模板頁面wxml、wxss、js、json
      • 2.在app.json的pages字段，添加需要新建的頁面路徑，也會(huì)自動(dòng)生成改頁面所需要的文件
  • ⑦ 小程序主題樣式
    • 可配置標(biāo)題欄的背景色和文字顏色
    • 輸入window可自動(dòng)補(bǔ)全
  • ⑧ 底部菜單欄
    • 輸入tabBar可自動(dòng)補(bǔ)全
3.png

代碼構(gòu)成

JSON配置

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

開發(fā)者工具配置

工具配置 project.config.json

在使用一個(gè)工具的時(shí)候，會(huì)做一些個(gè)性化的配置，例如界面的顏色、編譯配置、快捷鍵等等，當(dāng)我們重裝這個(gè)工具的時(shí)候，就又要重復(fù)配置一次，很麻煩。所以這個(gè)project.config.json用來記錄開發(fā)者工具的信息，比較常用的一點(diǎn)是，這個(gè)文件可以記錄項(xiàng)目名稱、AppId,就不用去詢問技術(shù)同事AppID是多少，他們只需將我們的微信號(hào)添加為開發(fā)者，則可啟動(dòng)小程序。project.config.json部分配置如下：

{
    "description": "項(xiàng)目配置文件",
    "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": []
    }
}

其他配置項(xiàng)細(xì)節(jié)可以參考文檔 開發(fā)者工具的配置 。

全局配置

小程序全局配置app.json
app.json是當(dāng)前小程序的全局配置，包括了小程序所有的頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超過時(shí)間、底部tab切換等。app.json內(nèi)容如下：

{
  "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字段
    • 用于描述當(dāng)前小程序所有頁面路徑
  • 2.window字段
    • 定義小程序所有頁面的下拉背景顏色（可將此背景顏色設(shè)置與主頁面背景顏色一致）、導(dǎo)航欄背景顏色、文字顏色等。
  • 3.tabBar
    • 底部tab欄的表現(xiàn)

以上字段均可自動(dòng)補(bǔ)全，其他配置項(xiàng)細(xì)節(jié)可以參考文檔 小程序的配置 app.json

頁面配置

頁面配置 page.json

這個(gè)的page.json指的是pages/index.json這類的相關(guān)配置。例如，index.json只能配置app.json中"window"字段，且頁面配置會(huì)覆蓋app.json中的"window"字段

WXML模板

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，在小程序中，WXML充當(dāng)HTML的角色，描述當(dāng)前頁面的結(jié)構(gòu)。

數(shù)據(jù)綁定

通過 {{ }} 的語法把一個(gè)變量綁定到界面上，我們稱為數(shù)據(jù)綁定。
數(shù)據(jù)綁定的方式，提倡把渲染和邏輯分開，簡(jiǎn)單來說就是不要讓JS直接操控DOM，WXML只管渲染，JS只需要管理狀態(tài)即可，WXML中動(dòng)態(tài)數(shù)據(jù)均來自于Page中的data，如以下代碼：

WXML :

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

WXS：

Page({ // Page能夠自動(dòng)補(bǔ)全
  data: {
    message: '你好呀!'
  },
  onLoad: function (options) {
   this.setData({ 
    msg: "我很好!" 
   })  
  },
})

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，默認(rèn)數(shù)組的當(dāng)前項(xiàng)下標(biāo)默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)變量名為item，如下代碼：

WXML

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

WXS

Page({
  data: {
    array: [
        {
          message: 'foo',
        },
        {
          message: 'bar'
        }
    ]
  }
})

如果你不想使用默認(rèn)的index和item,可以使用小程序提供的wx:for-index,指定當(dāng)前下標(biāo)變量名，使用wx:for-item指定當(dāng)前項(xiàng)變量名，如下代碼：

WXML

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

wx:for 也可以嵌套，下邊是一個(gè)九九乘法表，代碼如下：

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
如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變，或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征(如<input/>中輸入內(nèi)容，<switch/>的選中狀態(tài))，需要使用wx:key來指定列表中項(xiàng)目的唯一標(biāo)識(shí)符。

如果不提供wx:key，會(huì)報(bào)一個(gè)warning，如果明確知道列表是靜態(tài)的，或者不必關(guān)注其順序，可以選擇忽略

5.png

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

所以當(dāng)有循環(huán)的時(shí)候，建議還是要加上wx:key。

條件渲染

wx:if

因?yàn)?wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) <block/> 標(biāo)簽將多個(gè)組件包裝起來，并在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/> 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染，只接受控制屬性。

引號(hào)變量

組件屬性、控制屬性、關(guān)鍵字屬性均需要在雙引號(hào)之內(nèi)，否則會(huì)報(bào)錯(cuò)，如下代碼：

WXML

<view id="item-{{id}}">組件屬性</view>
<view wx:if="{{condition}}">控制屬性</view>
<checkbox checked="{{false}}">關(guān)鍵字</checkbox>

WXS

Page({
  data: {
    id: 0,
    condition: true,
  }
})

特別注意：不要直接寫 checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。

WXSS樣式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴(kuò)充和修改。

新增了尺寸單位。在寫 CSS 樣式時(shí)，開發(fā)者需要考慮到手機(jī)設(shè)備的屏幕會(huì)有不同的寬度和設(shè)備像素比，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發(fā)者可以免去換算的煩惱，只要交給小程序底層來換算即可。

提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個(gè) app.wxss
作為全局樣式，會(huì)作用于當(dāng)前小程序的所有頁面，局部頁面樣式 page.wxss 僅對(duì)當(dāng)前頁面生效。

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

WXS

點(diǎn)擊 button 按鈕的時(shí)候，我們希望把界面上 msg 顯示成 "Hello World"，于是我們?cè)?button 上聲明一個(gè)屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應(yīng)這次點(diǎn)擊操作：

WXML

<view>{{ msg }}</view>
<button bindtap="clickMe">點(diǎn)擊我</button>

WXS

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

踩坑

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

  • Q2：服務(wù)器圖片緩存
    問題：在服務(wù)器更新圖片時(shí)，會(huì)有緩存，暫時(shí)訪問不到最新的圖片
    解決：在請(qǐng)求的鏈接后加上參數(shù)

    8.png

  • Q3：小程序上下拉動(dòng)出現(xiàn)白屏
    問題：當(dāng)用力往下拉，頁面頂部會(huì)出現(xiàn)一段空白的地方，用戶體驗(yàn)不好
    解決：在當(dāng)前頁面的json文件里，加上屬性"disableScroll":true，再配合scroll-view一起使用，可解決多內(nèi)容超出滾動(dòng)，適配小屏幕手機(jī)

  • 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橫向劃動(dòng)
    問題：scroll-view橫向劃動(dòng)無效
    解決：
    1.要給scroll-view設(shè)置寬度，并設(shè)置white-space:nowrap；
    2.將容器內(nèi)的子元素每一項(xiàng)設(shè)置寬度和display:inline-block

mpvue

介紹

mpvue （github 地址請(qǐng)參見）是一個(gè)使用 Vue.js 開發(fā)小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)。

名稱由來

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

主要特性

  • H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
  • 徹底的組件化開發(fā)能力：提高代碼復(fù)用性
  • 支持使用 npm 外部依賴
  • 完整的 Vue.js 開發(fā)體驗(yàn)
  • 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
  • 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

5分鐘教程

通過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡(jiǎn)單命令，即可快速創(chuàng)建和啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查、內(nèi)置代碼構(gòu)建功能的小程序項(xiàng)目：

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

# 2.創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project

# 3.進(jìn)入項(xiàng)目文件夾
$ cd my-project

# 4.安裝依賴
$ npm install

創(chuàng)建項(xiàng)目過程如下圖：

6.png

mpvue目錄如下圖：

7.png

本文參考：https://developers.weixin.qq.com/miniprogram/dev/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 因新工作主要負(fù)責(zé)微信小程序這一塊，最近的重心就移到這一塊，該博客是對(duì)微信小程序整體的整理歸納以及標(biāo)明一些細(xì)節(jié)點(diǎn)，初...
    majun00閱讀 7,638評(píng)論 0贊 9
  • 整理于網(wǎng)絡(luò) http://blog.poetries.top/2018/08/09/xiaochengxu-not...
    前端進(jìn)階之旅閱讀 8,673評(píng)論 2贊 36
  • IjkPlayer是B站基于ffmpeg封裝而來的非常優(yōu)秀的一款播放組件，今天將之前項(xiàng)目中用到ijkPlayer的...
    等風(fēng)來_Android閱讀 5,635評(píng)論 4贊 4
  • H：“不是說買泡面怎么沒買？” 媽：“我買了啊，一箱五十多塊呢！” H：“哪呢哪呢？我都沒有見到過” 媽：“那我已...
    yingerzhang閱讀 267評(píng)論 0贊 0
  • 1，無所適從型，不知道如何找工作、找不到工作、有工作但做不好而去創(chuàng)業(yè)的，百分百會(huì)死； 2，想法點(diǎn)子型，有個(gè)好想法、...
    MrHeng閱讀 302評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容