小程序開發過程中遇到的(de)問題（小程序開發過程中遇到的(de)問題及對策）

今天給各位分享小程序開發過程中遇到的(de)問題的(de)知識，其中也會對小程序開發過程中遇到的(de)問題及對策進行(xíng)解釋，如(rú)果能碰巧解決你現在面臨的(de)問題，别忘了關注本站，現在開始吧(ba)！

本文目錄一(yī)覽：

• 1、小程序開發注意事項
• 2、小程序開發經驗總結
• 3、微信小程序開發中遇到的(de)坑及解決辦法
• 4、開發微信小程序需要注意些什麽問題

小程序開發注意事項

1. 開發小程序時，每個頁面一(yī)定要在app.json文件中注冊，頁面文件夾和(hé)其包含的(de)四個文件的(de)名字要保持一(yī)緻。

2. 小程序發起的(de)都是HTTPS網絡請求，在開發調試的(de)過程中可(kě)以不校驗協議和(hé)TLS版本，但在實際上線後必須進行(xíng)HTTPS協議通信。

3. 小程序可(kě)以進行(xíng)組件化開發以及數據綁定，所有(yǒu)對于DOM的(de)操作都是基于數據驅動的(de)，并沒有(yǒu)直接進行(xíng)DOM操作的(de)做(zuò)法，換言之，小程序內(nèi)沒有(yǒu)document對象，原生js和(hé)jQuery裏的(de)DOM操作思維要舍棄掉。

4. 小程序的(de)網絡請求wx.request()是不自(zì)帶Cookies的(de)，這和(hé)浏覽器上的(de)網絡請求不同，因此基于Cookies實現的(de)會話管理(lǐ)不适用于小程序。

5. 小程序的(de)腳本文件中，內(nèi)置對象是page，而非傳統浏覽器裏的(de)window，因此所有(yǒu)基于window對象來寫的(de)庫(例如(rú)jQuery)都不适用于小程序。

6. 小程序提供模闆功能，模闆擁有(yǒu)自(zì)己的(de)作用域，它隻能使用從data屬性傳入的(de)數據。

7. 每一(yī)個頁面文件夾下的(de).json文件是用來寫配置項的(de)，如(rú)果該頁面無需添加相關配置，.json文件也要寫上一(yī)對大括号（“{ }”），否則會報錯。

8. 在同一(yī)個tab裏的(de)頁面可(kě)以跳轉，并且允許攜帶參數。不同tab的(de)頁面之間無法跳轉，使用wx.navigateTo()接口會報錯。同時，tab之間的(de)跳轉可(kě)以用wx.switchTab()實現，但是路徑後不能帶參數。

9. 腳本文件裏data的(de)數據，在更新的(de)時候要通過this.setData()方法來更新，而不能直接用“=”來做(zuò)。

10. 在組件标簽裏，可(kě)以通過“data-屬性值”的(de)方式綁定我(wǒ)們(men)需要的(de)數據，然後在事件內(nèi)置event對象裏進行(xíng)獲取。

11. 小程序裏也存在事件的(de)冒泡，具體的(de)冒泡事件可(kě)以參考官方文檔，如(rú)果希望事件向上冒泡，則使用bind來綁定事件，若希望阻止事件冒泡，就使用catch來進行(xíng)事件綁定。

12. 小程序支持文件引用，有(yǒu)import和(hé)include兩種方式，import有(yǒu)作用域，也就是引入的(de)目标文件裏import的(de)模闆不會被引入；而include等于是将目标文件除 以外的(de)整個代碼進行(xíng)引入。

13. wx.login()和(hé)wx.getUserInfo()是兩個獨立的(de)接口，前者可(kě)以實現用戶登錄，這個過程是悄無聲息的(de)，不需要用戶授權，登錄後可(kě)以拿到用戶的(de)openid和(hé)session_key；而wx.getUserInfo()可(kě)以拿到用戶的(de)具體信息，這個過程需要獲得用戶的(de)授權，開發時也必須考慮用戶拒絕授權的(de)場景。

14. 目前小程序可(kě)以分享給微信好友和(hé)微信群，但小程序默認是沒有(yǒu)這個功能的(de)，隻有(yǒu)在Page裏定義了onShareAppMessage事件處理(lǐ)函數，點擊小程序右上角才可(kě)以看到分享按鈕。

小程序開發經驗總結

最近一(yī)直在做(zuò)小程序，工作中也遇到了一(yī)些問題，踩了一(yī)些坑，所以想着寫篇文章(zhāng)記錄下來，并借此将小程序開發的(de)相關知識進行(xíng)梳理(lǐ)，方便以後參考，也為(wèi)剛剛接觸小程序的(de)人提供一(yī)些思路方法，互相學(xué)習，共同進步。

1、微信小程序的(de)目錄結構及配置說明

app.json是小程序的(de)全局配置文件，所有(yǒu)配置項key必須使用 雙引号括起來 ，value值為(wèi)字符串類型的(de)也必須使用雙引号， 不支持單引号 。

1.1 pages

pages選項是必須配置的(de)。該配置項注冊了小程序所有(yǒu)頁面的(de)地(dì)址，其中每一(yī)項都是頁面的(de) 路徑+文件名 。每一(yī)個頁面都是由.json、.js、.wxml、.wxss四個文件組成，并且 四個文件的(de)名字必須要一(yī)緻 。

1.2   tabBar

tabBar 配置項指定 tab 欄的(de)表現，以及 tab 切換時顯示的(de)對應頁面。其中 list 接受一(yī)個數組，隻能配置最少 2 個、最多 5 個 tab

1.3 usingComponents

使用自(zì)定義組件或者插件提供的(de)組件前，必須先在這裏聲明

2、開發微信小程序遇到的(de)問題及解決辦法

2.1 雙向綁定

微信小程序不支持通過v-model的(de)方式實現自(zì)動雙向綁定，需要給表單元素通過綁定事件，并使用this.setData來賦值實現。

2.2 computed和(hé)watch

微信小程序默認是不支持computed和(hé)watch的(de)，如(rú)需要使用這兩項功能，需要安裝miniprogram-computed ，安裝方法見 官方文檔

2.3 對象賦值

如(rú)果給對象的(de)屬性賦值，可(kě)以使用this.setData({'obj.key':value})來賦值，但是如(rú)果給某個屬性名是變量的(de)屬性賦值，通過這種方法是會報錯的(de)，經過多次嘗試，發現使用如(rú)下的(de)方式賦值成功。

let newObj = `obj.${key}`

this.setData({

[newObj]: value

})

2.4 scroll-view

當頁面存在彈框容器，并且彈框裏的(de)內(nèi)容是需要滾動條滾動展示時，如(rú)果彈框下面那層的(de)容器使用view元素的(de)話，會導緻滾動彈框內(nèi)容時，同時會觸發彈框下面那層的(de)頁面容器也會一(yī)起滾動，解決此問題可(kě)以将彈框下面的(de)容器使用scroll-view元素替代view元素

3、小程序測試和(hé)發布

由于服務器域名request合法域名每個月 隻能修改5次 ，因此在本地(dì)開發小程序時，需要在微信調試工具中設置不校驗合法域名。等小程序上線前再一(yī)次性将所有(yǒu)域名添加到小程序管理(lǐ)後台。

以上便是此次小程序開發中積累的(de)一(yī)些經驗，希望能給剛剛接觸小程序的(de)人提供一(yī)些思路方法，在以後的(de)開發中，如(rú)果遇到新的(de)問題，繼續更新文檔......

微信小程序開發中遇到的(de)坑及解決辦法

taro單獨為(wèi)某個項目切換taro版本環境

單獨為(wèi)某一(yī)個項目升級#這樣做(zuò)的(de)好處是全局的(de) Taro 版本還是 1.x 的(de)，多個項目間的(de)依賴不沖突，其餘項目依然可(kě)以用舊(jiù)版本開發。 如(rú)果你的(de)項目裏沒有(yǒu)安裝 Taro CLI，你需要先裝一(yī)個：

# 如(rú)果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如(rú)果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

echarts在小程序中滑動卡頓

由于微信小程序中，echarts的(de)層級最高(gāo)，無論設置多大層級也無法遮住echarts。而且小程序中好像隻能用echarts吧(ba)。所以為(wèi)了解決這個bug，我(wǒ)隻能委屈求全了。打開ec-canvas.wxml文件，将touchStart、touchMove和(hé)touchEnd去(qù)掉了，直接删除就好啦。這三個事件應該是做(zuò)縮放的(de)吧(ba)，我(wǒ)們(men)也沒有(yǒu)這個縮放的(de)需求。所以就去(qù)掉了。雖然暫時滿足的(de)需求，還是沒有(yǒu)真正的(de)解決問題。

原：

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

現：

bindinit="init"

echarts在小程序中無法跟随頁面滑動

在卡頓問題中能與echarts交互少的(de)，可(kě)以直接使用圖片代替cannvas，即在echarts渲染完畢後将它替換為(wèi)一(yī)張圖片。

如(rú)果我(wǒ)更新了數據，那麽就重新放出echarts，等它渲染完畢後，再次替換為(wèi)一(yī)張圖片。

chart.on('finished', () = {

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res = {

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

      })

},

    fail: res =console.log('轉換圖片失敗', res)

});

})

render:

this.state.echartImgSrc =='' ?

  ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={this.state.ec}

/

:

CoverImage src={this.state.echartImgSrc}/CoverImage

開發微信小程序需要注意些什麽問題

微信小程序開發有(yǒu)哪些注意事項：

1、注冊小程序

在開發小程序之前，首先就是要注冊一(yī)個小程序。不過注冊的(de)時候，也要根據需求來注冊，看是否需要開通微信支付，去(qù)确定需要選擇哪種主體去(qù)注冊。如(rú)果需要開通微信支付的(de)小程序，隻能用企業為(wèi)主體來注冊。反之，則企業、個人均可(kě)注冊。

2、分析讨論、需求對接

對開發需求進行(xíng)分析，整理(lǐ)成需求文檔，再與開發團隊就需求文檔進行(xíng)技術性讨論，優化調整開發需求，确定最終的(de)需求文檔，與開發團隊進行(xíng)對接。

3、原型設計、UI設計前後端技術開發

确定開發需求之後，開發團隊的(de)産品經理(lǐ)會根據客戶要求設計産品原型，而UI設計師同時會按需求文檔去(qù)進行(xíng)頁面交互設計，再将設計稿交給開發人員進行(xíng)技術開發。在功能需求确定、産品原型确定、設計稿經過确認之後，就可(kě)以進入正式系統定制開發階段，将所有(yǒu)資料交到前後端的(de)開發技術人員手中，讓他們(men)通過開發實現後台管理(lǐ)系統與前端效果呈現。

4、産品測試調優

在微信小程序系統基本開發完畢之後，就需要對産品進行(xíng)測試，查找是否系統運行(xíng)是否存在問題，對基本已經完成的(de)系統進行(xíng)整改調優。

5、審核發布

關于小程序開發過程中遇到的(de)問題和(hé)小程序開發過程中遇到的(de)問題及對策的(de)介紹到此就結束了，不知道(dào)你從中找到你需要的(de)信息了嗎 ？如(rú)果你還想了解更多這方面的(de)信息，記得收藏關注本站。