WeChat開発におけるデータアクセス方法の詳細な説明-WeChatの開発-php.cn

WeChat開発におけるデータアクセス方法の詳細な説明

Y2J

リリース： 2017-05-12 11:20:27

オリジナル

1541 人が閲覧しました

この記事では主にWeChatミニプログラムのデータアクセス例の詳細な説明に関する関連情報を紹介しますので、必要な方は参考にしてください

まず、ミニプログラムの構造について簡単に説明します

。図に示されています

1. それぞれのビュー (.wxml) に、対応する名前のスクリプト (.js) とスタイル (.wxss) を追加するだけで、ページ内のスクリプトとスタイルは継承されます。一番外側の app.js と app.wxcss から。

2. スクリプトは、データを配置するために使用される .js ファイルです。

データアクセスについては、ajaxを知っている場合は、どれも問題ではありません。

WeChatアプレットについては、IDEがあまりにも読みにくいように書かれているため、プロジェクト全体が読みにくくなります。維持するのが難しいでしょう。

私はアプリを書いたことがないので、データアクセスがアプリ内でどのようにカプセル化されているかわかりません

3 日間の実務経験を持つ小規模なプログラムコーダーとして、各ページのデータがデータインターフェイスにアクセスすると、自分でやるのはOOPすぎる

そこで、linq to sqlを考えて、最初はsingelordefaultとfirstordefaultの2つだけ使う予定でしたが、考えるのが面倒だったのでgetbyparamsとgetbyidを使いました。条件に従ってすべてのデータを検索するか、ID に基づいてデータを取得します

メソッドを見てください、それは少し冗長です

const API_URL = &#39;http://localhost:4424/api/&#39;

function getApi(url,params){
 return new Promise((res,rej)=>{
  wx.request({
   url:API_URL+&#39;/&#39;+url,
   data:Object.assign({},params),
   header:{&#39;Content-Type&#39;: &#39;application/json&#39;},
   success:res,
   fail:rej
  })
 })
}

module.exports = {
 GetByParams(url,page=1,pageSize=20,search = &#39;&#39;){
  const params = { start: (page - 1) * pageSize, pageSize: pageSize }
  return getApi(url, search ? Object.assign(params, { q: search }) : params)
   .then(res => res.data)
 },
 GetById(url,id){
  return getApi(url, id)
   .then(res => res.data)
 }
}

ログイン後にコピー

module.exports = {} は固定の書き方です、メソッドを 1 つずつ記述し、各メソッドを,で区切ります。

すべてのインターフェースをコントローラーに入れることは不可能なので、URL パラメーターを設定しました。そのため、URL の形式は「コントローラー/アクション」です
呼び出しクリッシュを見れば、その使用方法がわかります

const req = require(&#39;../../utils/util.js&#39;)

Page({
 data: {
  imgUrls: [],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 2000
 },
 onLoad(){
  req.GetByParams(&#39;home/homebanner&#39;)//看这里  看这里  看这里
  .then(d=>this.setData({imgUrls:d,loading:false}))
  .catch(e=>{
   this.setData({imgUrls:[],loading:false})
  })
 }
})

ログイン後にコピー

これは、インデックスから

バナー画像

を取得するメソッドです。req.GetByParams('home/homebanner')、ここにパラメーターを指定することも、空のままにすることもできます

最終ページは次のようになります

右側の赤いボックスには、リクエストによって返されたデータが表示され、それに応じてインターフェースも変更されます。これは

デバッグ

に関するものです。後で議論してください