您现在的位置是:群英 > 开发技术 > 移动开发
对于小程序开发的实用技巧你知道多少?
Admin发表于 2022-01-07 18:30:38590 次浏览

   对于小程序开发的实用技巧你知道多少?在进行小程序开发时,如果能熟练掌握一些实用技巧,对我们提升效果是很有帮助的。对此本文总结了一些小程序开发的技巧,文中的介绍很详细,对大家学习和工作都有一定的帮助,感兴趣的朋友就继续往下看吧。

    1、全局变量的使用

    每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
详细的参数含义和使用请参考 App 参考文档 。

    整个小程序只有一个 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.箭头函数的使用

    当我们调用接口请求时要通过请求返回的数据改变页面数据经常要用到临时指针来保存this指针。

    但如果使用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,在里面封装出post和get的请求,记得最后要声明出来

//封装请求
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
}

    使用时就在相应的页面顶部调用,Page外部噢

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.搜索input中,如何点击搜索按钮进行搜索及按钮样式修改

    正常我们会在搜索框中加入一个搜索按钮,点击进行搜索,但是小程序不是操作dom的,所以是无法直接获取到input中的值,所以要通过另外的方法进行搜索。

    (1)通过input组件中的bindconfirm属性(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表单的提交,来完成点击按钮的提交(input需要添加name属性)

    搜索按钮

    利用button代替form的表单提交(form-type="submit"),注意用view不行,必须用button

    需要自己修改button的默认样式(button的边框要在button::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属性
}

    关于小程序开发的实用技巧就分享到这,希望能对大家有帮助,有需要的朋友不妨了解看看。如果还想要了解更多小程序开发技巧,大家可以关注其它的相关文章。

文本转载自PHP中文网

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

相关信息推荐
2022-01-26 09:16:36 
摘要:这篇文章我们来了解PHP探针的相关内容,有一些朋友可能不是很了解PHP探针是什么,其实PHP探针是用php语言编写的一个程序,是一个查看服务器信息的工具。那么PHP探针都有什么功能呢?下面我们具体的了解看看。
2022-07-18 17:43:42 
摘要:channel主要是为了实现go的并发特性,用于并发通信的,也就是在不同的协程单元goroutine之间同步通信。接下来通过本文给大家介绍Golang中channel的原理解读,感兴趣的朋友一起看看吧
2022-02-11 17:51:07 
摘要:这篇文章给大家分享的是PHP中curl_init函数使用不了的处理方法。要解决这个问题并不难,下文给大家分享一个解决方法,希望对大家有帮助,接下来就跟随小编一起了解看看吧。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部