이 기사에서는 대다수의 개발자에게 도움이 되기를 바라며 모든 사람을 위한 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='search_input' type='text' confirm-type='search' bindconfirm='toSearch' ></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='search_input' type='text' confirm-type='search' name="search" bindconfirm='toSearch' > <button class='search_btn' form-type='submit'>搜索</button></input> </form>
//js部分 formSubmit(e){ console.log(e.detail.value.search) //为输入框的值,input记得添加name属性 }
관련 권장 사항: Mini 프로그램 개발 튜토리얼
위 내용은 일부 소규모 프로그램 개발 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!