VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

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

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

微信小程序总结

在接触过的微信小程序的开发过程中,不难发现微信小程序为了方便开发者,封装了很多底层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。页面代码逻辑中的标记;

不及物动词摘要

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

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 让微信小程序发展如鱼得水(例)(微信小程序开发案例教程)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

相关推荐

评论 抢沙发

评论前必须登录!