爲微信開發填坑：微信網頁支付的開發流程及填坑技巧

GitChat 做者：極筆北客
原文：爲微信開發填坑：微信網頁支付的開發流程及填坑技巧
關注微信公衆號：「GitChat 技術雜談」 一本正經的講技術

【不要錯過文末彩蛋】

小程序做爲微信之父張小龍欽點，並屢次公開爲之宣傳造勢的產品，在微信以後是僅有的一次。正由於這種特殊的優待，在小程序上線後，聽說內測資格一度從100w被炒到300w，先不管是真是假，單是張小龍團隊和市場對小程序的期待，就足以引發咱們的重視，作爲一個開發人員，也很是有必要學習和了解小程序的開發原理及流程。若是你已經準備要作小程序開發，那麼這篇文章就來的很及時。若是你的業務還不須要涉足小程序，你也能夠經過本文對小程序的開發作一個基本的瞭解，以備不時之需。

本文會從小程序前端開發，小程序服務端開發及小程序的發佈與審覈三個方面來闡述小程序的開發流程。

###1、小程序前端介紹及開發

小程序的開發涉及到前端開發和後端開發，前端指的是在手機上能看到的部分，主要負責頁面的佈局排版及展現，後端提供數據和業務處理能力，指的是咱們寫給前端調用的API接口。

####註冊帳號

小程序的註冊比較簡單，首先，登陸微信公衆號平臺：mp.weixin.qq.com ，點擊右上角「當即註冊」按鈕。

enter image description here

選擇小程序

enter image description here

註冊小程序

enter image description here

在註冊小程序時，這裏輸入的郵箱，必定要是未在騰訊平臺未使用過的郵箱，不然會提示郵箱已經被使用。注意這裏說的騰訊平臺，好比你用來註冊微信公衆號的郵箱、用來註冊企鵝號的郵箱，都是不能用的。

註冊成功以後，須要進入郵箱激活。激活後，按照要求，選擇申請類型，進行註冊開通。

####建立工程

爲了支持小程序的開發， 微信官方研發了一個叫作微信開發者工具的東西，這個工具最初是爲了協助微信公衆號開發者作開發時用的，當微信小程序上線之後，微信開發者工具同步更新，也支持了小程序的開發。因爲小程序中的頁面及部分語法，徹底是微信本身封裝好的，同時小程序的編譯發佈，都只能在微信開發者工具中完成，因此，微信開發者工具成爲了大部分小程序開發者使用的開發工具。跟其餘開發工具相比，微信開發者工具的易用性仍是比較差，因此，一部分人用其餘的開發工具作開發，只用微信開發者工具編譯和發佈，雖然比較麻煩，可是效率提升很多，比價推薦的工具是國產的EgretWing。

微信開發者工具下載地址：

mp.weixin.qq.com/debug/wxado…

點擊藍色字體「開發者工具」便可。

enter image description here

安裝完微信開發者工具，第一次打開，會提示讓掃描二維碼，這只是一個開發受權，只要微信在小程序後臺被綁定爲開發者的微信，掃描均可以。掃描完成後登陸開發工具。

登陸成功以後，進入項目列表頁面，若是以前打開太小程序，則會以列表顯示。

enter image description here

點擊「添加項目」，進入建立小程序頁面。

enter image description here

這裏的APPID，是小程序開發權限的認證，若是不填，選擇「無APPID」也能夠進行開發，可是沒法正常發佈小程序。APPID在小程序後臺能夠拿到，如圖：

enter image description here

小程序的項目名稱，能夠根據本身的實際項目填寫，支持中英文。

項目目錄，是指開發目錄，選擇指向到要開發的小程序目錄便可。點擊肯定，一個新的小程序項目就建立成功。

enter image description here

enter image description here

####工程結構

新建的小程序項目如圖：

enter image description here

上圖中，區塊1是菜單欄，關於小程序的操做菜單都在這裏。

編輯：也是默認模式，在此模式下，能夠對小程序源碼進行編輯；

編譯：在此模式下，能夠編譯調試小程序，小程序的日誌輸出會在日誌區域打印出來；

項目：在此模式下，能夠對已經開發完成的或者能夠提測的小程序進行打包發佈。

區塊2是預覽區域，小程序的頁面展現，頁面間的交互，都在這裏，這塊的小程序跟發佈出去在手機上點開的小程序顯示是徹底同樣的。

區塊3是工程代碼結構，展現出項目中全部的文件及文件間的關係。

區塊4是代碼區域，開發主要在這個區域進行編碼。

每個微信小程序，都會有三個公共入口文件：

app.json：配置文件，配置路由列表、程序信息等。

app.js：公共入口文件，小程序啓動時的 Init 邏輯。

app.wxss ：公共樣式文件，公共樣式用於每一個視圖 View 中。

同時，也會有pages這個文件夾，文件夾內就是全部的前端頁面文件。

####主要文件

小程序前端的文件有四類，js、json、wxml、wxss。

js：主要負責調用後端接口作數據交互，頁面邏輯處理；

json：主要用來存儲數據內容，通常用的較少；

wxml：至關於html，主要用來展現頁面信息；

wxss：至關於css，跟css語法基本一致；

如圖：

enter image description here

在小程序中，每個頁面須要建立一個文件夾，如上圖中的list，該文件夾下須要建立以上四個文件，須要注意的是，這四個文件的文件名要和文件夾保持一致。

####經常使用方法

微信小程序自己並無創造出新的編程語言，其本質仍是h五、css、js，是最基礎的前端技術。因此，小程序的技術門檻較低，不少小程序都是一週時間開發並上線的。

可是微信對以上三種前端技術都作了必定的封裝，用wxml來代替h5，其中的標籤作了大量封裝，如圖：

enter image description here

同時，把css封裝爲wxss，這個幾乎沒什麼變化。

再說js，封裝了不少微信內部的js，在小程序中，這些被封裝的js方法叫作組件。比較經常使用的有這些：

wx.request：用來作網絡請求，小程序前端跟後端API交互，就用的是這個組件；

wx.navigateTo：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack能夠返回到原頁面；

wx.pageScrollTo：將頁面滾動到目標位置；

wx.setNavigationBarTitle：動態設置當前頁面的標題。

全部的組件能夠在這裏查看文檔：

mp.weixin.qq.com/debug/wxado…

###2、小程序服務端介紹及開發

小程序前段負責內容的展現，若是咱們開發的是純靜態頁面，那麼只須要掌握上面的就能夠。可是，若是咱們要作動態頁面，也就是頁面內容是跟數據庫交互的，就須要服務端來提供數據的交互。在小程序中，服務端是以接口的方式實現的，結果以json數據格式返回。

####服務接口介紹

服務端的接口開發跟通常的接口是同樣的，能夠用任何一種後端開發語言來實現，接口開發完成後，小程序前段經過組件wx.request調用接口，來實現跟服務端的交互，如圖：

enter image description here

看到這個方法你們應該很眼熟，對，實際上wx.request就是jquery中的ajax，使用方法徹底同樣。在這個接口調用中，小程序前端調用後端接口，獲取到了新聞列表，而後將結果集賦值給list的變量。

在小程序對應的前端頁面news.wxml中，將list進行遍歷展現，如圖：

enter image description here

這樣，咱們就完成了一個小程序中的列表頁面。其餘的服務端交互都是相似的，小程序的開發工做，到這裏其實已經結束，下面都是相關的配置。

####安全證書的申請

前面說到，在小程序中服務端接口的開發跟通常的接口是同樣的，通常的接口大部分都採用的http協議，可是，小程序要求必須是https安全協議，不然接口調用會失敗，這是強制的。因此，咱們的服務端必須安裝安全證書，採用https協議對外發布接口。

網絡上提供安全證書的服務商不少， 好比賽門鐵克，有收費何免費的證書。若是是企業應用，建議去買一個企業級的安全證書，若是隻是我的開發研究的話，這裏給你們介紹一個比較靠譜的免費安全證書——阿里雲。阿里雲給我的用戶提供不限時長的免費證書，注意必定是我的用戶，企業用戶是沒有這個福利的。首先，以我的用戶帳戶登錄阿里雲，找到「CA證書服務」，如圖：

enter image description here

進入證書服務頁面後，點擊「當即購買」，如圖：

enter image description here

選擇免費證書，當即購買：

enter image description here

在控制檯中，找到「證書服務」，按照要求填寫信息就能生成綁定指定域名的證書。

enter image description here

證書生成後，能夠下載，在下載的證書文件中，有詳細的說明文檔，告訴你在不一樣的環境中如何快速安裝配置安全證書，這裏就不贅述。

###3、小程序的發佈與審覈

####提交與發佈

小程序開發完成以後，就能夠在微信開發者工具中進行提交，如圖：

enter image description here

在項目模式下，點擊上傳，便可完成小程序代碼的上傳，上傳完成後，須要登錄到小程序管理後臺，須要設置相關項，如圖：

enter image description here

首先，設置合法域名，也就是服務端接口的域名地址，這裏注意不要填錯。

其次，填寫小程序基礎信息：

enter image description here

這裏須要注意的是服務類目的選擇，必定要選擇跟本身小程序對應的類目，一點類目選擇不匹配，會審覈不經過，再次提交再次審覈，就須要3到5個工做日，不少人在這個地方一耗就是一個多月。

只要基礎信息審覈經過，就能夠進性小程序發佈審覈，如圖：

enter image description here

小程序發佈審覈經過後，就能夠在微信中搜索到已經發布的小程序，至此，小程序的開發流程完成。

###4、總結

小程序的開發從開發技能上講，徹底是前端開發，不涉及任何新的技能，基本上也沒有什麼開發難度，只要是掌握h五、css、js的開發人員，均可以勝任。比較麻煩的是小程序開發流程及開發完成後的各類資質的審覈，微信官方的文檔講的不清楚，不少時候不知道本身的小程序屬於那種類目，就得去試，錯一次多的話會浪費一週，因此，這篇文章沒有詳細講解小程序的開發部分，相關文章網上不少，而是着重講解了小程序的開發流程及審覈發佈，但願能幫到正在或將要作小程序開發的朋友，有問題能夠關注微信公衆號「極筆北客」或微博「極筆北客」。

實錄：《王冬強：小程序快速上手開發實戰解析》

---

彩蛋

重磅 Chat 分享：

《高效學習，快速變現：不走彎路的五大學習策略》

分享人：
一名會在 B 站直播寫代碼，會玩雜耍球、彈 Ukulele、極限健身、跑步、寫段子、畫畫、翻譯、寫做、演講、培訓的程序員。喜歡用編程實現本身的想法，在 Android 市場上賺過錢，有屢次創業經歷。擅長學習，習慣養成，時間管理。身體力行地影響他人作出積極的改變！目前就任於 ThoughtWorks，致力於傳播快樂高效的編程理念。業餘創立軟件匠藝社區 CodingStyle.cn，組織超過30場技術活動。

Chat簡介：
說到學習呀，真是頭大喲：碎片化，沒有較長的連續時間來學習難專一，捧起書，手機卻在召喚：來呀，快活呀~ 反正有，大把時光~作不到，看了不少書，生活中卻作不到然並卵，學了方法和工具，找不到使用場景效率低，學習速度跟不上知識產生的速度記不牢，學習速度趕不上遺忘速度在這個知識氾濫、跨界競爭的年代，學習能力纔是核心競爭力。你想一想，過去一週，有沒有哪一件工做是不須要學習就能完成的？儘管如此重要，大部分人卻沒研究過學習這件事，覺得上下班路上打開「獲得」聽本書，就是碎片時間終身學習者了。

我是程序員，諮詢師，培訓師，這幾個角色都要求我必須學得又快又好。本場 Chat 將分析學習的「趨勢，原則，策略」，幫你站在更高的視角看待學習，從「內容，動機，交互，收益，資源」五方面制定策略，解決學習痛點，助你成爲高效學習者！