微信小程序开发技巧汇总


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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
node.js文件上传处理示例
Oct 27 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
微信小程序实现录音功能
Nov 22 Javascript
element中table高度自适应的实现
Oct 21 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
微信小程序中如何计算距离某个节日还有多少天
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 正则学习实例
2008/07/30 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
javascript读取RSS数据
2007/01/20 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
品牌推广策划方案
2014/05/28 职场文书
意向书范本
2014/07/29 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
学会感恩主题班会
2015/08/12 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
合作意向书怎么写
2019/06/24 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers