小程序如何開發(fā)

一.注冊(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è)過微信大眾號(hào)話，必定要留意，微信大眾號(hào)和微信小程序是兩個(gè)賬號(hào)，二者的appid也是不同，小程序開發(fā)必須運(yùn)用小程序的appid哦。
二.小程序結(jié)構(gòu)介紹和運(yùn)行機(jī)制
1.咱們建立了“普通快速發(fā)動(dòng)模板”，然后整個(gè)項(xiàng)目目錄如下：
2.app.js
整個(gè)項(xiàng)目的發(fā)動(dòng)文件，如注釋寫的onlaunch辦法有三大功用，瀏覽器緩存進(jìn)行存和取數(shù)據(jù)；用登陸成功的回調(diào)；獲取用戶信息。
globalData是界說整個(gè)項(xiàng)目的大局變量或許常量哦。
3.app.json
整個(gè)項(xiàng)目的裝備文件，比方注冊(cè)頁面，裝備tab頁，設(shè)置整個(gè)項(xiàng)目的款式，頁面標(biāo)題等等；
！留意：小程序發(fā)動(dòng)默認(rèn)的為數(shù)不多個(gè)頁面，便是app.json的pages中的為數(shù)不多個(gè)頁面哦。
4.pages
小程序的頁面組件，有幾個(gè)頁面就會(huì)有幾個(gè)子文件夾。比方快速發(fā)動(dòng)模板，就有兩個(gè)頁面，index和logs
5.翻開index目錄
能夠看到有三個(gè)文件，其實(shí)和咱們web開發(fā)的文件是一一對(duì)應(yīng)的。
index.wxml對(duì)應(yīng)index.html；
index.wxss對(duì)應(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文件，用來取期中的公共變量等信息。
假如要運(yùn)用util.js東西庫中的某個(gè)辦法，在util.js中module.exports導(dǎo)出，然后在需求的頁面中require即可得到哦。
（2）比方，咱們要獲取豆瓣電影的時(shí)分，咱們需求調(diào)用豆瓣的api；咱們先在app.js中的gloabData中界說doubanBase
然后在index.js中運(yùn)用app.globaData.doubanBase即可取到這個(gè)值。
當(dāng)然這些常量你也能夠在頁面需求的時(shí)分，再用寫死的值，可是為了整個(gè)項(xiàng)目的維護(hù)，仍是主張把這種共用參數(shù)一致寫在裝備文件中哦。
（3）接下來在整個(gè)page({})中，為數(shù)不多個(gè)data，便是本頁面組件的內(nèi)部數(shù)據(jù)，會(huì)烘托到該頁面的wxml文件中，類似于vue、react哦~
經(jīng)過setData修改data數(shù)據(jù)，驅(qū)動(dòng)頁面烘托
（4）一些生命周期函數(shù)
比方()， onready(), onshow(), onhide()等等，監(jiān)聽頁面加載、頁面初度烘托、頁面顯示、頁面躲藏等等
更多的能夠查官網(wǎng)API哦。其中用的多的便是()辦法，和onShareAppMessage()辦法（設(shè)置頁面分享的信息）
7 .wxml模板的運(yùn)用。
比方本項(xiàng)目電影頁面，便是以小的星級(jí)點(diǎn)評(píng)組件wxml作為模板，star到movie到movie-list，一級(jí)一級(jí)的嵌套運(yùn)用。
star-template.wxml頁面寫好name特點(diǎn)；然后import引入的時(shí)分經(jīng)過name取得即可
8.常用的wxml標(biāo)簽
view，text，icon，swiper，block，scroll-view等等，這些標(biāo)簽直接查官網(wǎng)文檔即可
三.小程序結(jié)構(gòu)、各個(gè)頁面以及發(fā)布上線的留意點(diǎn)
1.整個(gè)結(jié)構(gòu)中的一些留意點(diǎn)
（1）整個(gè)wxml頁面，比較底層的標(biāo)簽是哦。
（2） 每個(gè)頁面頂部欄的顏色，title在本頁面的json中裝備，假如沒有裝備的話，取app.json中的總裝備哦。
（3）json中不能寫注釋哦，否則會(huì)報(bào)錯(cuò)的。
（4）路由相關(guān)
1）運(yùn)用wx.SwitchTab跳轉(zhuǎn)tab頁的話，在app.json中除了注冊(cè)pages頁面，還需求在tabBar中注冊(cè)tab頁，才干收效哦。
留意：tab多5個(gè)，也便是咱們說的頭部或許底部多5個(gè)菜單。其他的頁面只能經(jīng)過其他路由辦法翻開哦。
2）navigateTo是跳到某個(gè)非tab頁，比方歡迎頁，電影詳情頁，城市選擇頁；在app.json中注冊(cè)后，不能在tabBar里注冊(cè)哦，否則相同也是不能跳轉(zhuǎn)的哦。
3）reLaunch跳轉(zhuǎn)，新開的頁面左上角是沒有退回按鈕的，本項(xiàng)目只用了一次，切換城市的時(shí)分哦。
（5）頁面之間傳遞參數(shù)
參數(shù)寫在跳轉(zhuǎn)的url之中，然后另一個(gè)頁面在辦法中的傳參option接收到。如下傳遞和獲取id
（6）data-開頭的自界說特點(diǎn)的運(yùn)用
比方wxml中咱們?cè)鯓訉?br/>點(diǎn)擊的事情對(duì)象能夠這么取，var postId = event.currentTarget.dataset.postid;
留意： 大寫會(huì)轉(zhuǎn)換成小寫，帶_符號(hào)會(huì)轉(zhuǎn)成駝峰方式
（7）事情對(duì)象event，event.target和event.currentTarget的差異：
target指的是當(dāng)時(shí)點(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）運(yùn)用免費(fèi)的網(wǎng)絡(luò)接口：
本項(xiàng)目中用到了 和風(fēng)氣候api，騰訊地圖api，百度地圖api，豆瓣電影api，聚合頭條新聞api等，詳細(xì)用法能夠看各自官網(wǎng)的接口文檔哦，很詳細(xì)的
留意：免費(fèi)接口是有拜訪限制的，所以假如用別人的組件用了這種接口的話，較好仍是自己注冊(cè)一個(gè)新的key替換上哦
附上一個(gè)免費(fèi)接口大全：
https://github.com/jokermonn/-Api
?。×硗膺€要留意，要把這些接口的域名裝備到小程序的合法域名中，否則也是拜訪不了的
（8）wxss有一個(gè)坑：無法讀取本地資源，比方背景圖片用本地就會(huì)報(bào)錯(cuò)哦。
把本地圖片弄成網(wǎng)絡(luò)圖片的幾種方式： 上傳到個(gè)人網(wǎng)站；QQ空間相冊(cè)等等也是能夠的哦
2.切換城市頁面：
（1）主頁運(yùn)用navigateTo跳轉(zhuǎn)到切換城市頁，由于主頁并沒有封閉，導(dǎo)致切換了城市返回來，氣候信息仍是舊的。
正確的處理邏輯如下：
1）運(yùn)用reLaunch跳轉(zhuǎn)到切換城市頁面，實(shí)質(zhì)是封閉一切頁面翻開新的頁面哦。
2）切換城市頁面，更新公共變量中城市信息為手動(dòng)切換的城區(qū)，再switchTab回到主頁，觸發(fā)主頁從頭加載。
3）主頁獲取城市信息的時(shí)分加一個(gè)判斷，大局沒有才取定點(diǎn)的，大局有（比方方才設(shè)置了）就用大局的哦。
（2）城市列表的翻滾和回到頂部
根據(jù)scroll-view組件的scroll-top特點(diǎn)，初始便是0，翻滾就會(huì)添加的；點(diǎn)擊回到頂部給它置為0即可回到頂部
3.氣候頁
（1）初始化頁面，氣候顯示的邏輯
首先調(diào)用小程序的wx.getLocation辦法取得當(dāng)時(shí)的經(jīng)緯度，然后調(diào)用騰訊地圖取得當(dāng)時(shí)的城市稱號(hào)和區(qū)縣稱號(hào)，并存到公共變量中，
再調(diào)用查詢氣候和空氣質(zhì)量的辦法哦。
（2）容錯(cuò)處理
城市的稱號(hào)長短不一，有點(diǎn)姓名特別長，比方巴彥淖爾市這種，需求動(dòng)態(tài)的獲取完好的城市稱號(hào)；
有些偏遠(yuǎn)的城市暫時(shí)沒有氣候信息，咱們需求對(duì)返回的成果進(jìn)行判斷，沒有信息的需求給用戶一個(gè)杰出的提示信息。
4.周邊-地圖服務(wù)頁面
（1）調(diào)用百度地圖的各種服務(wù)，查詢酒店，美食，生活服務(wù)三種信息，更多信息能夠看百度地圖的文檔
（2）點(diǎn)擊時(shí)給被點(diǎn)中的圖標(biāo)加個(gè)邊框，數(shù)據(jù)驅(qū)動(dòng)視圖，所以運(yùn)用一個(gè)長度為3的數(shù)組保存三個(gè)圖標(biāo)當(dāng)時(shí)是否被點(diǎn)中的狀況
然后wxml再根據(jù)數(shù)據(jù)來動(dòng)態(tài)添加class，添加邊框款式
5.豆瓣電影頁
（1）電影詳情頁的預(yù)覽圖片，用小程序本身的previewImage完成。
（2）詳情頁運(yùn)用onReachBottom()辦法，監(jiān)控用戶上拉觸底事情，然后發(fā)送懇求持續(xù)取得數(shù)據(jù)，完成懶加載的效果
（3）用戶體驗(yàn)方面的優(yōu)化，js中將整數(shù)評(píng)分比方7分一致改為7.0分，然后wxml模板再判斷分?jǐn)?shù)是否為0顯示“暫無評(píng)分”
（4）搜索之后清空搜索框
因?yàn)樾〕绦蛑胁荒苓\(yùn)用getelementbyId這種方式取得元素，只能用數(shù)據(jù)來操控了
在data中加一個(gè)特點(diǎn)searchText來保存搜索框的內(nèi)容并和 input的value特點(diǎn)綁定，搜索完成或許點(diǎn)擊X時(shí)，searchText變量清空即可完成清空輸入框的效果哦。
6.新聞頁面
（1）聚合頭條新聞的免費(fèi)接口，只返回了新聞的基本信息，新聞的主體內(nèi)容是沒有的哦。
我找了好多新聞?lì)惖慕涌冢缤际菦]有新聞主體內(nèi)容的。假如誰知道更好的接口歡迎留言告訴我哈~
（2）當(dāng)然，也能夠自己去爬新聞網(wǎng)站的數(shù)據(jù)哦
7.更多頁面
（1）小程序目前開放外鏈的功用僅僅給公司安排的小程序開放了，個(gè)人開發(fā)仍是不能運(yùn)用外鏈的哦。
（2）彩蛋頁面，取得用戶信息
經(jīng)過 wx.setStorageSync('userInfos', userInfos); 能夠取得登陸小程序的用戶的個(gè)人信息，能夠發(fā)送給后臺(tái)存到數(shù)據(jù)庫中，便利對(duì)用戶進(jìn)行分析
我這里僅僅存儲(chǔ)到瀏覽器緩存中哦，較大應(yīng)該是10M緩存；假如用戶把這個(gè)小程序從小程序列表中刪除去，就會(huì)清空這個(gè)緩存。
8.發(fā)布留意
（1） 新版本小程序發(fā)布的限制為2M，一般都是圖片占空間，所以盡量運(yùn)用網(wǎng)絡(luò)圖片
詳細(xì)怎樣把本地圖片變成網(wǎng)絡(luò)圖片，上面有講哦。
（2）在開發(fā)者東西上預(yù)覽測(cè)驗(yàn)沒問題，點(diǎn)擊上傳；網(wǎng)頁版小程序個(gè)的人中心的左邊“開發(fā)辦理”菜單，第三塊--開發(fā)版本就有了內(nèi)容。
（3）點(diǎn)擊提交，填寫小程序相關(guān)信息，就能夠提交審閱了哦。
留意：分類較好填寫精確，這樣才干更快的經(jīng)過審閱哦。我這個(gè)小程序一天半時(shí)間過審上線的。