侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序开发技巧汇总

微信(小程序)  /  管理员 发布于 3年前   138

1.全局变量的使用

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

整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数。

我们在做小程序的时候往往需要大量的请求,而请求的域名也都是相同的,我们可以把域名储存到全局变量中,这样会方便后面请求域名的修改。(user_id、unionid、user_info之类经常用到的都可以放在全局变量中)

//app.jsApp({ 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.urlwx.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" 可将软键盘的完成按钮改为“搜索”)

//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部分
//js部分formSubmit(e){ console.log(e.detail.value.search) //为输入框的值,input记得添加name属性}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 详解基于Wepy开发小程序插件(推荐)
  • 微信小程序+云开发实现欢迎登录注册
  • 微信小程序+腾讯地图开发实现路径规划绘制
  • 微信小程序云开发修改云数据库中的数据方法
  • 使用微信小程序开发弹出框应用实例详解
  • 详解如何在微信小程序开发中正确的使用vant ui组件
  • 使用apifm-wxapi快速开发小程序过程详解


  • 上一条:
    微信小程序中如何计算距离某个节日还有多少天
    下一条:
    基于Taro的微信小程序模板消息-获取formId功能模块封装实践
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
    • lodash工具库(0个评论)
    • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
    • 在Laravel中构建业务流程模型(0个评论)
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客