目錄：

例子：把賣電影票的vue賣座網(wǎng)項(xiàng)目改寫成小程序的標(biāo)上序號(hào)的步驟

其實(shí)本例子的實(shí)質(zhì)是：用別的語(yǔ)言實(shí)現(xiàn)原來(lái)語(yǔ)言的代碼功能。

開三個(gè)參考

開啟vue項(xiàng)目的前后臺(tái)，看運(yùn)行效果。由此確定我先要實(shí)現(xiàn)的是導(dǎo)航條部分,暫時(shí)我想先顯示當(dāng)前熱映部分的界面

關(guān)于頁(yè)面等的組件一般我習(xí)慣是創(chuàng)建在pages文件夾里面的，創(chuàng)建方法就是先自己命名個(gè)組件的名字的文件夾，后面鼠標(biāo)右鍵點(diǎn)擊【新建Component】選項(xiàng)，只輸入index后按回車就會(huì)自動(dòng)生成4個(gè)文件

首先我要實(shí)現(xiàn)的是導(dǎo)航欄和界面跳轉(zhuǎn)等等的功能（項(xiàng)目結(jié)構(gòu)可以先自定義，后面功能界面都實(shí)現(xiàn)后，進(jìn)行優(yōu)化，代碼重構(gòu)等等）：

*百度得知 <navigator?url="/pages/Comingplaying/index">跳轉(zhuǎn)到新頁(yè)面</navigator>可以成功跳轉(zhuǎn)，記得“/”要加在組件路徑里面。

常常自己創(chuàng)建些說明文件在旁邊

*查看開發(fā)者文檔（一般想實(shí)現(xiàn)什么這里都可以找到示例，很好用），依次點(diǎn)【幫助】，【開發(fā)文檔】選項(xiàng)，之后點(diǎn)在開發(fā)者工具中預(yù)覽效果

因?yàn)槭莿e人寫的代碼可能不是很好用，有時(shí)會(huì)進(jìn)行重命名，代碼重構(gòu)成自己熟悉的內(nèi)容，邏輯等等變更清晰，更方便我使用

先把基本上都會(huì)出現(xiàn)的組件（界面）都創(chuàng)建好，至少先實(shí)現(xiàn)導(dǎo)航欄和界面跳轉(zhuǎn)

個(gè)人設(shè)置tabbar導(dǎo)航欄的方法

個(gè)人查看了B站的視頻和自己的嘗試和總結(jié)，得知

app.json中的

"tabBar"中的 "custom"為 false就是只配置app.json就可以實(shí)現(xiàn)全局的導(dǎo)航欄tabbar，否則就要寫別的代碼

開發(fā)者文檔中的框架中的全局配置等等和指南中的內(nèi)容值得結(jié)合查看

圖片的獲取可以直接鼠標(biāo)右鍵另存圖片，也可以檢查后訪問圖片路徑，不行就多次訪問，然后另存圖片，剪切到想要放的項(xiàng)目位置里面，同時(shí)也可以到iconfont阿里巴巴矢量圖標(biāo)庫(kù)

https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

app.json中的selectedIconPath是選后的圖標(biāo)路徑，"iconPath"是選前的圖標(biāo)路徑，

"selectedColor"是選擇后的顏色，#ff5f16之類的樣式就是鼠標(biāo)右鍵點(diǎn)檢查，

查看賣座網(wǎng)的樣式復(fù)制得來(lái)的

微信小程序中的頂部選項(xiàng)卡和底部選項(xiàng)卡（全局或局部的自定義導(dǎo)航欄tabbar）都可以百度關(guān)鍵詞后自己修改成滿足自己需求的內(nèi)容

https://www.jb51.net/article/161227.htm我找到的代碼必須自己注釋掉，修改一些樣式代碼才真正有用

vue中的請(qǐng)求頭是headers，微信小程序中的請(qǐng)求頭是header（基本上有些時(shí)候，X-Client-Info和X-Host是請(qǐng)求頭中必備，如果不寫，就訪問不到網(wǎng)站的數(shù)據(jù)）。我只所以知道這個(gè)，是因?yàn)槲野俣攘诵┵Y料，之后參考，之后嘗試我的猜想，嘗試自己的猜想后，記錄成功等等的說明等等很有用。

常常百度XXX和YYY等等的區(qū)別，讓我更好的使用XXX和YYY等等

page和component的區(qū)別

簡(jiǎn)單地說，page是官方默認(rèn)組件，component是自定義組件。當(dāng)你需要開發(fā)一個(gè)有特色的，可靈活配置樣式的小程序，就要用到component。開發(fā)一個(gè)小程序前先確定是否需要自定義component模板來(lái)做，相對(duì)來(lái)說，page比較簡(jiǎn)單快捷，但是樣式固定單一。而component可以有更多功能，例如頭部返回主頁(yè)按鈕，頭部圖片背景，自定義底部導(dǎo)航樣式和底部導(dǎo)航根據(jù)頭部背景色而變化等等。

在創(chuàng)建組件文件夾后，鼠標(biāo)右鍵可以創(chuàng)建page或component

因?yàn)橐敳康那袚Q條功能要用Page，那么基本上要是父組件，那么我就要是把原先的FilmHeader整合到Film組件中，共同作為父組件，把請(qǐng)求到的數(shù)據(jù)傳給子組件Nowplaying和Comingplaying

要把請(qǐng)求到的數(shù)據(jù)"."成json格式的數(shù)組，之后wxml文件中遍歷數(shù)組等等。pages中一般創(chuàng)建page或component，父組件或子組件，頁(yè)面之類的組件，而components中一般創(chuàng)建component，子組件。

其實(shí)Nowplaying和Comingplaying也可以整合到Film這個(gè)父組件里面，

這樣我就不必進(jìn)行父組件傳值到子組件里面了

不過，為了讓Film這個(gè)父組件里面不要太多等等的原因，我還是不整合了

加載長(zhǎng)數(shù)據(jù)的話，數(shù)據(jù)會(huì)顯示不完整，只顯示一頁(yè)，自己參考官方文檔，一般用系統(tǒng)的布局，比如

下滑有系統(tǒng)默認(rèn)和自定義的，系統(tǒng)默認(rèn)就很簡(jiǎn)單：<div>或

<view>外套個(gè)

?<scroll-view

??scroll-y?style="width:?100%;?height:?100%;"

??refresher-enabled="{{true}}"

??refresher-threshold="{{100}}"

??refresher-default-style="white"

??refresher-background="lightgreen"

??refresher-triggered="{{triggered}}"

??bindrefresherpulling="onPulling"

??bindrefresherrefresh="onRefresh"

??bindrefresherrestore="onRestore"

??bindrefresherabort="onAbort"

>

</scroll-view>就可以了。同時(shí)微信小程序中似乎沒有<img>,只有<image>

例子：把賣電影票的vue賣座網(wǎng)項(xiàng)目改寫成小程序的標(biāo)上序號(hào)的步驟

1

2

其實(shí)本例子的實(shí)質(zhì)是：用別的語(yǔ)言實(shí)現(xiàn)原來(lái)語(yǔ)言的代碼功能。

開三個(gè)參考

開啟vue項(xiàng)目的前后臺(tái)，看運(yùn)行效果。由此確定我先要實(shí)現(xiàn)的是導(dǎo)航條部分,暫時(shí)我想先顯示當(dāng)前熱映部分的界面

由觀察可得，控制一開始就顯示的界面的文件是app.json

刪除以下文件

關(guān)于頁(yè)面等的組件一般我習(xí)慣是創(chuàng)建在pages文件夾里面的，創(chuàng)建方法就是先自己命名個(gè)組件的名字的文件夾，后面鼠標(biāo)右鍵點(diǎn)擊【新建Component】選項(xiàng)，只輸入index后按回車就會(huì)自動(dòng)生成4個(gè)文件

首先我要實(shí)現(xiàn)的是導(dǎo)航欄和界面跳轉(zhuǎn)等等的功能（項(xiàng)目結(jié)構(gòu)可以先自定義，后面功能界面都實(shí)現(xiàn)后，進(jìn)行優(yōu)化，代碼重構(gòu)等等）：

*百度得知 <navigator?url="/pages/Comingplaying/index">跳轉(zhuǎn)到新頁(yè)面</navigator>可以成功跳轉(zhuǎn)，記得“/”要加在組件路徑里面。

常常自己創(chuàng)建些說明文件在旁邊

*查看開發(fā)者文檔（一般想實(shí)現(xiàn)什么這里都可以找到示例，很好用），依次點(diǎn)【幫助】，【開發(fā)文檔】選項(xiàng)，之后點(diǎn)在開發(fā)者工具中預(yù)覽效果

因?yàn)槭莿e人寫的代碼可能不是很好用，有時(shí)會(huì)進(jìn)行重命名，代碼重構(gòu)成自己熟悉的內(nèi)容，邏輯等等變更清晰，更方便我使用

先把基本上都會(huì)出現(xiàn)的組件（界面）都創(chuàng)建好，至少先實(shí)現(xiàn)導(dǎo)航欄和界面跳轉(zhuǎn)

個(gè)人設(shè)置tabbar導(dǎo)航欄的方法

個(gè)人查看了B站的視頻和自己的嘗試和總結(jié)，得知

app.json中的

"tabBar"中的 "custom"為 false就是只配置app.json就可以實(shí)現(xiàn)全局的導(dǎo)航欄tabbar，否則就要寫別的代碼

開發(fā)者文檔中的框架中的全局配置等等和指南中的內(nèi)容值得結(jié)合查看

圖片的獲取可以直接鼠標(biāo)右鍵另存圖片，也可以檢查后訪問圖片路徑，不行就多次訪問，然后另存圖片，剪切到想要放的項(xiàng)目位置里面，同時(shí)也可以到iconfont阿里巴巴矢量圖標(biāo)庫(kù)

https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

app.json中的selectedIconPath是選后的圖標(biāo)路徑，"iconPath"是選前的圖標(biāo)路徑，

"selectedColor"是選擇后的顏色，#ff5f16之類的樣式就是鼠標(biāo)右鍵點(diǎn)檢查，

查看賣座網(wǎng)的樣式復(fù)制得來(lái)的

微信小程序中的頂部選項(xiàng)卡和底部選項(xiàng)卡（全局或局部的自定義導(dǎo)航欄tabbar）都可以百度關(guān)鍵詞后自己修改成滿足自己需求的內(nèi)容

https://www.jb51.net/article/161227.htm我找到的代碼必須自己注釋掉，修改一些樣式代碼才真正有用

遇到要實(shí)現(xiàn)的功能等等可以百度或搜索b站的教程視頻，自己的教程等等，后面進(jìn)行嘗試等等，比如API_request網(wǎng)絡(luò)請(qǐng)求，wx.request的使用，請(qǐng)求別人網(wǎng)址的數(shù)據(jù)，API，接口等等，我就是參考了別的b站up的教程視頻。https://www.bilibili.com/video/BV1WQ4y1T7D8?p=22&;share_source=copy_web

（可請(qǐng)求到的數(shù)據(jù)的路徑：https://edu.newsight.cn/wxList.php）

??onLoad:function?(options)?

中的方法不起作用的原因是你看你app.json中是先加載哪個(gè)組件，先加載的組件中的js文件中的onLoad:function?(options)?方法才會(huì)觸發(fā)

個(gè)人認(rèn)為wx.request的好處是不用自己做跨域訪問設(shè)置，只要設(shè)置不校檢合法域名即可

vue中的請(qǐng)求頭是headers，微信小程序中的請(qǐng)求頭是header（基本上有些時(shí)候，X-Client-Info和X-Host是請(qǐng)求頭中必備，如果不寫，就訪問不到網(wǎng)站的數(shù)據(jù)）。我只所以知道這個(gè)，是因?yàn)槲野俣攘诵┵Y料，之后參考，之后嘗試我的猜想，嘗試自己的猜想后，記錄成功等等的說明等等很有用。

下面是我自己修改的官方的實(shí)例的代碼，父子組件傳值（我常用父組件傳給子組件，父組件常常為app.json中設(shè)置的先顯示的部分）

子組件中的index.js要實(shí)現(xiàn)父子傳值就要用Component，而不是Page。

父組件中的index.js中用Page

常常百度XXX和YYY等等的區(qū)別，讓我更好的使用XXX和YYY等等

page和component的區(qū)別

簡(jiǎn)單地說，page是官方默認(rèn)組件，component是自定義組件。當(dāng)你需要開發(fā)一個(gè)有特色的，可靈活配置樣式的小程序，就要用到component。開發(fā)一個(gè)小程序前先確定是否需要自定義component模板來(lái)做，相對(duì)來(lái)說，page比較簡(jiǎn)單快捷，但是樣式固定單一。而component可以有更多功能，例如頭部返回主頁(yè)按鈕，頭部圖片背景，自定義底部導(dǎo)航樣式和底部導(dǎo)航根據(jù)頭部背景色而變化等等。

在創(chuàng)建組件文件夾后，鼠標(biāo)右鍵可以創(chuàng)建page或component

因?yàn)橐敳康那袚Q條功能要用Page，那么基本上要是父組件，那么我就要是把原先的FilmHeader整合到Film組件中，共同作為父組件，把請(qǐng)求到的數(shù)據(jù)傳給子組件Nowplaying和Comingplaying

要把請(qǐng)求到的數(shù)據(jù)"."成json格式的數(shù)組，之后wxml文件中遍歷數(shù)組等等。pages中一般創(chuàng)建page或component，父組件或子組件，頁(yè)面之類的組件，而components中一般創(chuàng)建component，子組件。

其實(shí)Nowplaying和Comingplaying也可以整合到Film這個(gè)父組件里面，

這樣我就不必進(jìn)行父組件傳值到子組件里面了

不過，為了讓Film這個(gè)父組件里面不要太多等等的原因，我還是不整合了

關(guān)于樣式怎么調(diào)，我個(gè)人的心得體會(huì)就是平時(shí)“封裝”一些自己寫出來(lái)等等的常見樣式模板，以后用，很多都要自己調(diào)，rpx，flex等等很常用，百度一些樣式，彈性盒子布局等等

加載長(zhǎng)數(shù)據(jù)的話，數(shù)據(jù)會(huì)顯示不完整，只顯示一頁(yè)，自己參考官方文檔，一般用系統(tǒng)的布局，比如

下滑有系統(tǒng)默認(rèn)和自定義的，系統(tǒng)默認(rèn)就很簡(jiǎn)單：<div>或

<view>外套個(gè)

?<scroll-view

??scroll-y?style="width:?100%;?height:?100%;"

??refresher-enabled="{{true}}"

??refresher-threshold="{{100}}"

??refresher-default-style="white"

??refresher-background="lightgreen"

??refresher-triggered="{{triggered}}"

??bindrefresherpulling="onPulling"

??bindrefresherrefresh="onRefresh"

??bindrefresherrestore="onRestore"

??bindrefresherabort="onAbort"

>

</scroll-view>就可以了。同時(shí)微信小程序中似乎沒有<img>,只有<image>