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

2020-07-20 11:21 更新

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

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

縮進(jìn)與縮進(jìn)設(shè)置

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

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

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

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

快捷鍵

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

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

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

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

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

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

報(bào)錯(cuò)提醒

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

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

wxml代碼查看

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

自動(dòng)補(bǔ)全與代碼提示

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

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

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

技術(shù)文檔：小程序的轉(zhuǎn)發(fā)

  1.     onShareAppMessage: function (res) {
  2.             if (res.from === 'button') {
  3.                 // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
  4.                 console.log(res.target)
  5.             }
  6.             return {
  7.                 title: '云開發(fā)技術(shù)訓(xùn)練營',
  8.                 path: "pages/home/home,
  9.                 imageUrl:"https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
  10.                 success: function (res) {
  11.                     // 轉(zhuǎn)發(fā)成功
  12.                 },
  13.                 fail: function (res) {
  14.                     // 轉(zhuǎn)發(fā)失敗
  15.                 }
  16.             }
  17.         },

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

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

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

沒有tabBar的小程序

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

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

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

  1. "window":{
  2.         "backgroundTextStyle":"light",
  3.         "navigationBarBackgroundColor": "#1772cb",
  4.         "navigationBarTitleText": "HackWork技術(shù)工坊",
  5.         "navigationBarTextStyle":"white",
  6.         "backgroundColor": "#1772cb"
  7.       },

讓整個(gè)頁面背景變色

小程序的頁面背景的顏色默認(rèn)為為白色，我們希望整個(gè)小程序的頁面背景變成其他顏色應(yīng)該怎么處理呢？

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

  1. page{
  2.   background-color: #1772cb;
  3. }

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

禁止頁面下拉

有的時(shí)候我們的頁面做得比較短，為了增強(qiáng)用戶體驗(yàn)，不希望用戶可以下拉頁面，因?yàn)橄吕撁鏁?huì)有種頁面松動(dòng)的感覺，可以在該頁面的json文件里配置，比如

  1. {
  2.   "window": {
  3.     "disableScroll": true
  4.   }
  5. }

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

自定義頂部導(dǎo)航欄

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

  1. "window":{
  2.     "navigationStyle":"custom"
  3. }

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

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

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

模板

有這樣一個(gè)應(yīng)用場景，我們希望所有的頁面都有一個(gè)相同的底部版權(quán)信息，如果是每個(gè)頁面都重復(fù)寫這個(gè)版權(quán)信息就會(huì)很繁瑣，如果可以定義好代碼片段，然后在不同的地方調(diào)用就方便了很多，這就是模板的作用。

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

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

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

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

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

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

  1. <template is="foot" />

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

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

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

  1. <template name="head">
  2.       <view class="page-head">
  3.         <view class="page-head-title">{{title}}</view>
  4.         <view class="page-head-line"></view>
  5.         <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
  6.       </view>
  7.     </template>

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

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

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

小程序的客服

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

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

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

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

web-view

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

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

web-view的也可以綁定備案好的域名，支持JSSDK的接口，因此很有小程序?yàn)榱耸￠_發(fā)成本，點(diǎn)擊鏈接打開的都是網(wǎng)頁，并沒有做小程序的原生開發(fā)，這個(gè)就不再討論范圍之內(nèi)了。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號