兩天快速開發一個本身的微信小程序

爲何要學小程序開發？開發要準備什麼？開發小程序難不難？！

大家要的前端、服務端、數據庫一整套的小程序+公衆號項目來了

附上幾張效果圖，代碼傳到碼雲了，喜歡的童鞋能夠star，打賞、點贊、扔硬幣、仍香蕉~

代碼地址：https://github.crmeb.net/u/demo

演示首頁、商品詳情頁

-----------------------------正文從這裏開始----------------------------

一．寫在前面

1.爲何要學小程序開發？

對於前端開發而言，微信小程序由於其簡單快速、開發成本低、用戶流量巨大等特色，也就成了前端開發工程師必會的一個技能。
2.開發準備：

（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/...

8）wxss有一個坑：沒法讀取本地資源，好比背景圖片用本地就會報錯。

把本地圖片弄成網絡圖片的幾種方式： 上傳到我的網站；QQ空間相冊等等也是能夠的。

2.切換城市頁面：

（1）首頁使用navigateTo跳轉到切換城市頁，因爲首頁並無關閉，致使切換了城市返回來，天氣信息仍是舊的。

正確的處理邏輯以下：

1）使用reLaunch跳轉到切換城市頁面，實質是關閉全部頁面打開新的頁面。

2）切換城市頁面，更新公共變量中城市信息爲手動切換的城區，再switchTab回到首頁，觸發首頁從新加載。

3）首頁獲取城市信息的時候加一個判斷，全局沒有才取定位的，全局有（好比剛纔設置了）就用全局的。

（2）城市列表的滾動和回到頂部

基於scroll-view組件的scroll-top屬性，初始就是0，滾動就會增長的；點擊回到頂部給它置爲0便可回到頂部

3.地圖服務頁面

（1）調用百度地圖的各類服務，查詢酒店，美食，生活服務三種信息，更多信息能夠看百度地圖的文檔

（2）點擊時給被點中的圖標加個邊框，數據驅動視圖，因此使用一個長度爲3的數組保存三個圖標當前是否被點中的狀態

而後wxml再根據數據來動態添加class，增長邊框樣式

4.更多頁面

（1）小程序目前開放外鏈的功能只是給公司組織的小程序開放了，我的開發仍是不能使用外鏈的。

（2）彩蛋頁面，得到用戶信息

經過 wx.setStorageSync(‘userInfos’, userInfos); 能夠得到登錄小程序的用戶的我的信息，能夠發送給後臺存到數據庫中，方便對用戶進行分析

我這裏只是存儲到瀏覽器緩存中，最大應該是10M緩存；若是用戶把這個小程序從小程序列表中刪除掉，就會清空這個緩存。

5.發佈注意

（1） 新版本小程序發佈的限制爲2M，通常都是圖片最佔空間，因此儘可能使用網絡圖片

具體怎麼把本地圖片變成網絡圖片，上面有講。

（2）在開發者工具上預覽測試沒問題，點擊上傳；網頁版小程序個的人中心的左側「開發管理」菜單，第三塊–開發版本就有了內容。

（3）點擊提交，填寫小程序相關信息，就能夠提交審覈了。

注意：分類最好填寫準確，這樣才能更快的經過審覈。我這個小程序一天半時間過審上線的

至此，我就把兩天開發內碰到的坑和注意點都過了一遍，聽說還有更多的坑，等以後更深刻的開發再繼續研究咯。

-------------------------------------寫在最後----------------------------------------
**咱們開發的一套小程序+公衆號商城，現全開源無加密開放，只爲方便更多從事小程序開發的夥伴。

項目地址：https://github.crmeb.net/u/demo

小程序頁面展現

公衆號頁面展現

後臺頁面展現

喜歡的小夥伴記得點贊！**

項目地址：https://github.crmeb.net/u/demo**