最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計(jì)制作，服務(wù)好的網(wǎng)站設(shè)計(jì)公司，做網(wǎng)站、成都做網(wǎng)站負(fù)責(zé)任的成都網(wǎng)站制作公司!

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

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

盡管縮進(jìn)并不會對小程序的代碼產(chǎn)生什么影響（Python才會嚴(yán)格強(qiáng)調(diào)縮進(jìn)，不同的縮進(jìn)也有不同的意義），但是為了代碼的可讀性，縮進(jìn)是必不可少的。縮進(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)的安排上也會有所不同，這個(gè)就需要大家自己去閱讀其他優(yōu)秀項(xiàng)目的源代碼來領(lǐng)會了，這里也無法一一詳述。

縮進(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的快捷鍵組合略微會有所不同，大家可以自行閱讀技術(shù)文檔來了解。

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

快捷鍵的目的是為了自己編寫代碼的方便，每個(gè)人的快捷鍵的使用習(xí)慣都會有所不同。當(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)常會看到開發(fā)者工具調(diào)試器里的Console，它會比較有效的指出代碼的錯(cuò)誤的信息、位置等，是日常開發(fā)非常非常重要的工具，堪稱編程的指路明燈。大家務(wù)必要養(yǎng)成查看錯(cuò)誤Console的習(xí)慣，也要善于根據(jù)報(bào)錯(cuò)信息去搜索相關(guān)的解決方法。以后我們還會介紹它更多的用處，堪稱神器，不可不了解。

小程序的代碼編輯器也會為我們提供一些錯(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ā)

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

• title為轉(zhuǎn)發(fā)的標(biāo)題，如果不填，默認(rèn)為當(dāng)前小程序的名稱；
• path為當(dāng)前頁面路徑，也可以為其他頁面的路徑，如果路徑寫錯(cuò)的話會顯示“當(dāng)前頁面不存在”哦。
• imageUrl為自定義圖片路徑，可以是本地文件路徑或網(wǎng)絡(luò)圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。如果不填寫會取當(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í)候，都會出現(xiàn)一個(gè)白色的空白，很影響美觀，但是如果我們在windows的配置項(xiàng)里把backgroundColor和navigationBarBackgroundColor的顏色配置成一樣，下拉就不會有空白啦，比如：

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

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

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

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

page{
  background-color: #1772cb;
}

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

禁止頁面下拉

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

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

注意，不是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)航：

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

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

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

然后在手機(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)信息就會很繁瑣，如果可以定義好代碼片段，然后在不同的地方調(diào)用就方便了很多，這就是模板的作用。

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

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

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

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