微信小程式從入坑到入門

從啥也不會，到寫前端 -> 釋出小程式 -> 呼叫後端介面 -> 寫後端 -> 資料庫 -> 騰訊雲服務搭建  -> 未完待續

一、已有的基礎

19年3月寫過小程式《英語四六級算分器》，就一個頁面，百度下注冊微信小程式，然後百度下前端的按鈕啊，佈局啊啥的，就上線了第一版。圖1和圖2（計算器頁面），非常簡單好入門

上線後日最高訪問量幾百，特別是考四六級那幾天....平時用的人倒是很少。已經到了可以放廣告的許可權，但是為了使用者體驗，也沒放，畢竟沒投錢買伺服器也不想鬧大家眼睛。今年疫情期間就想優化，於是就有了圖3這個頁面。可是問題來了，聽力資源從哪來呢？一開始從網上找聽力，截請求，獲取音訊地址，然後在小程式中引用，後面發現，不太現實：第一是利用人家資源總歸是有風險的，第二是壓根沒有特別全的音訊，有的還是錯的。。

解決：為了解決這個問題，於是我開了個公眾號（雖然並沒有使用者gg..）從某魚上幾塊錢買了完整的音訊和試題原文文件，然後整理了幾天，變成文章+音訊，這樣就相當於就把資源傳到微信的伺服器上了。將自己寫的微信公眾號文章用瀏覽器開啟、截請求、放小程式，，於是就有了現在的圖三（聽力頁面）這個頁面

二、進階優化

1、ajax入門學習：今年又想在小程式上加個翻譯，於是就想這該怎麼加呢？瞭解了下才發現，原來人家百度、谷歌、有道啥的都會給提供免費介面，也就是人家有伺服器，對外開放功能，你呼叫就完了。那麼問題又來了，我只會按鈕啥的簡單的前端，呼叫要怎麼搞？為了能在小程式上呼叫，首先要學會簡單的網頁呼叫：即ajax,然後就看別人的程式碼，編寫了百度翻譯的功能（就幾個檔案，無需大的工程），具體詳見：https://blog.csdn.net/gao_xiao_qi/article/details/104606805 寫完了直接理解ajax請求了，其實也沒想象的那麼複雜：直接請求url，返回成功就會到success方法裡，簡單描述就是這樣，不要想那麼高深，用用就知道！

2、後面發現，只能簡單的詞句翻譯，擴充知識要企業申請才能用，然後就不想放小程式了，就暫時不優化好了。但是學了ajax，就想做個二手平臺釋出下，但是我只會一點點前端基礎，做二手釋出還要學習後端

三、django後端搭建

1、建立工程：java啥的，工程比較大，而且各種類和呼叫不好入手，就拿python開刀，比較流行的就是django了，按照教程搭建，當然也遇到各種坑，比如第三方外掛安不上、修改了配置無法回退又重新建N次工程、建立了mysql模型沒搞懂又放棄、有的不支援又中途換python版本...

2、介面建成：diango搭建好了之後，要寫後端介面了，介面直接用在url.py中對外開放，呼叫其他的views.py實現，最後終於實現了自己的第一個介面，訪問url就可以列印後端返回的json資料。期間也是各種坑：返回亂碼、資料格式不對、url正則問題無法匹配...

3、資料庫：直接給資料也不行啊，總要動態從資料庫讀取，於是本地搭建mysql，期間有次mysql找回密碼各種找不回，網上的教程總是有sql錯誤，就這問題還搞了一個下午...最後還是求助公司後端開發給解決了。後面就省心了，無非就是：建資料庫、建表、設計欄位，主鍵varchar int str啥的走起來。

4、讀取資料庫：django開發程式碼動態讀取資料庫，讀完了介面返回，於是後端基本的功能就有了：

四、前後端聯調

1、跨域：前端訪問後端，有跨域問題，以前只停留在概念，現在終於知道啥是跨域了，請教了公司的前端工程師，發現也無計可施，網上說的各種配置url的get請求引數也不行。然後就從後端入手（前後端分離搭建也是很有好處的，起碼前端不通走後端hhh），後端允許跨域，前端才又不報錯

五、一步步搭建微信小程式二手商城

1、前後端、資料庫都有了，剩下就是細節堆程式碼了，一個功能一個功能的實現吧。資料庫要涉及：使用者、商品，建資料庫後面發現要更改，要用alter

2、列表頁：畫前端頁面，把後端資料搞過來，涉及的知識：不同的地方獲取不通資源，如：頭像獲取head資源，商品描述獲取mysql資源等、獲取圖片（根據使用者id和上商品id拼接url訪問伺服器資源）、ajax的get和post請求、箭頭函式success:res=>（為了避免this獲取不到）、圖片位載入不夠（比如有些使用者只上傳了一張圖片，這樣顯示就只有1張）、又是跨域問題（小程式架構不允許，是真的嚴格，期間朋到奇葩的問題，就是在公司就能前後端通，在家的網就報請求不允許，應該還是ip的原因。後面看網上說勾選不校驗就好了，設定後果然好了，設定如圖）

但這隻能治標不治本，上線還是不允許的，只能本地調調。

3、個人頁：頁面其實很簡單，檢測是否登入、沒登入時點選登入就載入登入資訊更新頭像和暱稱。但是，問題來了，不同使用者登入時，要怎麼區分？

學了半天才搞懂：原來人家微信是有一個openid來唯一標識每個使用者的，但是這個openid不會輕易給你：先申請secret，然後人家騰訊會記錄你的secret還有appid(appid在申請小程式的時候就有的)，要把這個secret、appid、本次登入的code，這三個拼接成人家騰訊規範的url，然後請求介面，人家才會返回回來唯一的使用者openid，有了這個opid就好辦了，存到資料庫裡用來唯一標識當前使用者

4、買伺服器：微信小程式是有體驗員的，就是釋出開發版，可以讓體驗員看到，也為了方便測試，就得釋出開發版，但是發現連真機除錯都不同（不用想也知道是因為手機連外網，訪問不了本地伺服器資源）請求的資源都是獲取不到的。無奈，買了個百度的域名，然後各種配置nginx，以為這樣就可以大功告成。搞了半天才發現，還差得遠，因為人家外網怎麼找到你本機ip啊？，人家nginx只能本地反向代理你本地上下文部署不同伺服器，所以要讓網際網路找到你得的伺服器還得來個公網ip，但是自己電腦也不現實：佔用記憶體不說，可能還要面臨在公司外網穿內網的問題，這是萬萬不可的。沒招，買伺服器吧。。

選了半天買了騰訊雲，一開始無知差點買了windows版的，想著跟我本地電腦一致還能方便部署，還好及時剎車買了ubuntu的（比centos要好入手一些的），接下來就是各種裝（很多其實不用裝的，ubuntu自帶mysql和python，反正版本不對就自己重灌），於是終於能啟動了：

期間想用navicat遠端連線騰訊雲上的mysql，然後就可以本地繼續操作了，網上說要改伺服器上mysql下的配置，然後就各種改，啥方法都試了就是沒許可權，各種chmod attr都不管用，我逐漸意識到，，可能人家伺服器或者ubuntu預設裝的就是改不了的，於是暫時放棄，命令列建表導資料

5、域名與伺服器繫結：域名從百度雲上買，伺服器從騰訊雲上買，於是總感覺哪裡會銜接不上。根據教程：https://www.cnblogs.com/yspace/p/10050452.html的步驟，在百度雲上進行解析域名，並對映到騰訊與服務的公網ip:

然後ping不通，原因是沒實名或者解析完等待時間不夠。然後實名完過了幾個小時就能ping通了（2020/04/02)

7、換域名：百度雲申請域名還是有問題的，因為只申請域名好像不能備案（每次備案都提示沒有可用的服務），無奈十幾塊錢又在騰訊雲買了個，這下子根正苗紅了。。買完以後，配置上了還是ping不通的（網上很多說等10分鐘），其實是沒用的，現在域名好像都是必須要實名才能ping通（起碼我百度和騰訊都是實名完才通過）。

實名完後還有下一步：要https請求才能配置到微信平臺，也就是要申請證照，而且要備案：（2020/04/09）

好吧，目前還在稽核，騰訊要稽核24小時，然後管局備案就不一定了：

8、登入優化：詳見：https://blog.csdn.net/gao_xiao_qi/article/details/105441855.

為了除錯加密，需要安裝pip install crypto這個包，百度了下，安裝這個包也會報錯，所以要換成pycryptodome才行

接下來就是報錯：小的demo直接解析成功，在django就會報錯，於是解除安裝、重灌，還是報錯。後面發現還是python版本問題，安裝的地方不對（即使在同一個工程下），兩個版本全部安裝完，還是報錯，最後，雞眼全刪了，只安裝了當前django使用的python3and32bit版本的，然後莫名其妙的好了。原因應該是兩者衝突了，或者說，demo雖然在django工程裡，但預設載入了另一個版本的python，所以才誤導了方向。（2020/4/10）

接下來就是域名稽核：騰訊域名客服描述，個人申請域名不能起類似“xxx平臺”之類的名字，否則會被封掉（當然企業可以，但經營範圍也要在內或者相關）。而且要求重新上傳各種證件，再給管局備案

9、地圖

微信小程式當然是接入騰訊地圖最方便，參考官網：http://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch，後面發現要加的東西比較多，最終找到位大神的部落格：https://blog.csdn.net/yu17310133443/article/details/88991021稍加改造後就能用了（2020/5/3）

 

10、首頁下拉選單選擇：

一開始是用微信自帶是的picker地圖：https://developers.weixin.qq.com/miniprogram/dev/component/map.html但是太low了，而且百度了一番發現根本沒辦法觸發它的picker直接彈出來越過點選區域（因為這個區域是寫在picker裡面而不是外面），就算搞出來也不靈活不好看，於是搞了半天終於放棄（2020/5/3）

後來參考https://www.jianshu.com/p/d0b067e68c8e，下載原始碼後，本來想白嫖過來，不動腦子的那種，後面發現沒辦法滿足需要，因為我的“地區”想要三列而原始碼只有兩列，差不多改了半天，一開始覺得好難不想改，但是改下來發現，他的程式碼也讀懂了，我也可以實現我的功能了，也get到了新知識

他其實是做成了一個元件，然後index裡引用這個元件，寫的挺好的。我把原始碼都改了一通：如果二級目錄下沒有三級目錄，則直接返回且關閉下拉；如果有三級目錄則開啟三級，選擇了三級後返回給選單頭部。（2020/5/5）

下面要做的事就是把地圖的區域放到裡面

10、釋出頁：涉及到知識點：表單提交、使用者資訊傳值、資料庫插入

未完待續。。

 

 

六、心得：

1、羅馬不是一日建成的，一下子做個大功能對於小白來說不太現實也容易中途放棄，所以先做個簡單的，上線或者用起來，有了信心，後面再加想法不遲

2、疑難問題每天都有，解決不了等一等再說，也許第二天就突發靈感，有新的方法就能解決了呢

3、優化方向：python直接運算元據庫是各種不方便不好維護，逐漸意識到django的“模型”是個出路，後面要優化

4、java的增刪改查應該也不是很難，應該部署springboot就足夠了，後面改造再優化吧

5、這種入門級別在專業程式設計師面前就是小兒科，但是對於一個小白來說，從無到有的過程是很值得紀念的，hhhh