微信小程序开发技巧汇总


Posted in Javascript onJuly 15, 2019

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属性
}

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

Javascript 相关文章推荐
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 #Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 #Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
You might like
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python 正确保留多位小数的实例
2018/07/16 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
红旗方阵解说词
2014/02/12 职场文书
国庆节演讲稿
2014/05/27 职场文书
公路施工安全责任书
2015/05/08 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
不同意离婚上诉状
2015/05/23 职场文书
如何写观后感
2015/06/19 职场文书
答谢酒会主持词
2015/07/02 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电