일부 소규모 프로그램 개발 기술 요약

이 기사에서는 대다수의 개발자에게 도움이 되기를 바라며 모든 사람을 위한 WeChat 미니 프로그램 개발 팁을 공유합니다.

1. 전역 변수 사용

각 애플릿은 애플릿 예제 등록, 라이프 사이클 콜백 함수 바인딩, 오류 모니터링 및 페이지 존재 여부 모니터링 기능 등을 위해 app.js의 App 메서드를 호출해야 합니다.
자세한 매개변수 의미 및 사용법은 앱 참조 문서를 참조하세요.

전체 미니 프로그램에는 모든 페이지에서 공유되는 앱 인스턴스가 하나만 있습니다. 개발자는 getApp 메소드를 통해 전역적으로 고유한 App 예제를 얻거나, App에 대한 데이터를 얻거나, App에 개발자가 등록한 기능을 호출할 수 있습니다.

작은 프로그램을 만들 때 많은 수의 요청이 필요한 경우가 많으며 요청한 도메인 이름은 모두 동일합니다. 도메인 이름을 전역 변수에 저장할 수 있으므로 나중에 요청한 도메인 이름을 쉽게 수정할 수 있습니다. . (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 요청 메서드 캡슐화

을 피할 수 있습니다. 요청이 잦은데 매번 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) 입력 구성 요소에서 바인딩 확인 속성을 사용합니다. (confirm-type="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) 양식 제출을 사용하여 완료합니다. 버튼을 클릭하고 제출(이름 속성을 추가해야 함)

검색 버튼

양식 제출을 대체하려면 버튼을 사용하세요(form-type="submit"). 보기를 사용할 수 없으므로 버튼을 사용해야 합니다
.

버튼은 직접 수정해야 합니다. 기본 스타일(버튼 테두리는 버튼::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属性
}

관련 권장 사항: Mini 프로그램 개발 튜토리얼

위 내용은 일부 소규모 프로그램 개발 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!