小程序 Typescript 最佳实践

小程序结合TypeScript开发,如果用第三方框架,首选Taro已完美支持。但是如果你选择原生开发,那么下面的这份实践可能会帮到你。

小程序 Typescript 最佳实践

  • 使用 gulp 构建(支持 typescript 和 less/sass/scss)

  • 使用 typescript 编译

  • 使用 tslint + prettier 格式代码规范

  • 使用小程序官方 typing 库

  • 使用小程序 weui 组件库[1]

  • 使用了 conventional-changelog[2] 方案自动生成 CHANGELOG

封装了以下的能力

相关能力说明
watch behavior使用参考 watch-behavior[3]
日志能力封装了 LogManager 和实时日志的能力 ,参考地址[4]
autolog behavior配合日志能力,自动在 Component 中每一个方法调用的时候打印 log,参考地址[5]
globalData behavior只需要在 Component 中引入 GlobalData,则可以使用全局状态的能力,参考地址[6]
页面跳转库解决了带参数、锁住原跳转页面等问题,参考地址[7]
pageparams behavior配合页面跳转库的跳转参数使用,如果使用 pageParams 来跳转传参,使用该 behavior 可以自动更新到 data 中
request 通用请求库处理包括 session 过期自动拉取登录接口续期等逻辑
promisify 工具库将类似于 wx.request 等函数转化为 Promise 调用方式

扫码可以简单体验下 DEMO:

安装使用

# 安装依赖
npm install# 全局安装依赖
npm install gulp prettier typescript commitizen --global# 需要在小程序开发工具里【工具】-【构建npm】# 启动代码
npm run dev# 打包代码
npm run build

基本环境说明

husky

  1. 如果不希望在 git commit 的时候检查 commit 的规范,请在package.json文件中删掉"commit-msg"相关内容。

  2. 如果不希望在 git commit 的时候检查代码规范,请在package.json文件中删掉"pre-commit"相关内容。

{"husky": {"hooks": {"pre-commit": "pretty-quick --staged","commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}
}

commit 规范

git commit 的 message 遵循 Angular 规范[8]

<commit 类型,不可省略>(<功能模块,可省略>): <功能内容,不可省略>
// 空一行
<详细内容,可省略>
// 空一行
<关闭Issue,此处可省略>

commit 类型包括:

  • feat:新功能(feature)

  • fix:修补 bug

  • docs:文档(documentation)

  • style:格式(不影响代码运行的变动)

  • refactor:重构(即不是新增功能,也不是修改 bug 的代码变动)

  • test:增加测试

  • chore:构建过程或辅助工具的变动

如果 commit 类型为featfix,则该 commit 将现在 CHANGELOG.md 之中。

该项目更多使用方式参考前端 CHANGELOG 生成指南[9]

项目结构

├─dist                              //编译之后的项目文件(带 sorcemap,支持生产环境告警定位)
├─src                               //开发目录
│  │  app.ts                        //小程序起始文件
│  │  app.json
│  │  app.less
│  │
│  ├─assets                      //静态资源
│     ├─less      //公共less
│     ├─img          //图片资源
│  ├─behaviors                     //通用behaviors
│  ├─components                     //组件
│  ├─utils                           //工具库
│  ├─config                           //配置文档
│     ├─cgi-config.ts                //cgi接口配置
│     ├─global-config.ts                //全局配置
│  ├─pages                          //小程序相关页面
│
│  project.config.json              //小程序配置文件
│  gulpfile.js                      //工具配置
│  package.json                     //项目配置
│  README.md                        //项目说明
│  tsconfig.json                     //typescript配置
│  tslint.json                     //代码风格配置

公共库使用说明

utils/request

通用请求,处理包括 session 过期自动拉取登录接口续期等逻辑。(适用于有单个登录接口来获取 session 的场景) 使用方式:

  1. config/global-config.ts文件里,更新SESSION_KEY的值(后台接口协议返回 key,例如"sessionId")。

  2. 如果有其他需要全局携带的参数,需要在utils/request/index.ts文件里,dataWithSession中带上。

  3. config/global-config.ts文件里,更新LOGIN_FAIL_CODES的值(错误码若为该数组中的一个,则会重新拉起登录,再继续发起请求)。

参考资料

[1] 

weui 组件库: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

[2] 

conventional-changelog: https://github.com/conventional-changelog/conventional-changelog

[3] 

watch-behavior: https://github.com/godbasin/watch-behavior

[4] 

参考地址: https://godbasin.github.io/2019/12/07/wxapp-logs/

[5] 

参考地址: https://godbasin.github.io/2019/12/07/wxapp-logs/

[6] 

参考地址: https://godbasin.github.io/2019/11/09/wxapp-global-data-behavior/

[7] 

参考地址: https://godbasin.github.io/2019/12/08/wxapp-navigate/

[8] 

Angular 规范: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0

[9] 

前端 CHANGELOG 生成指南: https://godbasin.github.io/2019/11/10/change-log/

‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧  END  ‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧

太空编程

分享硬核的编程知识

分享精彩,码上快乐。JavaScript已然上天,有朝一日实现太空编程!回复【pdf】更有海量的优质电子书供下载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

这款电脑升降桌美到我了

一直在寻觅一款集颜值与功能于一体的电脑升降桌&#xff0c;这款乐歌 E5 电动桌终于成功地满足了我的需求。有黑白两款颜色可选&#xff0c;但其中白色钢化玻璃版常适合用来作为白色系桌面的基础——四周圆角设计&#xff0c;再加上碳素钢的桌体框架&#xff0c;整体非常有质感…

分享一个引起极度舒适的工作桌面

干净整洁的桌面或许不能带给你工作效率的提升&#xff0c;但一定会给你带来愉悦的心情。长期码字一定需要一个升降桌&#xff0c;可自由地调节高度&#xff0c;以保证舒适的坐姿和灵活的视角。另外坐久了&#xff0c;累了还能站立工作一会儿。有了外显之后&#xff0c;如果不需…

canvas绘制多边形

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>canvas绘制多边形</title> </head> <body> <canvas id"canvas" style"border: 1px solid darkcyan;" width…

ehcache rmi_EhCache复制:RMI与JGroups

ehcache rmi最近&#xff0c;我正在研究一种需要复制缓存的产品。 缓存提供程序已经确定-EhCache&#xff0c;剩下的就是有关传输的问题。 哪一个是最佳选择&#xff1f; 这里的最佳选择是指性能更好的选择。 仅在两个可用传输之间进行了性能评估-JGroups和RMI&#xff0c;对其…

Element Table 可以实现哪些常见的有用的功能

最近项目中频繁使用 table 功能&#xff0c;因为 UI 框架使用的又是 Element UI&#xff0c;于是总结下在 Element 下 el-table 组件使用技巧。1.行背景色table 组件提供了 row-style 属性&#xff0c;说明&#xff1a;行的 style 的回调方法&#xff0c;也可以使用一个固定的 …

如果在这样的环境中写代码,会不会很高效

桌面环境分享系列又来了。我会把平时看到的好的桌面布置分享给大家&#xff0c;帮助大家在桌面整理和打造方面提供一些新的想法和创意。如何评价一个开发桌面的好坏&#xff0c;首先一定要清爽整洁&#xff0c;该有的家伙事儿一定要有。不是要看上去要有多高大上&#xff0c;重…

Vue 页面如何监听用户预览时间

最近的业务中涉及到这样一个需求&#xff0c;在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed&#xff0c;分别在其中加入开始计时和清除计时的逻辑&#xff0c;通过后台的接口上报对应…

一个追求高效的学习者手机里装有哪些APP?(转)

转载&#xff1a;http://www.jianshu.com/p/f568c8d8b6bb 1、录音软件-Recordium 参加活动&#xff0c;如果不想错过活动现场的经常片段&#xff0c;速记又来不及&#xff0c;那就选择录音吧。小六之前都使用录音笔&#xff0c;但是自从有了这个APP之后&#xff0c;在开会&…

spring social_Spring Social入门

spring social像我一样&#xff0c;无论是添加简单的Facebook“赞”按钮&#xff0c;一大堆“共享”按钮还是显示时间轴信息&#xff0c;您都不会注意到当前对应用程序“社交化”的热衷。 每个人都在做这件事&#xff0c;包括Spring的家伙&#xff0c;事实上&#xff0c;他们提…

Vue 页面如何利用生命周期函数监听用户预览时长

最近的业务中涉及到这样一个需求&#xff0c;在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed&#xff0c;分别在其中加入开始计时和清除计时的逻辑&#xff0c;通过后台的接口上报对应…

项目中的富文本编辑器该如何选择?

项目中经常需要用到富文本编辑器的时候&#xff0c;而常见的富文本编辑器都有哪些&#xff1f;该如何选择&#xff1f; 先看看市面上都有哪些可用的富文本编辑器&#xff1a; TinyMCE&#xff08;插件式的&#xff0c;支持 Vue&#xff0c;React&#xff0c;Angular 框架&…

根据自己的博客数据统计国内IT人群

装上百度统计有一段时间了&#xff0c;今天突然找出报表看看&#xff0c;发现一个很有意思的事情。访问来源TOP5依次是&#xff1a;北京&#xff0c;上海&#xff0c;深圳&#xff0c;杭州&#xff0c;广州 虽然大部分文章都是当时特别白的时候记录下来的遇到过的问题&#xff…

程序员的工作周报该怎么写?

大多数公司都有写周报的要求&#xff0c;为什么要写周报&#xff1f;很多流于形式的周报&#xff0c;会让员工感到厌烦。特别是程序员&#xff0c;你让他写代码可以&#xff0c;写这种篇幅稍微大点的文字&#xff0c;简直要了他的命。周报作为一种文字载体&#xff0c;是下级向…

一个快速生成元素背景的 React 组件

在开发过程中&#xff0c;我们经常会遇到使用背景的地方&#xff0c;比如登录页面&#xff0c;用户信息页面&#xff0c;封面图…… 寻找契合业务主题的背景十分耗费精力&#xff0c;总觉得做的背景不合适&#xff0c;如果直接用图片呢&#xff0c;逻辑是比较简单&#xff0c;但…

python之路_前端基础之Bootstrap 组件

文档内容参考地址&#xff1a;http://v3.bootcss.com/components/ 一、图标 如下例&#xff0c;Star文本前有一个空格&#xff1a; <button type"button" class"btn btn-default btn-lg"><span class"glyphicon glyphicon-star" aria-h…

Java核心技术 卷1 多线程----线程安全的集合(4)

如果多线程要并发的修改一个数据结构&#xff0c;例如散列表&#xff0c;那么很容易会破坏这个数据结构。一个线程可能要开始向表中插入一个新元素。假定在调整散列表各个桶之间的链接关系的过程中&#xff0c;被剥夺了控制权。如果另一个线程也开始遍历同一个链表&#xff0c;…

如何快速实现 Wordpress 博客域名更换?

如题&#xff0c;如何快速更换使用 Wordpress 搭建的网站、博客的域名&#xff0c;除了在域名服务商那更换域名的解析和 web服务器端的配置外&#xff0c;还应该从数据库端做些什么&#xff1f;熟悉 Wordpress 的用户都知道在 Wordpress 后台&#xff0c;设置 --> 常规 里有…

浮动—春联(文字竖直排列)

<div id"main"><div class"top">李白</div><div class"left">明月几时有</div><div class"right">把酒问青天</div> </div> 1 #main{2 height: 540px;3 …

了解下广告计费模式CPC、CPA和CPM

目前各大广告平台最常见的广告计费模式分别有CPC、CPA、CPM。例如知乎、头条、百度、腾讯等各类平台投放广告&#xff0c;基本都离不开这几种广告计费方式。由于博客流量日渐见好&#xff0c;最近也申请了谷歌的广告的流量主&#xff0c;所以有必要了解下这几种广告模式&#x…

JUnit 5 –设置

2015年11月&#xff0c; JUnit Lambda团队展示了他们的原型 。 此后&#xff0c;该项目更名为JUnit 5&#xff0c;并于2016年2月发布了Alpha版本。我们将在一系列简短文章中对其进行探讨&#xff1a; 设定 基本 建筑 条件 注射 … 本章讨论JUnit 5的设置&#xff0c;以便…