~~~ 更新於2018年8月7日 ~~~
你們要的前端、服務端、數據庫一整套的小程序項目來了
熬夜新寫的小程序《 mpvue-xbyjShop 》
附上幾張效果圖，代碼傳到GitHub了，喜歡的童鞋可以star，打賞、點贊、扔硬幣、仍香蕉~
代碼地址：https://github.com/yllg/mpvue-xbyjShop
-- 首頁、商品詳情頁
-- 購物車、個人中心
~~~ 更新於2018年6月29日 ~~~
目前最喜歡的個人項目--《跨平台音樂播放器xbyjMusic 》
附上兩張效果圖，代碼傳到GitHub了，喜歡的童鞋可以star或者fork和我一起完善它~😜
代碼地址：https://github.com/yllg/xbyjMusic
--首頁
--歌曲頁
--------------------------------------------------正文從這里開始-----------------------------------------
一．寫在前面
1.為什么要學小程序開發？
對於前端開發而言，微信小程序因為其簡單快速、開發成本低、用戶流量巨大等特點，也就成了前端開發工程師必會的一個技能。
2.先放上我做的小程序
可以在微信小程序搜索“懸筆e絕”，或者用微信掃描下面的二維碼
（最近接小程序廣告了，喜歡本項目的話，可以點廣告支持我一下哈 ~ 謝謝 (*^▽^*) ）
（1）歡迎頁：這個logo是當年念大學給社團做的logo，苦學了整整一周的PS啊。。。
（2）首頁：輪播頭圖，天氣，豆瓣電影正在熱映
（3）全國城市切換頁
（4）天氣詳情頁
（5）地圖周邊服務
（6）豆瓣電影
（7）熱點新聞
（8）更多頁面
3.開發准備：
（1）有人開玩笑說，會vue小程序根本都不用學：
微信小程序雖然是騰訊自己搞的，但是核心的思想跟vue等框架是一樣一樣的~
（2）善於搜集精美的小組件： “我們不生產代碼，我們只是代碼的搬運工”，善於找到想要的組件並把他們巧妙優雅的組裝成一個大項目，也算是程序員一項基本技能了。
具體怎么找到想要的小程序demo，篇末會給大家推薦小程序的資源，有很多大神的項目
擼起袖子開干了
一.注冊小程序賬號，下載IDE
1.官網注冊https://mp.weixin.qq.com/，並下載IDE。
2.官方文檔一向都是最好的學習資料。
注意：
（1）注冊賬號之后會有一個appid，新建項目的時候需要填上，不然很多功能是用不了的，比如不能預覽，不能上傳代碼等等。
（2）如果你注冊過微信公眾號的話，一定要注意，微信公眾號和小程序是兩個賬號，二者的appid也是不同，小程序開發必須使用小程序的appid。
二.小程序框架介紹和運行機制
1.我們建立了“普通快速啟動模板”，然后整個項目目錄如下：
2.app.js
整個項目的啟動文件，如注釋寫的onlaunch方法有三大功能，瀏覽器緩存進行存和取數據；用登陸成功的回調；獲取用戶信息。
globalData是定義整個項目的全局變量或者常量。
3.app.json
整個項目的配置文件，比如注冊頁面，配置tab頁，設置整個項目的樣式，頁面標題等等；
！注意：小程序啟動默認的第一個頁面，就是app.json的pages中的第一個頁面。
4.pages
小程序的頁面組件，有幾個頁面就會有幾個子文件夾。比如快速啟動模板，就有兩個頁面，index和logs
5.打開index目錄
可以看到有三個文件，其實和我們web開發的文件是一一對應的。
index.wxml對應index.html；
index.wxss對應index.css；
index.js就是js文件。
一般我們還會給每個頁面組件添加一個.json文件，作為該頁面組件的配置文件，設置頁面標題等功能
6.雙擊index.js文件
（1）var app = getApp();
引入整個項目的app.js文件，用來取期中的公共變量等信息。
如果要使用util.js工具庫中的某個方法，在util.js中module.exports導出，然后在需要的頁面中require即可得到。
（2）比如，我們要獲取豆瓣電影的時候，我們需要調用豆瓣的api；我們先在app.js中的gloabData中定義doubanBase
然后在index.js中使用app.globaData.doubanBase即可取到這個值。
當然這些常量你也可以在頁面需要的時候，再用寫死的值，但是為了整個項目的維護，還是建議把這種公用參數統一寫在配置文件中。
（3）接下來在整個page({})中，第一個data，就是本頁面組件的內部數據，會渲染到該頁面的wxml文件中，類似於vue、react~
通過setData修改data數據，驅動頁面渲染
（4）一些生命周期函數
比如onload()， onready(), onshow(), onhide()等等，監聽頁面加載、頁面初次渲染、頁面顯示、頁面隱藏等等
更多的可以查官網API。其中用的最多的就是onload()方法，和onShareAppMessage()方法（設置頁面分享的信息）
7 .wxml模板的使用。
比如本項目電影頁面，就是以最小的星級評價組件wxml當做模板，star到movie到movie-list，一級一級的嵌套使用。
star-template.wxml頁面寫好name屬性；然后import引入的時候通過name獲得即可
8.常用的wxml標簽
view，text，icon，swiper，block，scroll-view等等，這些標簽直接查官網文檔即可
三.小程序框架、各個頁面以及發布上線的注意點
1.整個框架中的一些注意點
（1）整個wxml頁面，最底層的標簽是<page></page>。
（2） 每個頁面頂部導航欄的顏色，title在本頁面的json中配置，如果沒有配置的話，取app.json中的總配置。
（3）json中不能寫注釋，不然會報錯的。
（4）路由相關
1）使用wx.SwitchTab跳轉tab頁的話，在app.json中除了注冊pages頁面，還需要在tabBar中注冊tab頁，才能生效。
注意：tab最多5個，也就是我們說的頭部或者底部最多5個菜單。其他的頁面只能通過其他路由方法打開。
2）navigateTo是跳到某個非tab頁，比如歡迎頁，電影詳情頁，城市選擇頁；在app.json中注冊后，不能在tabBar里注冊，不然同樣也是不能跳轉的。
3）reLaunch跳轉，新開的頁面左上角是沒有退回按鈕的，本項目只用了一次，切換城市的時候。
（5）頁面之間傳遞參數
參數寫在跳轉的url之中，然后另一個頁面在onload方法中的傳參option接收到。如下傳遞和獲取id
（6）data-開頭的自定義屬性的使用
比如wxml中我們怎么寫 
點擊的事件對象可以這么取，var postId = event.currentTarget.dataset.postid;
注意： 大寫會轉換成小寫，帶_符號會轉成駝峰形式
（7）事件對象event，event.target和event.currentTarget的區別：
target指的是當前點擊的組件 和currentTarget 指的是事件捕獲的組件。
比如，輪播圖組件，點擊事件應該要綁定到swiper上，這樣才能監控任意一張圖片是否被點擊，
這時target這里指的是image（因為點擊的是圖片），而currentTarget指的是swiper（因為綁定點擊事件在swiper上）
（8）使用免費的網絡接口：
本項目中用到了 和風天氣api，騰訊地圖api，百度地圖api，豆瓣電影api，聚合頭條新聞api等，具體用法可以看各自官網的接口文檔，很詳細的
注意：免費接口是有訪問限制的，所以如果用別人的組件用了這種接口的話，最好還是自己注冊一個新的key替換上
附上一個免費接口大全：
https://github.com/jokermonn/-Api
！！另外還要注意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問不了的
（8）wxss有一個坑：無法讀取本地資源，比如背景圖片用本地就會報錯。
把本地圖片弄成網絡圖片的幾種方式： 上傳到個人網站；QQ空間相冊等等也是可以的
2.切換城市頁面：
（1）首頁使用navigateTo跳轉到切換城市頁，由於首頁並沒有關閉，導致切換了城市返回來，天氣信息還是舊的。
正確的處理邏輯如下：
1）使用reLaunch跳轉到切換城市頁面，實質是關閉所有頁面打開新的頁面。
2）切換城市頁面，更新公共變量中城市信息為手動切換的城區，再switchTab回到首頁，觸發首頁重新加載。
3）首頁獲取城市信息的時候加一個判斷，全局沒有才取定位的，全局有（比如剛才設置了）就用全局的。
（2）城市列表的滾動和回到頂部
基於scroll-view組件的scroll-top屬性，初始就是0，滾動就會增加的；點擊回到頂部給它置為0即可回到頂部
3.天氣頁
（1）初始化頁面，天氣顯示的邏輯
首先調用小程序的wx.getLocation方法獲得當前的經緯度，然后調用騰訊地圖獲得當前的城市名稱和區縣名稱，並存到公共變量中，
再調用查詢天氣和空氣質量的方法。
（2）容錯處理
城市的名稱長短不一，有點名字特別長，比如巴彥淖爾市這種，需要動態的獲取完整的城市名稱；
有些偏僻的城市暫時沒有天氣信息，我們需要對返回的結果進行判斷，沒有信息的需要給用戶一個良好的提示信息。
4.周邊-地圖服務頁面
（1）調用百度地圖的各種服務，查詢酒店，美食，生活服務三種信息，更多信息可以看百度地圖的文檔
（2）點擊時給被點中的圖標加個邊框，數據驅動視圖，所以使用一個長度為3的數組保存三個圖標當前是否被點中的狀態
然后wxml再根據數據來動態添加class，增加邊框樣式
5.豆瓣電影頁
（1）電影詳情頁的預覽圖片，用小程序本身的previewImage實現。
（2）詳情頁使用onReachBottom()方法，監控用戶上拉觸底事件，然后發送請求繼續獲得數據，實現懶加載的效果
（3）用戶體驗方面的優化，js中將整數評分比如7分統一改為7.0分，然后wxml模板再判斷分數是否為0顯示“暫無評分”
（4）搜索之后清空搜索框
因為小程序中不能使用getelementbyId這種方式獲得元素，只能用數據來控制了
在data中加一個屬性searchText來保存搜索框的內容並和 input的value屬性綁定，搜索完成或者點擊X時，searchText變量清空即可實現清空輸入框的效果。
6.新聞頁面
（1）聚合頭條新聞的免費接口，只返回了新聞的基本信息，新聞的主體內容是沒有的。
我找了好多新聞類的接口，好像都是沒有新聞主體內容的。如果誰知道更好的接口歡迎留言告訴我哈~
（2）當然，也可以自己去爬新聞網站的數據
7.更多頁面
（1）小程序目前開放外鏈的功能只是給公司組織的小程序開放了，個人開發還是不能使用外鏈的。
（2）彩蛋頁面，獲得用戶信息
通過 wx.setStorageSync('userInfos', userInfos); 可以獲得登陸小程序的用戶的個人信息，可以發送給后台存到數據庫中，方便對用戶進行分析
我這里只是存儲到瀏覽器緩存中，最大應該是10M緩存；如果用戶把這個小程序從小程序列表中刪除掉，就會清空這個緩存。
8.發布注意
（1） 新版本小程序發布的限制為2M，一般都是圖片最占空間，所以盡量使用網絡圖片
具體怎么把本地圖片變成網絡圖片，上面有講。
（2）在開發者工具上預覽測試沒問題，點擊上傳；網頁版小程序個的人中心的左側“開發管理”菜單，第三塊--開發版本就有了內容。
（3）點擊提交，填寫小程序相關信息，就可以提交審核了。
注意：分類最好填寫准確，這樣才能更快的通過審核。我這個小程序一天半時間過審上線的
至此，我就把兩天開發內碰到的坑和注意點都過了一遍，據說還有更多的坑，等之后更深入的開發再繼續研究咯。
四.寫在最后
1.推薦幾個小程序開發的資料
（1）知乎一篇小程序的資料：
https://www.zhihu.com/question/50907897
（2）小程序社區
http://www.wxapp-union.com/portal.php
（3）極樂小程序商店
http://store.dreawer.com/
2.我的個人微信公眾號--懸筆e絕，歡迎關注哈~
3.本項目的github地址，喜歡的童鞋點個star哈~
4.我的個人博客網站： 之后原創文章都會寫在這里，然后不定期加一些酷炫的效果上去，嘿嘿嘿
！轉載請注明出處！😝