文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

提高微信小程序开发效率的方法

2023-06-14 12:44

关注

小编给大家分享一下提高微信小程序开发效率的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

微信小程序小结

  在接触的微信小程序开发过程中,不难发现微信小程序为了方便开发人员入手对很多底层api进行了很好的封装,比如针对接口请求的wx.request(),针对路由跳转和页面导航的wx.switchTab、wx.navigateTo···等。虽然在一定程度上简化了开发,但是对于项目工程的系统化构建还是不够的,因此本人在对比以前基于Vue开发项目的经验和自身的开发习惯,总结出如下3点可供参考:

从上述四点出发,对微信小程序初始化工程进行规范优化,能够很大程度提高开发效率和进行项目维护管理。封装的好处不只体现在调用的方便上,也体现在管理的方便上,同时,公共操作集中处理,很大程度减少繁杂重复代码。

一、项目初始化

   新建微信小程序项目,在项目下新建如下目录和文件:

提高微信小程序开发效率的方法

二、路由跳转和路由守卫封装

1、路由跳转封装

  微信小程序官方文档为开发者提供了5种路由跳转的api,每一种都有其特殊的用法:

提高微信小程序开发效率的方法

  根据其用法,我们对路由api进行如下封装:微信小程序路由跳转最后对应push、replace、pop、relaunch、switchTabroutes对应routeConfig.js中路由路径的配置;routerFilter对应routerFilter.js文件,对路由跳转之前的逻辑进行处理;

routeConfig.js(每次新增页面后需要手动添加):
export const routes =   {    INDEX: "/pages/index/index",    TEST: "/pages/test/test",  }export default {...routes};
routerFilter.js:
export default () => {  ···  //路由跳转前逻辑处理}
router.js(routerFilter负责路由跳转前公共操作处理,在success和fail中对路由跳转后的公共操作进行处理):
import routes from "../router/routerConfig";import routerFilter from "./routerFilter"const push = (path, params, events) => {  routerFilter()  wx.navigateTo({    url: routes[path] + `?query=${JSON.stringify(params)}`,    events: events,    success(res) {      console.log(res);    },    fail(err) {      console.log(err);    }  })}const replace = (path, params) => {  routerFilter()  wx.redirectTo({    url: routes[path] + `?query=${JSON.stringify(params)}`,    success(res) {      console.log(res);    },    fail(err) {      console.log(err);    }  })}const pop = (number) => {  routerFilter()  wx.navigateBack({    delta: number,    success(res) {      console.log(res);    },    fail(err) {      console.log(err);    }  })}const relaunch = (path, params) => {  routerFilter()  wx.reLaunch({    url: routes[path] + `?query=${JSON.stringify(params)}`,    success(res) {      console.log(res);    },    fail(err) {      console.log(err);    }  })}const switchTab = (path) => {  routerFilter()  wx.switchTab({    url: routes[path],    success(res) {      console.log(res);    },    fail(err) {      console.log(err);    }  })}module.exports = {  push,  replace,  pop,  relaunch,  switchTab}

2、全局注册和使用

app.js中对封装的路由api进行全局注册:

import router  from "./router/router.js"//全局注册wx.router = router

在页面逻辑中使用:

//index页面跳转test页面 gotoTest(){   wx.router.push("TEST")}

三、接口请求Promise封装

  对于同一个项目而言,微信小程序apiwx.request()中很多参数都是相同的,如果直接使用,需要将这些重复参数一遍又一遍的copy,虽然copy很简单,但是当有一个参数改变了需要找到所有接口一个一个修改,维护起来费劲,再者看着也难受呀;

提高微信小程序开发效率的方法

  借鉴axios对请求的封装,将wx.request()封装为Promise形式岂不美哉:

request.js:
import formatError from "../requestFilter"const app = getApp()const request = (method, url, data) => {  //设置请求头  const header = {    ···  }  //promise封装一层,使得调用的时候直接用then和catch接收  return new Promise((resolve, reject) => {    wx.request({      method: method,      url: app.globalData.host + url, //完整的host      data: data,      header: header,      success(res) {        //对成功返回的请求进行数据管理和统一逻辑操作        ···        resolve(res.data)      },      fail(err) {        wx.showToast({          title: '网络异常,稍后再试!',          mask: true,          icon: 'none',          duration: 3000        })      }    })  })}export default request;
具体使用

以user.js为例:

import request from "./request";// 获取用户openidexport const usrInfos = data => request("POST", "/user/usrInfos", data);

index页面调用:

//index.js//获取应用实例const app = getApp()import { usrInfos } from "../../servers/apis/user"Page({  onLoad: function () {    //获取用户信息    usrInfos({      uid: "xxxx"    })      .then(res => {        console.log(res)      })      .catch(err => {        console.log(err)      })  }})

四、接口的请求和响应拦截封装

  axiosaxios.interceptors.request.use()axios.interceptors.response.use()分别对应接口请求前的拦截处理和数据响应后的拦截处理;根据这个原理我们对微信小程序的响应也做拦截封装,对接口请求返回错误进行统一管理输出:

request.js
import formatError from "../requestFilter"const app = getApp()···const request = (method, url, data) => {  ···  return new Promise((resolve, reject) => {    wx.request({      ···      success(res) {        //对成功返回的请求进行数据管理和统一逻辑操作        if(res.statusCode === 200){ //请求返回成功          if(res.data && res.data.code === "SUCCESS"){ //后端对接口请求处理成功,返回数据给接口调用处            resolve(res.data)  //then接收          }else{//后端对也请求判断后认为不合逻辑报错            formatError(res)   //统一的报错处理逻辑            reject(res.data) //catch接收          }         }else{          reject(res.data)//catch接收        }      },      fail(err) {//请求不通报错        wx.showToast({          title: '网络异常,稍后再试!',          mask: true,          icon: 'none',          duration: 3000        })      }    })  })}export default request;
requestFilter.js

requestFilter.js中可以做很多对报错的处理,这里用一个简单的toast处理示范下:

const formatError = (err =>{  wx.showToast({    title: err.message,    mask: false,    icon: 'none',    duration: 3000  })}export default formatError;

对报错进行统一处理需要明确数据规:

五、全局数据管理

  对于数据的管理在小项目的开发中显得不那么重要,但是随着项目越来越大,数据越来越多,一个很好的数据管理方案能够有效地避免很多bug,这也是vuex能够在vue生态中占有一席之地的原因。秉承着合理管理数据的原则,对于该封装的数据坚决封装,对于该分模块管理的配置坚决分块管理:

globalData.js

微信小程序中全局的数据管理放在app.jsglobalData属性中,当数据太多或者app.js逻辑太复杂时,将全局数据提取出来单独管理的确是个好方案:

export default {  ···  host: "http://www.wawow.xyz/api/test", //接口请求的域名和接口前缀   hasConfirm: "" //是否已经有了confirm实例  currentPage: ""  ···}
keys.js

keys.js属于个人开发中的习惯操作,将项目中可能用到的一些常量名称在此集中管理起来,十分方便调用和修改维护:

export default {  ···  TOKEN: "token",  STORAGEITEM: "test"  ···}
全局引用和注册

引入app.js:

import router  from "./router/router.js"import keys from "./config/keys"import globalData from "./config/globalData"//全局注册wx.router = routerwx.$KEYS = keys//app.jsApp({  //监听小程序初始化  onLaunch(options) {    //获取小程序初始进入的页面信息    let launchInfos = wx.getLaunchOptionsSync()    //将当前页面路由存入全局的数据管理中    this.globalData.currentPage = launchInfos.path  },  ···  //全局数据存储  globalData: globalData})
使用

在页面代码逻辑中可以通过app.globalData.hostwx.$KEYS.TOKEN方式进行调用;

以上是“提高微信小程序开发效率的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯