微信小程序开发技巧汇总


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 相关文章推荐
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python 自动补全(vim)
2014/11/30 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python重新加载模块的实现方法
2018/10/16 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
几道PHP的面试题
2012/05/19 面试题
2014年会演讲稿范文
2014/01/06 职场文书
大学生村官工作感言
2014/01/10 职场文书
初一地理教学反思
2014/01/16 职场文书
公司合作意向书
2014/04/01 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书