1、數(shù)據(jù)庫(kù)操作

??在Web環(huán)境中發(fā)起HTTPS請(qǐng)求是很常見的，但是微信小程序是騰訊內(nèi)部的產(chǎn)品，不能直接打開一個(gè)外部的鏈接。例如，在微信小程序中不能直接打開www.taobao.com網(wǎng)站，但是，在小程序開發(fā)的時(shí)候，如果需要請(qǐng)求一個(gè)網(wǎng)站的內(nèi)容或者服務(wù)，如何實(shí)現(xiàn)？雖然微信小程序里面不能直接訪問外部鏈接，但是騰訊為開發(fā)者封裝好了一個(gè)wx.request(object)的API。

1.1 wx.request()接口

??wx.request()是騰訊公司封裝好的一個(gè)request請(qǐng)求的函數(shù)，類似于其他程序語(yǔ)言的自帶函數(shù)，開發(fā)者只需把這些內(nèi)置函數(shù)復(fù)制過(guò)來(lái)使用即可，無(wú)需注意函數(shù)底層代碼實(shí)現(xiàn)部分。該接口的屬性如下所示。

??微信公眾平臺(tái)官方給出的wx.request()示例代碼如下：

wx.request({
  url: 'example.php', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

1.1.1 接口地址url

??微信小程序里面的數(shù)據(jù)由接口地址url獲取，它非常重要。其返回結(jié)果是JSON格式數(shù)據(jù)。因?yàn)镴SON格式數(shù)據(jù)不僅處理起來(lái)方便，而且傳輸安全穩(wěn)定，容易保存。所以，一般第三方服務(wù)商提供的接口返回的數(shù)據(jù)都是以JSON格式返回的。

??url是提供JSON格式數(shù)據(jù)的接口地址，一般是開發(fā)者專門開發(fā)的或第三方服務(wù)商提供的接口地址。例如快遞查詢和天氣預(yù)報(bào)等功能在網(wǎng)絡(luò)上都有相應(yīng)JSON接口的調(diào)用地址，其中一些接口是商業(yè)收費(fèi)的。

1.1.2 請(qǐng)求參數(shù)data

??當(dāng)小程序前端對(duì)url發(fā)起HTTPS請(qǐng)求時(shí)，實(shí)際上跟在瀏覽器打開一個(gè)網(wǎng)址是一個(gè)道理，在瀏覽器打開網(wǎng)址http://127.0.0.1:8080/mini/detail?id=5，實(shí)際上是向這個(gè)域名所在的服務(wù)器發(fā)送了一個(gè)HTTPS請(qǐng)求，在這個(gè)請(qǐng)求里面使用了參數(shù)id=5,這里的id=5是在請(qǐng)求url時(shí)需要傳遞過(guò)去的參數(shù)。

url:'http://127.0.0.1:8080/mini/detail',
data:{
	id:'5'
}

等價(jià)于

url:'http://127.0.0.1:8080/mini/detail?id=5'

1.1.3 請(qǐng)求方法和請(qǐng)求頭header

??wx.request()本質(zhì)上時(shí)HTTP請(qǐng)求，header是請(qǐng)求的消息頭，method是請(qǐng)求的方法。

示例代碼如下：

method:'GET',
header:{
	'content-type':'application/json'
}

method:'POST',
header:{
	'content-type':'application/x-www-form-urlencoded'
}

??method取值’GET’或者’POST’(還有PUT和DELETE等)。

??需要說(shuō)明的是，前端最終發(fā)送給服務(wù)器的數(shù)據(jù)是String類型，如果傳入的data不是String類型，會(huì)被轉(zhuǎn)換成String類型。轉(zhuǎn)換規(guī)則如下：

• 對(duì)于GET方法的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成query string。
• 對(duì)于POST方法且header['content-type']為application/json的數(shù)據(jù),會(huì)對(duì)數(shù)據(jù)進(jìn)行JSON序列化。
• 對(duì)于POST方法且header['content-type']為application/x-www-form-urlencoded的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成quert string。

1.1.4 success函數(shù)

??當(dāng)一個(gè)HTTPS請(qǐng)求成功時(shí)，小程序會(huì)自動(dòng)觸發(fā)這個(gè)返回成功信息的函數(shù)，這個(gè)函數(shù)是騰訊公司封裝好的函數(shù)，無(wú)須開發(fā)者自己編寫。開發(fā)者獲取的JSON數(shù)組在res.data中。

1.2 基于數(shù)據(jù)庫(kù)的新聞列表頁(yè)案例

• pages/list/list.wxml代碼如下：

  <view class="body">
  <!--文章列表模板 begin-->
  <template name="itmes">
    <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
      <view class="imgs"><image src="{{img}}" class="in-img" background-size="cover" model="scaleToFill"></image></view>
      <view class="infos">
        <view class="title">{{title}}</view>
        <view class="date">{{cTime}}</view>
      </view>
    </navigator>
  </template>
  <!--文章列表模板 end-->
  
  <!--循環(huán)輸出列表 begin-->
  <view wx:for="{{shuzu}}" class="list">
    <template is="itmes" data="{{...item}}" />
  </view>
  </view>
  

  pages/list/list.js

  Page({
    /** * 頁(yè)面的初始數(shù)據(jù)** */
    data: {
     id1:1,
      shuzu: []
    },
    /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*** */
    onLoad: function (options) {
      var that=this
      wx.request({
        url: 'http://127.0.0.1:8001/wenzhang/selectList', //僅為示例，并非真實(shí)的接口地址
        data: {
        },
        header: {
          'content-type': 'application/json' // 默認(rèn)值
        },
        success(res) {
          console.log(res)
          that.setData({
            shuzu:res.data
          })
        }
      })
  
    },
  
    dian:function(e)
    {
      var a= e.target.id
      console.log(a)
      wx.navigateTo({
        url:"/pages/detail/detail?id="+a,
      }) 
    },
  
    /*** 用戶點(diǎn)擊右上角分享*/
    onShareAppMessage: function () {  
    }
  })
  

  pages/list/list.wxss

  .body{
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 20rpx;
  }
  navigator { overflow: hidden;}
  .list {margin-bottom: 20rpx;height: 200rpx;position: relative;}
  .imgs {float: left;}
  .imgs image {display: block; width: 200rpx;height: 200rpx;}
  .infos {float: left; width: 480rpx; height: 200rpx;padding: 20rpx 0 0 20rpx;}
  .title {font-size: 20px;}
  .date {font-size: 16px;color: #aaa; position: absolute;bottom: 0;}
  .loadMore {text-align: center;margin: 30px;color: #aaa;font-size: 16px}
  page{
    background-color: #d1d3d4;
  }
  

程序運(yùn)行結(jié)果

1.3 項(xiàng)目后端結(jié)構(gòu)

后端SpringBoot搭建的，引入了mysql、mybatisplus、swagger、lombok等依賴。

數(shù)據(jù)庫(kù)表結(jié)構(gòu)：

主要的接口就兩個(gè)：

也可以在swagger中測(cè)試下：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-494091.html

到了這里，關(guān)于微信小程序操作數(shù)據(jù)庫(kù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！