[兩天快速開發(fā)一個(gè)自己的微信小程序-,懸筆e絕]微信小程序開發(fā)

1、本文格式為word版，下載可任意編輯兩天快速開發(fā)一個(gè)自己的微信小程序-,懸筆e絕微信小程序開發(fā) 一寫在前面 1.為什么要學(xué)小程序開發(fā)？ 對于前端開發(fā)而言，微信小程序由于其簡潔快速、開發(fā)成本低、用戶流量巨大等特點(diǎn)，也就成了前端開發(fā)工程師必會(huì)的一個(gè)技能。 2.先放上我做的小程序 （1）歡迎頁：這個(gè)logo是當(dāng)年念高校給社團(tuán)做的logo，苦學(xué)了整整一周的ps啊 （2）首頁：輪播頭圖，天氣，豆瓣電影正在熱映 （3）全國城市切換頁 （4）天氣詳情頁 （5）地圖周邊服務(wù) （6）豆瓣電影 （7）熱點(diǎn)新聞 （8）更多頁面 3.開發(fā)預(yù)備： （1）有人開玩笑說，會(huì)vue小程序根本都不用學(xué)： 微信小程序雖然是騰訊自

2、己搞的，但是核心的思想跟vue等框架是一樣一樣的哦 （2）擅長搜集精致的小組件： “我們不生產(chǎn)代碼，我們只是代碼的搬運(yùn)工”，擅長找到想要的組件并把他們奇妙優(yōu)雅的組裝成一個(gè)大項(xiàng)目，也算是程序員一項(xiàng)基本技能了。 擼起袖子開干了 一.注冊小程序賬號(hào)，下載ide 1.官網(wǎng)注冊 2.官方文檔一向都是最好的學(xué)習(xí)資料。 留意： （1）注冊賬號(hào)之后會(huì)有一個(gè)appid，新建項(xiàng)目的時(shí)候需要填上，不然許多功能是用不了的，比如不能預(yù)覽，不能上傳代碼等等。 （2）假如你注冊過微信公眾號(hào)的話，肯定要留意，微信公眾號(hào)和小程序是兩個(gè)賬號(hào)，二者的appid也是不同，小程序開發(fā)必需使用小程序的appid哦。 二.小程序框架介紹和

3、運(yùn)行機(jī)制 1.我們建立了“一般快速啟動(dòng)模板”，然后整個(gè)項(xiàng)目名目如下： 2.app.js 整個(gè)項(xiàng)目的啟動(dòng)文件，如解釋寫的onlaunch方法有三大功能，掃瞄器緩存進(jìn)行存和取數(shù)據(jù)； 用登陸勝利的回調(diào)；獵取用戶信息。 globaldata是定義整個(gè)項(xiàng)目的全局變量或者常量哦。 3.app.json 整個(gè)項(xiàng)目的配置文件，比如注冊頁面，配置tab頁，設(shè)置整個(gè)項(xiàng)目的樣式，頁面標(biāo)題等等； ！留意：小程序啟動(dòng)默認(rèn)的第一個(gè)頁面，就是app.json的pages中的第一個(gè)頁面哦。 4.pages 小程序的頁面組件，有幾個(gè)頁面就會(huì)有幾個(gè)子文件夾。比如快速啟動(dòng)模板，就有兩個(gè)頁面，index和logs 5.打開index

4、名目 可以看到有三個(gè)文件，其實(shí)和我們web開發(fā)的文件是一一對應(yīng)的。 index.wxml對應(yīng)index.html； index.wxss對應(yīng)index.css； index.js就是js文件哦。 一般我們還會(huì)給每個(gè)頁面組件添加一個(gè).json文件，作為該頁面組件的配置文件，設(shè)置頁面標(biāo)題等功能 6.雙擊index.js文件 （1）var app = getapp(); 引入整個(gè)項(xiàng)目的app.js文件，用來取期中的公共變量等信息。 假如要使用util.js工具庫中的某個(gè)方法，在util.js中module.exports導(dǎo)出，然后在需要的頁面中require即可得到哦。 （2）比如，我們要獵取豆瓣電

5、影的時(shí)候，我們需要調(diào)用豆瓣的api； 我們先在app.js中的gloabdata中定義doubanbase 然后在index.js中使用app.globadata.doubanbase即可取到這個(gè)值。 當(dāng)然這些常量你也可以在頁面需要的時(shí)候，再用寫死的值，但是為了整個(gè)項(xiàng)目的維護(hù)，還是建議把這種公用參數(shù)統(tǒng)一寫在配置文件中哦。 （3）接下來在整個(gè)page()中，第一個(gè)data，就是本頁面組件的內(nèi)部數(shù)據(jù)，會(huì)渲染到該頁面的wxml文件中，類似于vue、react哦 通過setdata修改data數(shù)據(jù)，驅(qū)動(dòng)頁面渲染 （4）一些生命周期函數(shù) 比如onload()， onready(), onshow(),

6、onhide()等等，監(jiān)聽頁面加載、頁面初次渲染、頁面顯示、頁面隱蔽等等 更多的可以查官網(wǎng)api哦。其中用的最多的就是onload()方法，和onshareappmessage()方法（設(shè)置頁面共享的信息） 7 .wxml模板的使用。 比如本項(xiàng)目電影頁面，就是以最小的星級(jí)評(píng)價(jià)組件wxml當(dāng)做模板，star到movie到movie-list，一級(jí)一級(jí)的嵌套使用。 star-template.wxml頁面寫好name屬性； 然后import引入的時(shí)候通過name獲得即可 8.常用的wxml標(biāo)簽 view，text，icon，swiper，block，scroll-view等等，這些標(biāo)簽直接查官網(wǎng)文

7、檔即可 三.小程序框架、各個(gè)頁面以及發(fā)布上線的留意點(diǎn) 1.整個(gè)框架中的一些留意點(diǎn) （1）整個(gè)wxml頁面，最底層的標(biāo)簽是 哦。 （2） 每個(gè)頁面頂部導(dǎo)航欄的顏色，title在本頁面的json中配置，假如沒有配置的話，取app.json中的總配置哦。 （3）json中不能寫解釋哦，不然會(huì)報(bào)錯(cuò)的。 （4）路由相關(guān) 1）使用wx.switchtab跳轉(zhuǎn)tab頁的話，在app.json中除了注冊pages頁面，還需要在tabbar中注冊tab頁，才能生效哦。 留意：tab最多5個(gè)，也就是我們說的頭部或者底部最多5個(gè)菜單。其他的頁面只能通過其他路由方法打開哦。 2）navigateto是跳到某個(gè)非tab

8、頁，比如歡迎頁，電影詳情頁，城市選擇頁； 在app.json中注冊后，不能在tabbar里注冊哦，不然同樣也是不能跳轉(zhuǎn)的哦。 3）relaunch跳轉(zhuǎn)，新開的頁面左上角是沒有退回按鈕的，本項(xiàng)目只用了一次，切換城市的時(shí)候哦。 （5）頁面之間傳遞參數(shù) 參數(shù)寫在跳轉(zhuǎn)的url之中，然后另一個(gè)頁面在onload方法中的傳參option接收到。如下傳遞和獵取id （6）data-開頭的自定義屬性的使用 比如wxml中我們怎么寫 點(diǎn)擊的大事對象可以這么取，var postid = event.currenttarget.dataset.postid; 留意： 大寫會(huì)轉(zhuǎn)換成小寫，帶_符號(hào)會(huì)轉(zhuǎn)成駝峰形式 （7）

9、大事對象event，event.target和event.currenttarget的區(qū)分： target指的是當(dāng)前點(diǎn)擊的組件 和currenttarget 指的是大事捕獲的組件。 比如，輪播圖組件，點(diǎn)擊大事應(yīng)當(dāng)要綁定到swiper上，這樣才能監(jiān)控任意一張圖片是否被點(diǎn)擊， 這時(shí)target這里指的是image（由于點(diǎn)擊的是圖片），而currenttarget指的是swiper（由于綁定點(diǎn)擊大事在swiper上） （8）使用免費(fèi)的網(wǎng)絡(luò)接口： 本項(xiàng)目中用到了 和風(fēng)天氣api，騰訊地圖api，百度地圖api，豆瓣電影api，聚合頭條新聞api等，詳細(xì)用法可以看各自官網(wǎng)的接口文檔哦，很具體的 留意：免

10、費(fèi)接口是有訪問限制的，所以假如用別人的組件用了這種接口的話，最好還是自己注冊一個(gè)新的key替換上哦 附上一個(gè)免費(fèi)接口大全： 另外還要留意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問不了的 （8）wxss有一個(gè)坑：無法讀取本地資源，比如背景圖片用本地就會(huì)報(bào)錯(cuò)哦。 把本地圖片弄成網(wǎng)絡(luò)圖片的幾種方式： 上傳到個(gè)人網(wǎng)站；空間相冊等等也是可以的哦 2.切換城市頁面： （1）首頁使用navigateto跳轉(zhuǎn)到切換城市頁，由于首頁并沒有關(guān)閉，導(dǎo)致切換了城市返回來，天氣信息還是舊的。 正確的處理規(guī)律如下： 1）使用relaunch跳轉(zhuǎn)到切換城市頁面，實(shí)質(zhì)是關(guān)閉全部頁面打開新的頁面哦。 2）切換城

11、市頁面，更新公共變量中城市信息為手動(dòng)切換的城區(qū)，再switchtab回到首頁，觸發(fā)首頁重新加載。 3）首頁獵取城市信息的時(shí)候加一個(gè)推斷，全局沒有才取定位的，全局有（比如剛才設(shè)置了）就用全局的哦。 （2）城市列表的滾動(dòng)和回到頂部 基于scroll-view組件的scroll-top屬性，初始就是0，滾動(dòng)就會(huì)增加的； 點(diǎn)擊回到頂部給它置為0即可回到頂部 3.天氣頁 （1）初始化頁面，天氣顯示的規(guī)律 首先調(diào)用小程序的wx.getlocation方法獲得當(dāng)前的經(jīng)緯度，然后調(diào)用騰訊地圖獲得當(dāng)前的城市名稱和區(qū)縣名稱，并存到公共變量中， 再調(diào)用查詢天氣和空氣質(zhì)量的方法哦。 （2）容錯(cuò)處理 城市的名稱長短不一

12、，有點(diǎn)名字特殊長，比如巴彥淖爾市這種，需要?jiǎng)討B(tài)的獵取完整的城市名稱； 有些偏僻的城市臨時(shí)沒有天氣信息，我們需要對返回的結(jié)果進(jìn)行推斷，沒有信息的需要給用戶一個(gè)良好的提示信息。 4.周邊-地圖服務(wù)頁面 （1）調(diào)用百度地圖的各種服務(wù)，查詢酒店，美食，生活服務(wù)三種信息，更多信息可以看百度地圖的文檔 （2）點(diǎn)擊時(shí)給被點(diǎn)中的圖標(biāo)加個(gè)邊框，數(shù)據(jù)驅(qū)動(dòng)視圖，所以使用一個(gè)長度為3的數(shù)組保存三個(gè)圖標(biāo)當(dāng)前是否被點(diǎn)中的狀態(tài) 然后wxml再依據(jù)數(shù)據(jù)來動(dòng)態(tài)添加class，增加邊框樣式 5.豆瓣電影頁 （1）電影詳情頁的預(yù)覽圖片，用小程序本身的previewimage實(shí)現(xiàn)。 （2）詳情頁使用onreachbottom()方法

13、，監(jiān)控用戶上拉觸底大事，然后發(fā)送懇求連續(xù)獲得數(shù)據(jù)，實(shí)現(xiàn)懶加載的效果 （3）用戶體驗(yàn)方面的優(yōu)化，js中將整數(shù)評(píng)分比如7分統(tǒng)一改為7.0分，然后wxml模板再推斷分?jǐn)?shù)是否為0顯示“暫無評(píng)分” （4）搜尋之后清空搜尋框 由于小程序中不能使用getelementbyid這種方式獲得元素，只能用數(shù)據(jù)來掌握了 在data中加一個(gè)屬性searchtext來保存搜尋框的內(nèi)容并和input的value屬性綁定，搜尋完成或者點(diǎn)擊x時(shí)，searchtext變量清空即可實(shí)現(xiàn)清空輸入框的效果哦。 6.新聞頁面 （1）聚合頭條新聞的免費(fèi)接口，只返回了新聞的基本信息，新聞的主體內(nèi)容是沒有的哦。 我找了好多新聞?lì)惖慕涌?，似乎都是沒有新聞主體內(nèi)容的。假如誰知道更好的接口歡迎留言告知我哈 （2）當(dāng)然，也可以自己去爬新聞網(wǎng)站的數(shù)據(jù)哦 7.更多頁面 （1）小程序目前開放外鏈的功能只是給公司組織的小程序開放了，個(gè)人開發(fā)還是不能使用外鏈的哦。 （2）彩蛋頁面，獲得用戶信息 通過 wx.setstoragesync(userinfos, userinfos);可以獲得登陸小程序的用戶的個(gè)人信息，可以發(fā)送給后臺(tái)存到數(shù)據(jù)庫中，便利對用戶進(jìn)行分析 我這里只是存儲(chǔ)到掃瞄器緩存中哦，最大應(yīng)當(dāng)是10m緩存； 假如用戶把這個(gè)小程序從小程序列表中刪除掉，就會(huì)清空這個(gè)