快速開(kāi)發(fā)一個(gè)自己的微信小程序

2018-7-20    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

一.寫(xiě)在前面

小程序?qū)W習(xí)資料

1.為什么要學(xué)小程序開(kāi)發(fā)?

對(duì)于前端開(kāi)發(fā)而言,微信小程序因?yàn)槠浜?jiǎn)單快速、開(kāi)發(fā)成本低、用戶流量巨大等特點(diǎn),也就成了前端開(kāi)發(fā)工程師必會(huì)的一個(gè)技能。

2.開(kāi)發(fā)準(zhǔn)備:

(1)有人開(kāi)玩笑說(shuō),會(huì)vue小程序根本都不用學(xué):

微信小程序雖然是騰訊自己搞的,但是核心的思想跟vue等框架是一樣一樣的哦~

(2)善于搜集精美的小組件: “我們不生產(chǎn)代碼,我們只是代碼的搬運(yùn)工”,善于找到想要的組件并把他們巧妙優(yōu)雅的組裝成一個(gè)大項(xiàng)目,也算是程序員一項(xiàng)基本技能了。

具體怎么找到想要的小程序demo,篇末會(huì)給大家推薦小程序的資源,有很多大神的項(xiàng)目哦

擼起袖子開(kāi)干了

一.注冊(cè)小程序賬號(hào),下載IDE

1.官網(wǎng)注冊(cè)https://mp.weixin.qq.com/,并下載IDE。

2.官方文檔一向都是最好的學(xué)習(xí)資料。

注意:

(1)注冊(cè)賬號(hào)之后會(huì)有一個(gè)appid,新建項(xiàng)目的時(shí)候需要填上,不然很多功能是用不了的,比如不能預(yù)覽,不能上傳代碼等等。

(2)如果你注冊(cè)過(guò)微信公眾號(hào)的話,一定要注意,微信公眾號(hào)和小程序是兩個(gè)賬號(hào),二者的appid也是不同,小程序開(kāi)發(fā)必須使用小程序的appid哦。

二.小程序框架介紹和運(yùn)行機(jī)制

1.我們建立了“普通快速啟動(dòng)模板”,然后整個(gè)項(xiàng)目目錄如下:

2.app.js

整個(gè)項(xiàng)目的啟動(dòng)文件,如注釋寫(xiě)的onlaunch方法有三大功能,瀏覽器緩存進(jìn)行存和取數(shù)據(jù);用登陸成功的回調(diào);獲取用戶信息。

globalData是定義整個(gè)項(xiàng)目的全局變量或者常量哦。

3.app.json

整個(gè)項(xiàng)目的配置文件,比如注冊(cè)頁(yè)面,配置tab頁(yè),設(shè)置整個(gè)項(xiàng)目的樣式,頁(yè)面標(biāo)題等等;

!注意:小程序啟動(dòng)默認(rèn)的第一個(gè)頁(yè)面,就是app.json的pages中的第一個(gè)頁(yè)面哦。

4.pages

小程序的頁(yè)面組件,有幾個(gè)頁(yè)面就會(huì)有幾個(gè)子文件夾。比如快速啟動(dòng)模板,就有兩個(gè)頁(yè)面,index和logs

5.打開(kāi)index目錄

可以看到有三個(gè)文件,其實(shí)和我們web開(kāi)發(fā)的文件是一一對(duì)應(yīng)的。

index.wxml對(duì)應(yīng)index.html;

index.wxss對(duì)應(yīng)index.css;

index.js就是js文件哦。

一般我們還會(huì)給每個(gè)頁(yè)面組件添加一個(gè).json文件,作為該頁(yè)面組件的配置文件,設(shè)置頁(yè)面標(biāo)題等功能

6.雙擊index.js文件

(1)var app = getApp();

引入整個(gè)項(xiàng)目的app.js文件,用來(lái)取期中的公共變量等信息。

如果要使用util.js工具庫(kù)中的某個(gè)方法,在util.js中module.exports導(dǎo)出,然后在需要的頁(yè)面中require即可得到哦。

(2)比如,我們要獲取豆瓣電影的時(shí)候,我們需要調(diào)用豆瓣的api;我們先在app.js中的gloabData中定義doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到這個(gè)值。

當(dāng)然這些常量你也可以在頁(yè)面需要的時(shí)候,再用寫(xiě)死的值,但是為了整個(gè)項(xiàng)目的維護(hù),還是建議把這種公用參數(shù)統(tǒng)一寫(xiě)在配置文件中哦。

(3)接下來(lái)在整個(gè)page({})中,第一個(gè)data,就是本頁(yè)面組件的內(nèi)部數(shù)據(jù),會(huì)渲染到該頁(yè)面的wxml文件中,類似于vue、react哦~

通過(guò)setData修改data數(shù)據(jù),驅(qū)動(dòng)頁(yè)面渲染

(4)一些生命周期函數(shù)

比如onload(), onready(), onshow(), onhide()等等,監(jiān)聽(tīng)頁(yè)面加載、頁(yè)面初次渲染、頁(yè)面顯示、頁(yè)面隱藏等等

更多的可以查官網(wǎng)API哦。其中用的最多的就是onload()方法,和onShareAppMessage()方法(設(shè)置頁(yè)面分享的信息)

7 .wxml模板的使用。

比如本項(xiàng)目電影頁(yè)面,就是以最小的星級(jí)評(píng)價(jià)組件wxml當(dāng)做模板,star到movie到movie-list,一級(jí)一級(jí)的嵌套使用。

star-template.wxml頁(yè)面寫(xiě)好name屬性;然后import引入的時(shí)候通過(guò)name獲得即可

8.常用的wxml標(biāo)簽

view,text,icon,swiper,block,scroll-view等等,這些標(biāo)簽直接查官網(wǎng)文檔即可

三.小程序框架、各個(gè)頁(yè)面以及發(fā)布上線的注意點(diǎn)

1.整個(gè)框架中的一些注意點(diǎn)

(1)整個(gè)wxml頁(yè)面,最底層的標(biāo)簽是哦。

(2) 每個(gè)頁(yè)面頂部導(dǎo)航欄的顏色,title在本頁(yè)面的json中配置,如果沒(méi)有配置的話,取app.json中的總配置哦。

(3)json中不能寫(xiě)注釋哦,不然會(huì)報(bào)錯(cuò)的。

(4)路由相關(guān)

1)使用wx.SwitchTab跳轉(zhuǎn)tab頁(yè)的話,在app.json中除了注冊(cè)pages頁(yè)面,還需要在tabBar中注冊(cè)tab頁(yè),才能生效哦。

注意:tab最多5個(gè),也就是我們說(shuō)的頭部或者底部最多5個(gè)菜單。其他的頁(yè)面只能通過(guò)其他路由方法打開(kāi)哦。

2)navigateTo是跳到某個(gè)非tab頁(yè),比如歡迎頁(yè),電影詳情頁(yè),城市選擇頁(yè);在app.json中注冊(cè)后,不能在tabBar里注冊(cè)哦,不然同樣也是不能跳轉(zhuǎn)的哦。

3)reLaunch跳轉(zhuǎn),新開(kāi)的頁(yè)面左上角是沒(méi)有退回按鈕的,本項(xiàng)目只用了一次,切換城市的時(shí)候哦。

(5)頁(yè)面之間傳遞參數(shù)

參數(shù)寫(xiě)在跳轉(zhuǎn)的url之中,然后另一個(gè)頁(yè)面在onload方法中的傳參option接收到。如下傳遞和獲取id

(6)data-開(kāi)頭的自定義屬性的使用

比如wxml中我們?cè)趺磳?xiě)

點(diǎn)擊的事件對(duì)象可以這么取,var postId = event.currentTarget.dataset.postid;

注意: 大寫(xiě)會(huì)轉(zhuǎn)換成小寫(xiě),帶_符號(hào)會(huì)轉(zhuǎn)成駝峰形式

(7)事件對(duì)象event,event.target和event.currentTarget的區(qū)別:

target指的是當(dāng)前點(diǎn)擊的組件 和currentTarget 指的是事件捕獲的組件。

比如,輪播圖組件,點(diǎn)擊事件應(yīng)該要綁定到swiper上,這樣才能監(jiān)控任意一張圖片是否被點(diǎn)擊,

這時(shí)target這里指的是image(因?yàn)辄c(diǎn)擊的是圖片),而currentTarget指的是swiper(因?yàn)榻壎c(diǎn)擊事件在swiper上)

(8)使用免費(fèi)的網(wǎng)絡(luò)接口:

本項(xiàng)目中用到了 和風(fēng)天氣api,騰訊地圖api,百度地圖api,豆瓣電影api,聚合頭條新聞api等,具體用法可以看各自官網(wǎng)的接口文檔哦,很詳細(xì)的

注意:免費(fèi)接口是有訪問(wèn)限制的,所以如果用別人的組件用了這種接口的話,最好還是自己注冊(cè)一個(gè)新的key替換上哦

附上一個(gè)免費(fèi)接口大全:

https://github.com/jokermonn/-Api

?。×硗膺€要注意,要把這些接口的域名配置到小程序的合法域名中,不然也是訪問(wèn)不了的

(8)wxss有一個(gè)坑:無(wú)法讀取本地資源,比如背景圖片用本地就會(huì)報(bào)錯(cuò)哦。

把本地圖片弄成網(wǎng)絡(luò)圖片的幾種方式: 上傳到個(gè)人網(wǎng)站;QQ空間相冊(cè)等等也是可以的哦

2.切換城市頁(yè)面:

(1)首頁(yè)使用navigateTo跳轉(zhuǎn)到切換城市頁(yè),由于首頁(yè)并沒(méi)有關(guān)閉,導(dǎo)致切換了城市返回來(lái),天氣信息還是舊的。

正確的處理邏輯如下:

1)使用reLaunch跳轉(zhuǎn)到切換城市頁(yè)面,實(shí)質(zhì)是關(guān)閉所有頁(yè)面打開(kāi)新的頁(yè)面哦。

2)切換城市頁(yè)面,更新公共變量中城市信息為手動(dòng)切換的城區(qū),再switchTab回到首頁(yè),觸發(fā)首頁(yè)重新加載。

3)首頁(yè)獲取城市信息的時(shí)候加一個(gè)判斷,全局沒(méi)有才取定位的,全局有(比如剛才設(shè)置了)就用全局的哦。

(2)城市列表的滾動(dòng)和回到頂部

基于scroll-view組件的scroll-top屬性,初始就是0,滾動(dòng)就會(huì)增加的;點(diǎn)擊回到頂部給它置為0即可回到頂部

3.天氣頁(yè)

(1)初始化頁(yè)面,天氣顯示的邏輯

首先調(diào)用小程序的wx.getLocation方法獲得當(dāng)前的經(jīng)緯度,然后調(diào)用騰訊地圖獲得當(dāng)前的城市名稱和區(qū)縣名稱,并存到公共變量中,

再調(diào)用查詢天氣和空氣質(zhì)量的方法哦。

(2)容錯(cuò)處理

城市的名稱長(zhǎng)短不一,有點(diǎn)名字特別長(zhǎng),比如巴彥淖爾市這種,需要?jiǎng)討B(tài)的獲取完整的城市名稱;

有些偏僻的城市暫時(shí)沒(méi)有天氣信息,我們需要對(duì)返回的結(jié)果進(jìn)行判斷,沒(méi)有信息的需要給用戶一個(gè)良好的提示信息。

4.周邊-地圖服務(wù)頁(yè)面

(1)調(diào)用百度地圖的各種服務(wù),查詢酒店,美食,生活服務(wù)三種信息,更多信息可以看百度地圖的文檔

(2)點(diǎn)擊時(shí)給被點(diǎn)中的圖標(biāo)加個(gè)邊框,數(shù)據(jù)驅(qū)動(dòng)視圖,所以使用一個(gè)長(zhǎng)度為3的數(shù)組保存三個(gè)圖標(biāo)當(dāng)前是否被點(diǎn)中的狀態(tài)

然后wxml再根據(jù)數(shù)據(jù)來(lái)動(dòng)態(tài)添加class,增加邊框樣式

5.豆瓣電影頁(yè)

(1)電影詳情頁(yè)的預(yù)覽圖片,用小程序本身的previewImage實(shí)現(xiàn)。

(2)詳情頁(yè)使用onReachBottom()方法,監(jiān)控用戶上拉觸底事件,然后發(fā)送請(qǐng)求繼續(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顯示“暫無(wú)評(píng)分”

(4)搜索之后清空搜索框

因?yàn)樾〕绦蛑胁荒苁褂胓etelementbyId這種方式獲得元素,只能用數(shù)據(jù)來(lái)控制了

在data中加一個(gè)屬性searchText來(lái)保存搜索框的內(nèi)容并和 input的value屬性綁定,搜索完成或者點(diǎn)擊X時(shí),searchText變量清空即可實(shí)現(xiàn)清空輸入框的效果哦。

6.新聞頁(yè)面

(1)聚合頭條新聞的免費(fèi)接口,只返回了新聞的基本信息,新聞的主體內(nèi)容是沒(méi)有的哦。

我找了好多新聞?lì)惖慕涌?,好像都是沒(méi)有新聞主體內(nèi)容的。如果誰(shuí)知道更好的接口歡迎留言告訴我哈~

(2)當(dāng)然,也可以自己去爬新聞網(wǎng)站的數(shù)據(jù)哦

7.更多頁(yè)面

(1)小程序目前開(kāi)放外鏈的功能只是給公司組織的小程序開(kāi)放了,個(gè)人開(kāi)發(fā)還是不能使用外鏈的哦。

(2)彩蛋頁(yè)面,獲得用戶信息

通過(guò) wx.setStorageSync('userInfos', userInfos); 可以獲得登陸小程序的用戶的個(gè)人信息,可以發(fā)送給后臺(tái)存到數(shù)據(jù)庫(kù)中,方便對(duì)用戶進(jìn)行分析

我這里只是存儲(chǔ)到瀏覽器緩存中哦,最大應(yīng)該是10M緩存;如果用戶把這個(gè)小程序從小程序列表中刪除掉,就會(huì)清空這個(gè)緩存。

8.發(fā)布注意

(1) 新版本小程序發(fā)布的限制為2M,一般都是圖片最占空間,所以盡量使用網(wǎng)絡(luò)圖片

具體怎么把本地圖片變成網(wǎng)絡(luò)圖片,上面有講哦。

(2)在開(kāi)發(fā)者工具上預(yù)覽測(cè)試沒(méi)問(wèn)題,點(diǎn)擊上傳;網(wǎng)頁(yè)版小程序個(gè)的人中心的左側(cè)“開(kāi)發(fā)管理”菜單,第三塊--開(kāi)發(fā)版本就有了內(nèi)容。

(3)點(diǎn)擊提交,填寫(xiě)小程序相關(guān)信息,就可以提交審核了哦。

注意:分類最好填寫(xiě)準(zhǔn)確,這樣才能更快的通過(guò)審核哦。我這個(gè)小程序一天半時(shí)間過(guò)審上線的

至此,我就把兩天開(kāi)發(fā)內(nèi)碰到的坑和注意點(diǎn)都過(guò)了一遍,據(jù)說(shuō)還有更多的坑,等之后更深入的開(kāi)發(fā)再繼續(xù)研究咯。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔