云開發(fā) 優(yōu)化與部署上線

通過前面的實戰(zhàn)學習，相信大家在寫代碼的過程中，遇到了很多問題，在不斷解決問題的過程中也總結了一些經驗。在這一部分會總結一些開發(fā)中的經驗以及小程序的優(yōu)化、部署、上線。

開發(fā)者工具的使用

縮進與縮進設置

盡管縮進并不會對小程序的代碼產生什么影響（Python才會嚴格強調縮進，不同的縮進也有不同的意義），但是為了代碼的可讀性，縮進是必不可少的?？s進除了美觀，還可以體現(xiàn)邏輯上的層次關系，鼠標移到編輯器顯示代碼行數(shù)的地方，可以看到有–減號，點擊即對代碼進行折疊與展開，這一功能在開發(fā)上可以讓我們更容易理清代碼的層次、嵌套關系，避免出現(xiàn)少了閉合的情況。

小程序的wxml、js、json、wxss等不同的文件類型，開發(fā)時，在縮進的安排上也會有所不同，這個就需要大家自己去閱讀其他優(yōu)秀項目的源代碼來領會了，這里也無法一一詳述。

縮進有兩種方式，一種是使用Tab鍵，還有一種是使用空格，建議大家使用Tab。小程序默認一個縮進=一個Tab=2個空格，通常前端開發(fā)是一個Tab=4個空格，你如果不習慣，可以在設置里進行設置。

代碼的可讀、美觀甚至優(yōu)雅，是一個優(yōu)秀的程序員應該去追求的，縮進也只是其中很小的一環(huán)。代碼可讀性高，既提升自己的開發(fā)效率，也利于團隊的分享與協(xié)作，后期的維護等等。

快捷鍵

微信開發(fā)者工具也有著和其他IDE和代碼編輯器比較一致的快捷鍵，通過使用這些快捷鍵，可以大大提升我們編寫代碼的效率。Mac和Windows的快捷鍵組合略微會有所不同，大家可以自行閱讀技術文檔來了解。

技術文檔：微信開發(fā)者工具快捷鍵

快捷鍵的目的是為了自己編寫代碼的方便，每個人的快捷鍵的使用習慣都會有所不同。當然最簡單通用的Ctrl+C復制、Ctrl+V粘貼、Ctrl+X剪切、Ctrl+Z重做、Ctrl+S保存，Ctrl+F搜索等這些快捷鍵組合是非常通用的，建議大家都掌握。

微信開發(fā)者工具的快捷鍵組合里有幾個值得大家多使用，

• 批量注釋快捷鍵：windows 是Ctrl+/，Mac是Command+/
• 代碼塊的縮進：windows是代碼左縮進ctrl + [、代碼右縮進ctrl + ]，相應的Mac是? + [ 和 ? + ]
• 格式化代碼：Windows為shift + alt + F、Mac為? + ? + F

官方快捷鍵文檔寫得很不全，建議大家參考下面Visual Studio Code的快捷鍵PDF來對快捷鍵有一個更全面的了解。Mac快捷鍵、Windows快捷鍵，使用快捷鍵的目的是為了提升開發(fā)的效率，一切還是以你的習慣為主，不要為了快捷鍵而快捷鍵。

報錯提醒

相信大家在前面實際的開發(fā)中經常會看到開發(fā)者工具調試器里的Console，它會比較有效的指出代碼的錯誤的信息、位置等，是日常開發(fā)非常非常重要的工具，堪稱編程的指路明燈。大家務必要養(yǎng)成查看錯誤Console的習慣，也要善于根據(jù)報錯信息去搜索相關的解決方法。以后我們還會介紹它更多的用處，堪稱神器，不可不了解。

小程序的代碼編輯器也會為我們提供一些錯誤信息，比如出現(xiàn)紅色的~，這個時候就要注意啦，你是不是出現(xiàn)字符是中文，漏了標點符號等比較低級而小兒科的錯誤。

wxml代碼查看

開發(fā)者工具調試器里除了有Console，還有一個wxml標簽頁（可能被折疊，需要你展開），它可以讓我們了解當前小程序頁面的wxml和wxss結構構成，可以用來調試組件的css樣式等。不過這個工具目前體驗還特別糟糕。

自動補全與代碼提示

小程序開發(fā)者工具是提供一些代碼自動補全與代碼提示的，具體情況大家可以看一下官方文檔關于自動補全的內容。在平時開發(fā)的過程中也可以多留意與摸索。

小程序的轉發(fā)功能

我們只需要在小程序每個頁面的js文件下的Page({ }） 里面，添加以下代碼，我們的小程序就有轉發(fā)功能了，這個可以通過點擊開發(fā)者工具的預覽用手機來體驗哦

技術文檔：小程序的轉發(fā)

    onShareAppMessage: function (res) {
            if (res.from === 'button') {
                // 來自頁面內轉發(fā)按鈕
                console.log(res.target)
            }
            return {
                title: '云開發(fā)技術訓練營',
                path: "pages/home/home,
                imageUrl:"https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
                success: function (res) {
                    // 轉發(fā)成功
                },
                fail: function (res) {
                    // 轉發(fā)失敗
                }
            }
        },

• title為轉發(fā)的標題，如果不填，默認為當前小程序的名稱；
• path為當前頁面路徑，也可以為其他頁面的路徑，如果路徑寫錯的話會顯示“當前頁面不存在”哦。
• imageUrl為自定義圖片路徑，可以是本地文件路徑或網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。如果不填寫會取當前頁面，從頂部開始，高度為 80% 屏幕寬度的圖像作為轉發(fā)圖片

小程序配置的細節(jié)

要做出專業(yè)的小程序，就需要在很多細微的地方做足功夫，在互聯(lián)網的世界里有專門的UX用戶體驗設計師，所做的工作就是盡可能的以用戶為中心，增強用戶使用產品的體驗，這背后有一整套的知識體系，大家可以拓展了解一下。

沒有tabBar的小程序

有時候我們不希望我們的小程序底部有tabBar，那我們該怎么處理呢？我們可以刪掉app.json的tabBar配置項即可。

下拉小程序不出現(xiàn)空白

當我們下拉很多小程序的時候，都會出現(xiàn)一個白色的空白，很影響美觀，但是如果我們在windows的配置項里把backgroundColor和navigationBarBackgroundColor的顏色配置成一樣，下拉就不會有空白啦，比如：

"window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#1772cb",
        "navigationBarTitleText": "HackWork技術工坊",
        "navigationBarTextStyle":"white",
        "backgroundColor": "#1772cb"
      },

讓整個頁面背景變色

小程序的頁面背景的顏色默認為為白色，我們希望整個小程序的頁面背景變成其他顏色應該怎么處理呢？

我們可以可以通過直接設置page的樣式來設置，在該頁面的wxss文件里添加如下樣式，如

page{
  background-color: #1772cb;
}

我們發(fā)現(xiàn)小程序除了頁面默認的背景色是白色，很多組件的默認背景色也是白色，組件里的文字的默認顏色是黑色，文字也有默認大小，很多組件雖然我們沒有去定義它們的css樣式，但是它們卻自帶一些css樣式。

禁止頁面下拉

有的時候我們的頁面做得比較短，為了增強用戶體驗，不希望用戶可以下拉頁面，因為下拉頁面會有種頁面松動的感覺，可以在該頁面的json文件里配置，比如

{
  "window": {
    "disableScroll": true
  }
}

注意，不是app.json文件，而是頁面的json文件，為什么不是app.json文件而是頁面的json文件呢？大家可以思考一下，小程序這么處理的邏輯。

自定義頂部導航欄

官方默認的導航欄只能對背景顏色進行更改，對于想要在導航欄添加一些比較酷炫的效果則需要通過自定義導航欄實現(xiàn)。通過設置 app.json中頁面配置的 navigationStyle(導航欄樣式)配置項的值為 custom，即可實現(xiàn)自定義導航：

"window":{
    "navigationStyle":"custom"
}

比如我們給小程序的頁面配一個好看的壁紙，比如在home.wxss里添加以下樣式：

page{
    background-image: url(https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/background.jpg)
}

然后在手機上預覽該頁面，發(fā)現(xiàn)小程序固有的帶有頁面標題的頂部導航欄就被背景圖片取代了。我們也還可以在頂部導航欄原有的位置上設計一些更加酷炫的元素，這些都是可以通過前面組件的知識來實現(xiàn)的。

模板

有這樣一個應用場景，我們希望所有的頁面都有一個相同的底部版權信息，如果是每個頁面都重復寫這個版權信息就會很繁瑣，如果可以定義好代碼片段，然后在不同的地方調用就方便了很多，這就是模板的作用。

靜態(tài)的頁面片段

比如使用開發(fā)者工具在小程序的pages頁面新建一個common文件夾，在common里新建一個foot.wxml，并輸入以下代碼

<template name="foot">
      <view class="page-foot">
        <view class="index-desc" style="text-align:center;font-size:12px;bottom:20rpx;position:absolute;bottom:20rpx;width:100%">云開發(fā)技術訓練營</view>
      </view>
    </template>

在要引入的頁面比如home.wxml的頂部，使用import引入這個模板，

<import src="/pages/common/foot.wxml" />

然后在要顯示的地方調用比如home.wmxl頁面代碼的最底部來調用這個模板

<template is="foot" />

動態(tài)的頁面片段

比如在頁面的每一頁都有一個相似的頁面樣式與結果，但是不同的頁面有著不同的標題以及頁面描述，用數(shù)據(jù)綁定就能很好的解決這個問題，不同的頁面的js data里有不同的數(shù)據(jù)，而模板的wxml都是固定的框架。

比如使用開發(fā)者工具在小程序的pages頁面新建一個common文件夾，在common里新建一個head.wxml，并輸入以下代碼：

<template name="head">
      <view class="page-head">
        <view class="page-head-title">{{title}}</view>
        <view class="page-head-line"></view>
        <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
      </view>
    </template>

我們再給每個頁面的js里的data里添加不同的title和desc信息，再來在頁面先引入head.wxml，然后在指定的位置比如wxml代碼的前面調用該模板。

<import src="/pages/common/head.wxml" />
<template is="foot" />

我們注意創(chuàng)建模板時，使用的是 <template name=”模板名”></template>，而調用模板時，使用的是<template is=”模板名” />，兩者之間對應。

小程序的客服

開發(fā)者在小程序內添加客服消息按鈕組件，用戶就可在小程序內喚起客服會話頁面，給小程序發(fā)消息。而開發(fā)者（可綁定其他運營人員）也可以直接使用微信公眾平臺網頁版客服工具或者移動端小程序客服小助手進行客服消息回復，非常的方便。

只需要在wxml文件里添加如下代碼，即可喚起客服會話頁面：

<button open-type="contact"></button>

button的樣式大家可以根據(jù)之前學習的css知識修改一下。

web-view

承載網頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。web-view組件可打開關聯(lián)的公眾號的文章，這個對很多自媒體用戶就比較友好了，公眾號文章可以使用第三方的工具比如秀米、135編輯器等制作得非常精美，這些文章可以在小程序里打開啦。

<web-view src="https://mp.weixin.qq.com/cgi-bin/wx" rel="external nofollow" ></web-view>

web-view的也可以綁定備案好的域名，支持JSSDK的接口，因此很有小程序為了省開發(fā)成本，點擊鏈接打開的都是網頁，并沒有做小程序的原生開發(fā)，這個就不再討論范圍之內了。