微信小程序开发技巧汇总


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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
一个php作的文本留言本的例子(一)
2006/10/09 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
javascript this用法小结
2008/12/19 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
python中PIL安装简单教程
2016/04/21 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python地震数据可视化详解
2019/06/18 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
override和overload的区别
2016/03/09 面试题
《从现在开始》教学反思
2014/04/15 职场文书
爱我中华教学反思
2014/04/28 职场文书
营销团队口号
2014/06/06 职场文书
文明倡议书
2015/01/19 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
三峡大坝导游词
2015/01/31 职场文书
简爱电影观后感
2015/06/10 职场文书
班级班风口号大全
2015/12/25 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
JavaScript前端面试组合函数
2022/06/21 Javascript