让微信小程序发展如鱼得水(例)(微信小程序开发案例教程)

一直想写一篇关于微信小程序发展的总结和记录。于是，拖延症一拖再拖。不，最近天气不错，找个空闲的下午输出这篇文章(好像和天气无关)，开始吧！

注:默认本文开发者对微信小程序的开发有一定的语法基础。小程序开发文档

相关免费学习推荐:微信小程序开发

微信小程序总结

在接触过的微信小程序的开发过程中，不难发现微信小程序为了方便开发者，封装了很多底层API，比如接口请求的wx.request()，wx.switchTab，wx.navigate to等。用于路线跳转和页面导航。虽然在一定程度上简化了开发，但是对于项目的系统化建设来说，还是不够的。所以在对比了之前基于Vue开发项目的经验和自己的开发习惯后，我总结了以下三点，以供参考:

1.全局变量和配置信息的统一管理；

2.封装路由卫士相关API:vue -路由器的router.beforeEach()和router.afterEach()真的很好闻；

3.接口请求进一步提取和封装公共信息；

4.封装接口的请求和响应拦截API:axios的axios.interceptors.request.use()和axios的axios . interceptors . response . use()都是约定好的；

从以上四点出发，规范和优化微信小程序的初始化项目，可以大大提高开发效率，进行项目维护和管理。封装的好处不仅体现在调用方便，还体现在管理方便。同时，公共操作集中处理，大大减少了复杂重复的代码。

一.项目启动

新建一个微信小程序项目，在项目下创建以下目录和文件:

Config文件夹:统一管理可配置信息和变量；ErroList.js:接口错误代码匹配列表文件；GlobalData.js:全局变量统一管理文件(相当于vuex)；Keys.js:可配置的系统信息管理文件(全局常量命名等。);pages:applet页面文件管理文件夹(每个页面都有一个子文件夹目录)；路由器文件夹:路由管理文件；Router.js:微信小程序五个路由导航API的封装；RouterConfig.js:页面路由名称和路径匹配配置文件；RouterFilter.js:路由预拦截封装；服务器文件:接口请求服务管理文件夹；api文件夹:请求请求封装管理和接口API配置管理文件夹；request . js:wx . request的Promise封装；Xxx.js:对应模块的接口管理文件；RequestFilter.js:接口请求和响应拦截包文件；其他都是初始化默认文件；

第二，路由跳转和路由保护封装

1.路由跳转封装

微信小程序的官方文档为开发者提供了路由和跳转的五个API，每个API都有自己的特殊用法:

根据其用法，我们对路由api的封装如下:微信小程序的路由跳转最终对应push、replace、pop、relaunch、switchTab；Routes对应routeConfig.js中路由路径的配置；RouterFilter对应routerFilter.js文件，处理路由跳转前的逻辑；

RouteConfig.js(需要在每个新页面之后手动添加):export const routes = { INDEX:"/pages/INDEX/INDEX ；，测试: /pages/test/test，}导出默认值{...routes }；router filter . js:export default()= gt；{...//路由跳转前的逻辑处理}router.js(routerFilter负责路由跳转前的公共操作，路由跳转后的公共操作在成功和失败中处理):从"../router/router config ；；从 。/router filter ；/* * *封装wx . navigate to * @ param { route } path * @ param { parameter } params * @ param { event } events */const push =(path，params，events)= >；{ router filter()wx . navigate to({ URL:routes

借鉴axios对请求的封装，以Promise的形式封装wx.request()岂不是很美:

request.js:从 ../request filter ；Const app = getApp()/** *接口请求封装* @ param { request method } method * @ param { requested url } URL * @ param { requested data } data */const request =(method，URL，data)= >；{//设置请求标头constheader = {...}//promise封装一层，这样调用时，直接用then和catch接收返回的新promise ((resolve，reject)= >；{wx.request ({method: method，URL: app.globaldata.host+URL，//完成主机数据:data，header: header，Success(res) {//对成功返回的请求进行数据管理和统一逻辑操作...resolve (res.data)}，fail(err){ wx . show toast({ title: # 39；网络异常，稍后再试！'，mask: true，icon: # 39；无 # 39；，时长:3000 })} })})}导出默认请求；以user.js为例:

从 导入请求。/request ；；//获取用户OpenID导出constusr infos = data = >；请求( 帖子 ， /user/usrInfos ；，数据)；索引页面调用:

//index.js//获取应用程序实例constapp = getapp()import { usr info } from "../../服务器/API/用户 Page({ onLoad: function () {//获取用户信息usr info({ uid:" xxxx ；}) .然后(res = gt{ console.log(res) })。catch(err = gt；{console.log (err)}})四。接口请求和响应的拦截和封装

Axios。interceptors.request.use()和axios。axios的interceptors.response.use()分别对应接口请求前的拦截和数据响应后的拦截；根据这个原理，我们还截取并封装了微信小程序的响应，统一管理并输出接口请求返回的错误:

request.jsimport格式来自 ../request filter ；const app = getApp() const request =(方法，url，数据)= gt{返回新承诺((解决，拒绝)= gt{wx.request ({...success(RES){//对成功返回的请求进行数据管理和统一逻辑运算if(RES . status code = = 200){//请求返回成功if(RES . data ；RES . data . code = = = ；成功 gt；){//后端成功处理接口请求，数据返回到接口调用处，resolve(RES . data)//然后receive }else{//后端对也请求不符合逻辑报错，format error(RES)//reject(RES . data)//catch receive } } else { reject(RES . data)//catch receive } }，fail(err) {//请求被阻塞，错误wx . show toast({ title: # 39；网络异常，稍后再试！'，mask: true，icon: # 39；无 # 39；，时长:3000 })} })})}导出默认请求；许多错误处理可以在request filter . jsrequestfilter . js中完成。这里，使用一个简单的toast处理来演示:

/* * * Format接口返回的后端错误* @ param {接口成功返回的数据} RES */constformatterror =(err = >；{ wx . show toast({ title:err . message，mask: false，icon: # 39；无 # 39；，持续时间:3000 })}导出默认格式错误；错误的统一处理需要明确的数据规则:

统一错误代码管理规范；制定统一的前后台接口请求数据返回格式；五.全球数据管理

数据的管理在小项目的开发中并不是那么重要，但是随着项目越做越大，数据也越来越多。好的数据管理方案可以有效避免很多bug，这也是vuex能够在vue生态中占据一席之地的原因。秉承合理数据管理的原则，对封装的数据进行严格封装，对子模块管理的配置进行严格的分块管理:

globalData.js微信小程序中的GlobalData管理放在app.js的全局数据属性中，当数据太多或者app.js的逻辑太复杂时，将全局数据提取出来单独管理确实是一个不错的解决方案:

导出默认{主机: http://www.wawow.xyz/api/test&;，//域名和接口请求的接口前缀已经确认:“ //是否已经存在确认实例current page:“ ；} keys.jskeys.js是个人发展中的习惯操作。通过这里的集中管理，可以非常方便地调用、修改和维护项目中可能用到的一些常量名称:

导出默认{ TOKEN: ；令牌 ，存储项目: 测试 }全局引用和注册引入app.js:

从 导入路由器。/router/router . js ；从 导入密钥。/config/keys从 导入全局数据。/config/globalData//全局注册wx.router = routerwx。$ keys = keys//app . jsapp({//监听小程序初始化onLaunch(options) {//获取小程序初始入口的页面信息let launch infos = wx . getlaunchoptionsync()//在全局数据管理中存储当前页面路由this . global data . current page = launch infos . path }，///全局数据存储globalData: globalData})可以通过app.globalData.host，wx调用，$KEYS。页面代码逻辑中的标记；

不及物动词摘要

上述微信小程序开发的几个方面，都是在实践中学习和总结出来的。技术层面其实很容易实现，但个人认为，发展和规范项目建设才是一个项目的重要基础。完善的规范可以有效提高开发效率，减少开发者之间不必要的扯皮！合理的项目构建可以优化开发逻辑，提高代码逻辑的可读性，减少后期项目的管理时间，同时赋予项目更大的扩展性。

以上是让微信小程序发展如鱼得水的详细内容(举例)。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 8分钟开始微信小程序开发（微信小程序开发教程概述）
• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发入门课程)
• 学习如何用pixi.js开发微信游戏(pixi.js教程)
• 学习如何用pixi.js开发微信游戏(python开发微信游戏)。
• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发软件教程)。

本文由主机参考刊发，转载请注明：让微信小程序发展如鱼得水(例)(微信小程序开发案例教程) https://zhujicankao.com/78910.html