9.1 前后端交互

---

首先 我們 要 在 安裝了 node.js 的環境下 安裝 nodemon 這個插件。

npm install -g nodemon

2. 修改 npm 和 npm.cmd 兩個 文件的 內部 內容。

prefix -g 修改為 prefix --location=global 即可。

執行下面的 cmd 指令

npm install -g color-name --unsafe-perm=true

來到 我們的 node.js 服務器的項目文件夾，直接 npm start 運行。

npm start

---

9.2 banner 輪播圖數據的獲取

wx.request(對象)

這個對象有特別多的屬性，詳細的可以 去看 官方文檔。

gttp:localhost:3000/banner

onLoad(options) {wx.request({url: 'http://localhost:3000/banner',data:{type:2},success: (res) =>{console.log('請求成功',res);},fail: (res) => {console.log('請求失敗',res);}});},

它會告訴我們 你這 url 不符合 規范呀。就會報錯。

注意點：

• 協議必須是 https 協議
• 一個接口 最多 只能配置 20個 域名
• 并發限制上限要求 只能是 十個。

但是 如果在 開發過程中，我們是可以 不用 特別遵循 這些 規范的，但是 如果要是 發布的話。就必須要 遵循了！！

直接 在 詳情里面，選擇上 不校驗 https 就行了。

你看 這樣的話， 就請求 成功了。

data: {banners:{}},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {wx.request({url: 'http://localhost:3000/banner',data:{type:2},success: (res) =>{console.log('請求成功',res);this.setData({banners:res.data.banners});console.log(this.data.banners);},fail: (res) => {console.log('請求失敗',res);}});}, <!-- 輪播圖區域--><swiper class="index-swiper" indicator-dots indicator-color='ivory' indicator-active-color='#d43c33' autoplay><swiper-item wx:for="{{banners}}" wx:for-item="banner"><image src="{{banner.pic}}"></image></swiper-item></swiper>

總結

以上是生活随笔為你收集整理的微信小程序 09 前后端交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。