いくつかの小さなプログラム開発スキルを要約する

この記事では、大多数の開発者に役立つことを願って、WeChat ミニ プログラム開発のヒントをすべての人に共有します。

1. グローバル変数の使用

各ミニ プログラムは、app.js の App メソッドを呼び出して、ミニ プログラムのサンプルを登録し、ライフ サイクル コールバック関数をバインドする必要があります。 . エラー監視機能やページ監視機能が存在しない等。
パラメータの詳細な意味と使用法については、アプリのリファレンス ドキュメントを参照してください。

ミニ プログラム全体には、すべてのページで共有されるアプリ インスタンスが 1 つだけあります。開発者は、getApp メソッドを通じて世界的に一意のアプリの例を取得したり、アプリ上のデータを取得したり、開発者がアプリに登録した関数を呼び出したりすることができます。

小規模なプログラムを作成する場合、多くのリクエストが必要になることが多く、リクエストされるドメイン名も同じです。ドメイン名をグローバル変数に保存できるため、変更が容易になります。後でリクエストされるドメイン名の。 (user_id、unionid、user_info などの頻繁に使用されるものはグローバル変数に配置できます)

//app.js
App({
 globalData: {
  user_id: null,
  unionid:null,
  url:"https://xxx.com/index.php/Home/Mobile/",   //请求的域名
  user_info:null
 }
})

ページで使用するときは、app.js を忘れずに引用してください。ミニ プログラムにはメソッドが用意されています

//index.js
//获取应用实例
const app = getApp()  //获取app
//let url = app.globalData.url; //使用方法，可先定义或者直接使用app.globalData.url
wx.request({
  url: app.globalData.url + 'checkfirst', //就可以直接在这里调用
  method:'POST',
  header:{"Content-Type":"application/x-www-form/"}
  data:{},
  success:(res)=>{}

2. アロー関数の使用

インターフェイス リクエストを呼び出し、リクエストによって返されたデータを通じてページ データを変更するとき、多くの場合、このポインタを保存するために一時ポインタを使用します。

ただし、ES6 アロー関数を使用すると、それを回避できます。

一時ポインタを使用する

onLoad: function (options) {
  let that = this //保存临时指针
  wx.request({
   url: url + 'GetCouponlist',
   method: 'POST',
   header: { 'Content-Type': 'application/x-www-form-urlencoded' },
   data: { },
   success(res) {
    that.setData({  //使用临时指针
     coupon_length:res.data.data.length
    })
   }
  })

ES6 アロー関数を使用する ( ) => { }

success:(res) => {
    this.setData({  //此时this仍然指向onLoad
     coupon_length:res.data.data.length
    })
   }

3. HTTP リクエスト メソッドのカプセル化

小規模なプログラムでは http リクエストが非常に頻繁に発生しますが、毎回 wx.request を入力するのは非常に面倒で、コードも冗長です。他にもあるので、カプセル化する必要があります。
まず、utils フォルダーに新しい js を作成する必要があります。それに request.js という名前を付け、投稿をカプセル化し、その中でリクエストを取得します。宣言することを忘れないでください。最後

//封装请求
const app = getApp()
let host = app.globalData.url

/**
 * POST 请求
 * model:{
 * url:接口
 * postData:参数 {}
 * doSuccess:成功的回调
 *  doFail:失败回调
 * }
 */
function postRequest(model) {
 wx.request({
  url: host + model.url,
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  method: "POST",
  data: model.data,
  success: (res) => {
   model.success(res.data)
  },
  fail: (res) => {
   model.fail(res.data)
  }
 })
}

/**
 * GET 请求
 * model:{
 *  url:接口
 *  getData:参数 {}
 *  doSuccess:成功的回调
 *  doFail:失败回调
 * }
 */
function getRequest(model) {
 wx.request({
  url: host + model.url,
  data: model.data,
  success: (res) => {
   model.success(res.data)
  },
  fail: (res) => {
   model.fail(res.data)
  }
 })
}

/**
 * module.exports用来导出代码
 * js中通过 let call = require("../util/request.js") 加载
 */
module.exports = {
 postRequest: postRequest,
 getRequest: getRequest
}

このステップは非常に重要なので、忘れずに追加してください。

module.exports = {
postRequest: postRequest,
getRequest: getRequest
}

使用すると、ページ外の対応するページの上部で呼び出されます

let call = require("../../utils/request.js")

使用すると、↓

get

//获取广告图
  call.getRequest({
   url:'GetAd',
   success:(res)=>{   //箭头函数没有指针问题
    this.setData({
     urlItem: res.data
    })
   }
  })

post

call.postRequest({
   url: 'addorder',
   data: {
    shop_id: that.data.shop_id,
    user_id: app.globalData.user_id,
    coupon_sn: that.data.coupon_sn,
    carType: that.data.car_type,
    appointtime: that.data.toTime
   },
   success:(res)=>{
    console.log(res)
    wx.navigateTo({
     url: '../selectPay/selectPay?order_sn=' + res.data.order_sn + '&fee=' + res.data.real_pay + "&order_id=" + res.data.order_id,
    })
   }
  })

4. 検索入力で、検索ボタンをクリックして検索し、ボタンのスタイルを変更する方法

通常は、検索ボックスに検索ボタンを追加します。をクリックして検索しますが、ミニプログラムはDOM上で動作しないため、入力の値を直接取得できないため、別の方法で検索する必要があります。

(1) inputコンポーネントのbindconfirm属性(confirm-type="search")により、ソフトキーボードの完了ボタンを「search」に変更できます。

<input class=&#39;search_input&#39; type=&#39;text&#39; confirm-type=&#39;search&#39; bindconfirm=&#39;toSearch&#39; ></input>
//js部分
toSearch(e){
 console.log(e.detail.value) //e.detail.value 为input框输入的值
}

(2) フォーム送信を使用してクリック ボタンの送信を完了します (入力には name 属性を追加する必要があります)

検索ボタン

使用ボタンフォーム送信 (form-type="submit") の代わりに、ビューは使用できません。ボタンを使用する必要があることに注意してください。

ボタンのデフォルトのスタイル (境界線) を自分で変更する必要があります。ボタンは button::after)

//wxml部分
<form bindsubmit="formSubmit" bindreset="formReset">
 <input class=&#39;search_input&#39; type=&#39;text&#39; confirm-type=&#39;search&#39; name="search" bindconfirm=&#39;toSearch&#39; >
 <button class=&#39;search_btn&#39; form-type=&#39;submit&#39;>搜索</button></input>
</form>

//js部分
formSubmit(e){
 console.log(e.detail.value.search) //为输入框的值，input记得添加name属性
}

で変更する必要があります

関連する推奨事項: ミニ プログラム開発チュートリアル

以上がいくつかの小さなプログラム開発スキルを要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。