ミニプログラムシステム API 呼び出し

1.ネットワークリクエストAPIとカプセル化wx.request（オブジェクトオブジェクト）

RequestTask | WeChat オープンドキュメント

1.1 APIパラメータ

1.2 APIの使用法

1.3 ネットワークリクエスト -- API のカプセル化

Promiseを使用して関数にラップします

export function MyRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({ 
      ...options, 
      success: (res) => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

クラスにカプセル化し、インスタンス化します (baseURL をカプセル化、get、post

class MyRequest {
  constructor(baseURL) {
    this.baseURL = baseURL
  }
  request(options) {
    const { url } = options
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        url: this.baseURL + url,
        success: (res) => {
          resolve(res.data)
        },
        fail: (err) => {
          console.log("err:", err);
        }
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: "get" })
  }
  post(options) {
    return this.request({ ...options, method: "post" })
  }
}

export const myReqInstance = new MyRequest("http://codercba.com:1888/api")

カプセル化された関数とクラスを使用する

import { myRequest, myReqInstance } from "../../service/index"

Page({
  data: {
    allCities: {},
    houselist: [],
    currentPage: 1
  },
  async onLoad() {
    // 1.网络请求基本使用
    // wx.request({
    //   url: "http://codercba.com:1888/api/city/all",
    //   success: (res) => {
    //     const data = res.data.data
    //     this.setData({ allCities: data })
    //   },
    //   fail: (err) => {
    //     console.log("err:", err);
    //   }
    // })

    // wx.request({
    //   url: 'http://codercba.com:1888/api/home/houselist',
    //   data: {
    //     page: 1
    //   },
    //   success: (res) => {
    //     const data = res.data.data
    //     this.setData({ houselist: data })
    //   }
    // })

    // 2.使用封装的函数
    // myRequest({ 
    //   url: "http://codercba.com:1888/api/city/all" 
    // }).then(res => {
    //   this.setData({ allCities: res.data })
    // })

    // myRequest({
    //   url: "http://codercba.com:1888/api/home/houselist",
    //   data: {
    //     page: 1
    //   }
    // }).then(res => {
    //   this.setData({ houselist: res.data })
    // })

    // 3.await/async 书写方便，但性能不高，会阻塞后面的网络请求
    // const cityRes = await myRequest({ 
    //   url: "http://codercba.com:1888/api/city/all" 
    // })
    // this.setData({ allCities: cityRes.data })

    // const houseRes = await myRequest({
    //   url: "http://codercba.com:1888/api/home/houselist",
    //   data: { page: 1 }
    // })
    // this.setData({ houselist: houseRes.data })

    // 4.将请求封装到一个单独函数中(推荐) 异步函数执行不会阻塞后面的运行
    this.getCityData()
    this.getHouselistData()

    // 5.使用类的实例发送请求
    myReqInstance.get({
      url: "/city/all"
    }).then(res => {
      console.log(res);
    })
  },

  async getCityData() {
    const cityRes = await myRequest({ 
      url: "http://codercba.com:1888/api/city/all" 
    })
    this.setData({ allCities: cityRes.data })
  },
  async getHouselistData() {
    const houseRes = await myRequest({
      url: "http://codercba.com:1888/api/home/houselist",
      data: { page: this.data.currentPage }
    })
    const finalHouseList = [...this.data.houselist, ...houseRes.data]
    this.setData({ houselist: finalHouseList })
    // 思考: 为什么这里不需要setData?
    // 修改currentPage数据，并不需要页面刷新
    this.data.currentPage++
  },
//上拉加载更多
  onReachBottom() {
    this.getHouselistData()
  }
})

2. ポップアップウィンドウの表示とページ共有

2.1 ポップアップウィンドウを表示する

showToast はメッセージプロンプトボックスを表示します

wx.showToast(Object オブジェクト) | WeChat ドキュメントを開く

showModal はモーダルダイアログを表示します

wx.showModal(Object オブジェクト) | WeChat ドキュメントを開く

showLoading 読み込みプロンプトボックスを表示します。プロンプトボックスを閉じるには、wx.hideLoading を積極的に呼び出す必要があります。

wx.showLoading(Object オブジェクト) | WeChat ドキュメントを開く

showActionSheet はアクションメニューを表示します

wx.showActionSheet(Object オブジェクト) | WeChat ドキュメントを開く

知らせ

wx.showLoading と wx.showToast は同時に 1 つしか表示できません

wx.showToast はwx.hideToastと組み合わせる必要があります

2.2 ページの共有

  onShareAppMessage() {
    return {
      title: "旅途的内容",
      path: "/pages/favor/favor",
      imageUrl: "/assets/nhlt.jpg"
    }
  },

3. 端末情報と位置情報

3.1 デバイス情報の取得 wx.getSystemInfo(Object object) | WeChat Open Documentation

wx.getSystemInfo({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

3.2 位置情報の取得 wx.getLocation(Object object) | WeChat オープンドキュメント

ユーザー認証のグローバル設定の取得 | WeChat ドキュメントを開く

4. 小規模プログラムストレージストレージ

暗号化するブール値デフォルト値は false ですオプション

暗号化ストレージを有効にするかどうか。非同期 setStorage インターフェイスのみが、暗号化ストレージの有効化をサポートしています。有効にすると、データに AES128 暗号化が使用され、インターフェイスのコールバック時間が増加します。暗号化ストレージが有効な場合、setStorage と getStorage の両方で encrypt の値が true であることを宣言する必要があります。また、暗号化されたデータは元のデータの1.4倍になるため、暗号化をオンにした場合、1つのキーに許可される最大データ長は0.7MB、すべてのデータストレージの上限は7.1MBとなります。

5. ページジャンプとデータ転送

5.1 ページジャンプ

5.1.1 ナビゲーターコンポーネントナビゲーター | WeChat ドキュメントを開く

5.1.2 wxのAPI

ルーティングジャンプAPI	機能説明
wx.switchTab	tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます
wx.reLaunch	すべてのページを閉じて、アプリ内のページを開く
wx.redirectTo	現在のページを閉じて、アプリ内のページにジャンプします。ただし、タブバーページへのジャンプは許可されていません。
wx.navigateTo	現在のページを保持したまま、アプリ内のページにジャンプします。ただしタブバーページにはジャンプできません。元のページに戻るには、wx.navigateBackを使用します。アプレット内のページスタックには最大 10 個のレイヤーがあります。
wx.navigateBack	現在のページを閉じて、前のページまたは複数レベルのページに戻ります。現在のページスタックはgetCurrentPagesを通じて取得して、返される必要があるレイヤーの数を決定できます。

5.2 データ転送

上位ページにデータを渡す

1. 前のページのインスタンスを取得し、setData を通じて前のページのデータを設定します。

onUnload()に前のページに戻るデータ転送処理を記述し、アプレット付属のリターンナビゲーション関数を書き換えてパラメータ転送を実現します。

まだ生成されていないApp.onLaunch ときは呼び出さないでください。getCurrentPages()page

ページスタックを変更しないでください。ルーティングエラーやページ状態エラーが発生する可能性があります。

getCurrentPages は現在のページスタックを取得します。配列の最初の要素はホームページ、最後の要素は現在のページです。

2. イベントをコールバックする関数 EventChannel | WeChat オープンドキュメント

データを次のレベルのページに渡す

URL のクエリフィールドを介してページ間でパラメータを渡し、次のレベルのページの onLoad のパラメータオプションで現在のページを開くためのパス内のパラメータを取得します。

events パラメータ数 EventChannel.on(string eventName, EventCallback fn)

Page({
  data: {
    name: "kobe",
    age: 30,
    message: "哈哈哈"
  },
  onNavTap() {
    const name = this.data.name
    const age = this.data.age

    // 页面导航操作
    wx.navigateTo({
      // 跳转的过程, 传递一些参数过去
      url: `/pages2/detail/detail?name=${name}&age=${age}`,
      events: {
        backEvent(data) {
          console.log("back:", data);
        },
        coderwhy(data) {
          console.log("why:", data);
        }
      }
    })
  }
})

Page({
  data: {
    name: "",
    age: 0
  },
 // onLoad 的参数中获取打开当前页面路径中的参数。
  onLoad(options) {
    console.log(options);
    const name = options.name
    const age = options.age
    this.setData({ name, age })

    // const eventChannel = this.getOpenerEventChannel()
  },

  onBackTap() {
    // 1.返回导航
    wx.navigateBack()

    // 2.方式一: 给上一级的页面传递数据
    // 2.1. 获取到上一个页面的实例
    // const pages = getCurrentPages()
    // const prePage = pages[pages.length-2]

    // // 2.2.通过setData给上一个页面设置数据
    // prePage.setData({ message: "呵呵呵" })

    // 3.方式二: 回调events的函数
    // 3.1. 拿到eventChannel
    const eventChannel = this.getOpenerEventChannel()

    // 3.2. 通过eventChannel回调函数
    eventChannel.emit("backEvent", { name: "back", age: 111 })
    eventChannel.emit("coderwhy", { name: "why", age: 10 })
  },
  onUnload() {
    // // 2.1. 获取到上一个页面的实例
    // const pages = getCurrentPages()
    // const prePage = pages[pages.length-2]

    // // 2.2.通过setData给上一个页面设置数据
    // prePage.setData({ message: "呵呵呵" })
  }
})

6. 小さなプログラムのログイン処理訓練

ミニプログラムのログインプロセス:

1. wx.login() を通じてコードを取得します。

2. このコードをバックエンドに送信すると、バックエンドはアイデンティティの一意の識別子として使用されるトークンを返します。

3. wx.setStorageSync() を通じてローカルストレージにトークンを保存します。

4. ユーザーが次回ページにアクセスすると、wx.getStorageSync() メソッドを使用して、トークンに値があり、有効期限が切れていないかどうかが判断されます。値があり、有効期限が切れていない場合は、他のデータをリクエストできます。値がないか、トークンが無効です。ログインして操作してください

Page({
  // onLoad登录的流程
  async onLoad() {
    // 1.获取token, 判断token是否有值
    const token = wx.getStorageSync('token') || ""

    // 2.判断token是否过期
    const res = await myLoginReqInstance.post({
      url: "/auth",
      header: {
        token: token
      }
    })
    // console.log(res);

    // 2.如果token有值
    if (token && res.message === "已登录") {
      console.log("请求其他的数据");
    } else {
      this.handleLogin()
    }
  },

  async handleLogin() {
    // 1.获取code
    const code = await getCode()

    // 2.使用code换取token
    const res = await myLoginReqInstance.post({
      url: "/login",
      data: { code }
    })

    // 3.保存token
    wx.setStorageSync('token', res.token)
  }

  // handleLogin() {
  //   // 1.获取code
  //   wx.login({
  //     success: (res) => {
  //       const code = res.code

  //       // 2.将这个code发送自己的服务器(后端)
  //       wx.request({
  //         url: "http://123.207.32.32:3000/login",
  //         data: {
  //           code
  //         },
  //         method: "post",
  //         success: (res) => {
  //           const token = res.data.token
  //           wx.setStorageSync('token', token)
  //         }
  //       })
  //     }
  //   })
  // }
})

パッケージgetCode

 //  /service/login.js
export function getCode() {
  return new Promise((resolve, reject) => {
    wx.login({
      success: (res) => {
        resolve(res.code)
      },
      fail: reject
    })
  })
}

ミニ プログラム システム API 呼び出し

1.ネットワークリクエストAPIとカプセル化wx.request（オブジェクトオブジェクト）

RequestTask | WeChat オープンドキュメント

1.1 APIパラメータ

1.2 APIの使用法

1.3 ネットワークリクエスト -- API のカプセル化

2. ポップアップウィンドウの表示とページ共有

2.1 ポップアップウィンドウを表示する

showToast はメッセージ プロンプト ボックスを表示します

showModal はモーダルダイアログを表示します

showLoading 読み込みプロンプトボックスを表示します。プロンプト ボックスを閉じるには、wx.hideLoading を積極的に呼び出す必要があります。

showActionSheet はアクション メニューを表示します

知らせ

2.2 ページの共有

3. 端末情報と位置情報

3.1 デバイス情報の取得 wx.getSystemInfo(Object object) | WeChat Open Documentation

3.2 位置情報の取得 wx.getLocation(Object object) | WeChat オープンドキュメント

4. 小規模プログラムストレージストレージ

5. ページジャンプとデータ転送

5.1 ページジャンプ

5.1.1 ナビゲーター コンポーネント ナビゲーター | WeChat ドキュメントを開く

5.1.2 wxのAPI

5.2 データ転送

上位ページにデータを渡す

データを次のレベルのページに渡す

6. 小さなプログラムのログイン処理訓練

おすすめ

ミニプログラムシステム API 呼び出し

showToast はメッセージプロンプトボックスを表示します

showLoading 読み込みプロンプトボックスを表示します。プロンプトボックスを閉じるには、wx.hideLoading を積極的に呼び出す必要があります。

showActionSheet はアクションメニューを表示します

5.1.1 ナビゲーターコンポーネントナビゲーター | WeChat ドキュメントを開く