微信小程序項目總結（一）

whatsns 發布于2019-08-20 15:09 / 1947人閱讀

摘要：前言微信小程序的開發，我應該算是趕上了第一波，所以，自然是一路踩坑而來。注以下標題是按照微信開發工具上的選項進行劃分的。不過，除此之外，它還會產生另外一個副作用，就是可能連小程序本身上的請求都請求不了了。

-- KChris 2017.3.16 (=^.^=)

前言
微信小程序的開發，我應該算是趕上了第一波，所以，自然是一路踩坑而來 =。=
一月九日，小程序正式上線，早早地就到公司開始改bugs~
前不久，我又對這個項目重構了一版~
現在來做個項目總結剛好，就給我踩過的那些坑留點紀念吧~

開發時,切忌將小程序簡單地想象成我們web開發中的css、js、html，否則···

微信小程序的開發，實際上是在微信封裝下對項目的二次開發了。很多很多的規則我們必須要去遵守，其中很明顯的就是標簽元素。很多標簽會讓我們很自然地和html中的標簽元素對應起來，建立這種對應關系確實能夠幫助我們更快地入手小程序，但是一定要記得不要把它們等同起來，謹記它們是有區別的。還有，開發之前，記得看看官網文檔上的Q&A，預熱下。

注：
1.以下標題是按照微信開發工具上的選項進行劃分的。
2.總結還在一步步地完善中，每天一點點~
3.歡迎留言指正錯誤，知識共享~

項目
1.開發環境不校驗請求域名以及TSL版本
小程序有嚴格的域名檢查規則，規定使用https。
所以，當你的開發環境是http時，記得將這個選項勾上，不然你是無法請求到接口數據的。

2.開啟ES6轉ES5
如果有用ES6語法的話，記得勾上。

編輯
編輯，也就是開發咯。

1.文件引用
在小程序中，它引入了模塊機制，我們可以在頁面中引入我們需要的模塊，但是，這種引入是單向的。比如：
a文件：

var b = require("../libs/b.js")

那我們在b文件中如果這樣：

var a = require("../libs/a.js")

開發者工具是會報錯的，目前我的解決方案也只是避免這種引用，直接將自己需要的部分放在同一個文件中。

2.圖片
1）通過background屬性引用圖片
沒錯，我們可以在開發工具上看到效果挺正常的，但是，打開手機測試，Ops，圖片不見了。
在官方文檔上有明確規定，本地資源是無法通過css獲取的。
所以，當你決定用background-image屬性的時候，你可以：
a=> 使用網絡圖片
b=> base64

2）通過image標簽src屬性引用圖片
這種方式的引用沒有資源來源方式的限制，可以引用本地資源。

調試
調試的時候最大的感悟是，無論是開發者工具上，還是手機上，記得先把緩存刪干凈再測。而且出現bugs的時候盡量多測幾次，進行反復確定。不然的話，你可能會發現，本來測好的功能又出現問題了，或者是本來有問題的部分又沒有問題了，所以，測吧測吧，多測幾次。

1.頁面加載，前端向后臺發送數據請求。
在開發階段，我們在進行對請求結果的業務處理時，自然是邊調試邊修改的，有時候我們會遇到：statusCode沒處理好而導致前端不斷向后臺發送請求，然后，卡機了。當然，在微信開發者工具上，也是。不過，除此之外，它還會產生另外一個副作用，就是可能連小程序本身API上的請求都請求不了了。發生這種情況的話，你就喝喝茶，做做眼保健操吧，給它點時間，它會好起來的。

2.代碼上傳報錯。
手機預覽小程序。在預覽之前，我們是需要在開發者工具上上傳代碼的，說說我遇到的報錯把：
1）明確提示我的代碼中哪一個文件有錯誤
這個比較好辦，就是直接找到對應文件，結合控制臺，改好之后再上傳代碼。
2）錯誤提示一個不知道什么原因的error
遇見這種情況，我的解決方案是：不用糾結，關掉我的開發者工具，打開，再上傳。貌似有點無厘頭，但是成功幾率很高，不信你可以試試。

其他
1.開發過程中，記得時刻關注官方文檔上的更新日志，保持自己的開發工具是最新的。這是避免跳坑的一大法寶，不過現在還好了，剛開始的時候是真坑~
2.學會在開發者社區上找答案，沒有答案就去提問，會有人回答你的。

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82034.html

Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0
微信小程序知識總結及案例集錦

摘要：對微信小程序進行全局配置，決定頁面文件的路徑窗口表現設置網絡超時時間設置多等。微信小程序知識總結及案例集錦微信小程序的發展會和微信公眾號一樣，在某個時間點爆發學習路徑微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達微信官方文檔認真跟著文檔看一遍，相信有vue前端經驗的看下應該就能上手了，然后安裝微信小程序開發者工具新建一個quick start項目，了解代碼結構，...

sean 2019-08-20 17:45 評論0 收藏0
前端資源系列（3）-微信小程序開發資源匯總

摘要：微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者...

paney129 2019-08-20 11:14 評論0 收藏0
微信小程序mpvue框架總結

摘要：原理架構作為與之間相互通信的橋梁部分在環境中注入的實現代碼，包含了協議的拼裝發送參數池回調池等一些基礎功能。部分在客戶端中的功能映射代碼，實現了攔截與解析環境信息的注入通用功能映射等功能。原理架構 JSBridge 作為native 與 JS 之間相互通信的橋梁JS部分(bridge): 在JS環境中注入 bridge 的實現代碼，包含了協議的拼裝/發送/參數池/回調池等一些基礎功能...

microelec 2019-08-23 18:32 評論0 收藏0