如何用Taro+Vue3开发小程序？(练习)

如何使用Taro-Vue3开发小程序？下面文章介绍使用Taro-Vue3开发微信小程序的方法。希望对你有帮助！

微信小程序是基于微信的应用，其本质是混合技术的应用。Hybrid App是一个混合模式的移动应用程序，所以它类似于H5，但它比H5具有许多原生功能，例如调用位置信息和摄像头。

小程序的开发方式和H5非常相似，同样使用JavaScript、HTML和CSS语言。

所以小程序开发可以说是一个前端工程师必须掌握的技能。

原生小程序的开发有一定的学习成本。现在市面上有很多开发小程序的第三方多终端框架。如果不是追求极致的性能和稳定性，就不要使用原生小程序进行开发。开发效率太低。

在第三方多终端框架中，taro和uni-app应用最为广泛。一般来说，团队在做技术选型的时候，用的是react，taro，vue，uni-app。两者没什么区别，都挺好用的。

但是很多开发者可能不知道taro3.0以上支持使用vue。本文将介绍如何使用Taro-Vue3开发微信小程序。

我根据网上的资料完成了这个项目的建设后，就用这个项目开发了一个小程序。开发体验真的超越了我过去开发过的所有项目，非常丝滑(可能是我第一次写vue3的脚本设置，用起来真的很舒服)。

可以直接访问这个项目的github地址进行克隆使用。

目标是集成vue3，开发和集成使用脚本设置语法的Typescript代码检查和格式优化，管理小程序的全局状态，分包配置样式包，兼容刘海儿屏幕和其他样式问题。http方法包主要是技术栈Taro 3 vue 3 typescriptnutuipiniavue 3。刚发布的时候，因为没有合适的ui框架支持，直接打消了我学习Vue3的热情。直到现在，quasar、element-plus、ant-design-vue等优秀框架已经陆续支持vue3，很多vue3项目已经在生产环境中使用，才发现大家真的都用上了vue3。

比如我们公司隔壁的项目组，改造工程就用到了vue3。这时候我才意识到，我学vue3有点晚了(温馨提示:前端真的太卷帙浩繁了)

NutUI是个JD。COM风格的移动组件库，支持在小程序平台H5上使用Vue语言编写应用，帮助RD人员提高开发效率和体验。

我是从太郎的文献中知道NutUI的。taro官方推荐使用NutUI进行开发。他们似乎都来自JD.COM的同一个开发团队。我试用了一下，体验很好。

Pinia是Vue的状态管理库，类似于Vuex，是Vue的另一种状态管理方案，支持Vue2和Vue3。

我第一次接触前端状态管理工具是刚实习的时候公司的一个后端管理系统。我用了dva，简直是折磨，差点直接劝阻了我。后来慢慢熟悉了，但是不管用redux还是vuex，还是觉得写起来很麻烦。

这次我试着用了Pinia，用起来真的很舒服，直观，易学。有点类似于反冲，但是没有反冲那么多概念和API。主体非常流线型，很好用。皮尼亚快速入门

vscode要安装的插件EslintPrettiervolar和vetur是一样的，volar是vue的插件，但是和vetur不同的是，volar提供了更强大的功能。

手掌介绍

在设置项目架构初始化项目之前，需要安装taro。请参考taro文档来完成Taro安装。

使用命令创建模板项目:

taro init myApp

安装Cli进行构造等操作，然后启动项目，会生成一个dist目录。

纱线添加@tarojs/cliyarn dev:weapp

Hello world出现，项目运行成功！

设置代码规格，代码规格，ESlint，代码格式，pretiter，提交前检查。husky个人认为eslint+appearlier足以应对大部分前端代码规范问题，而且配置简单，有特殊要求也可以配置。

安装依赖性

yarn add @ vue/eslint -config -pretier @ vue/eslint -config -typescript eslint -plugin -pretier vue -tschusky -d设置代码规范和格式规则。

. eslintrc.js

module.exports = { root: true，env: { node: true， # 39；vue/setup -编译器-宏 # 39；:true }，扩展:

说实话，配置起来还是有点麻烦，不过按照官网文档的说明来配，不踩坑还是可以的。

如果小程序的主包多于2M，将无法预览真机。为了提前准备，一开始就分包出去了。例如，以下applet的配置分为四个包。

应用程序配置文件

页数:

使用脚本设置语法封装applet页面生命周期方法hooks/life.ts。

从 # 39；导入{ getCurrentInstance };@ tarojs/taro # 39；从 # 39；导入{ onMounted };vue # 39const Current = getCurrentInstance()导出函数useDidShow(callback){ on mounted(callback)Current？。佩奇？。昂秀 (Current . page . on show = callback)}导出函数usepulldownresh(callback){ Current？。佩奇？。onPullDownRefresh (current . page . onpulldownrefresh = callback)}使用

从 # 39；导入{ useDidShow };@/挂钩/生活 # 39；useDidShow(()= gt；{//console . log( # 39；昂秀 # 39；)})安装Pinia进行状态管理Yarn添加PiniaYarn添加Taro-Plugin-Pinia项目配置文件config/index.js配置:

插件:

所需的文件代码如下:

商店/授权

从 # 39；导入{ defineStore };皮尼亚 # 39；接口UserInfoProp {昵称:string avatar URL:string } const use auth = defineStore({ id: # 39；authInfo # 39，状态:()= gt({ userInfo: {昵称: # 39；'，avatar URL: # 39；'}、isLogin: false })、操作:{ login() { this.isLogin = true }、logout() { this.isLogin = false }、set userInfo(userInfo:userInfo prop){ this . userInfo = userInfo } } })导出{ useAuth }商店/索引. ts

从 # 39；导入{ createPinia };皮尼亚 # 39；从 # 39；导入{ useAuth };。/auth # 39；export const store = create pinia()const store obj = { auth:use auth }//以useStore的形式封装，一看就知道是商店的数据。导出函数use store(key:string){ return store obj[key]()}个人中心index.vue

lt模板 gt ltmain v-if = ；isLogin gt ltuser-info /> lt/main gt； lt主v-else gt； ltnut -按钮类型= 主要 @ click = handleLogin gt微信一键登录

lt模板 gt lt文章 gt ltnut -头像大小= 大号 :icon = userInfo.avatarUrl gt lt/nut -avatar gt； ltspan class = 省略号名称 gt{ { userInfo.nickName } } lt/spangt。 lt/article gt； lt/template gt； lt脚本设置 gt从 # 39；进口芋头；@ tarojs/taro # 39；从 # 39；导入{ computed }vue # 39从 # 39；导入{ useStore };@/stores # 39；const auth = use store( # 39；auth # 39)const userInfo = computed(()= gt；auth . userinfo) lt；/script gt；总的来说，皮尼亚很简洁，我很喜欢这种react hooks的写法。

该方法请求封装http.ts

//封装axios的请求，返回重新封装的数据格式。//错误的统一处理从 # 39；导入{HttpResponse};@/common/interface # 39；从 # 39；进口芋头；@ tarojs/taro # 39；从 # 39；导入publicConfig@/config/index # 39；从 # 39；导入axios，{ AxiosInstance，AxiosRequestConfig，AxiosResponse，Canceler}axios -迷你程序 # 39；从 # 39；导入错误句柄；../common/error handle # 39；const CancelToken = axios。CancelTokenclass http request { private base URL:string private pending:Record lt；字符串，取消器 gt构造函数(base URL:string){ this . base URL = base URL this . pending = { } }//Get axios configuration getInsideConfig(){ const config = { base URL:this . base URL，headers:{ # 39；内容-类型 # 39；: '应用/JSON；charset = ut F-8 # 39；}，time out:10000 } return config } remove pending(key:string，is request = false){ if(this . pending[key] ； is request){ this . pending[key]( # 39；取消重复的请求 # 39；)} delete this.pending[key]} //设置拦截器拦截器(instance:axioinstance){ instance . interceptors . request . use(config = >；{ console . log( # 39；配置: gt gt'，config)let is public = false public config . public path . map(path = gt；{ is public = is public | | path . test(config . URL | | # 39；')})const token = taro . getstoragesync( # 39；token # 39)如果(！isPublic token){ config . headers . authorization = # 39；来人 # 39；+token } const key = config . URL+ # 39； '+config . method this . remove pending(key，true)config . cancel token = new cancel token(c = gt；{ this . pending[key]= c })return config }，err = gt{ error handle(err)return promise . reject(err)})//interceptor instance . interceptors . response . use(RES = >；{ const key = RES . config . URL+ # 39； '+RES . config . method this . remove pending(key)if(RES . status = = = 200){ return promise . resolve(RES . data)} else { return promise . reject(RES)} }，err = gt{ error handle(err)return promise . reject(err)} }//创建实例请求(options:axiosrequestconfig){ const instance = axios . Create()const new options = object . assign(this . getinsideconfig()，options)this . interceptors(instance)返回实例(newOptions) } get(url: string，config？:AxiosRequestConfig):Promise lt；AxiosResponse gt|承诺 ltHttpResponse gt{ const options = object . assign({ method: # 39；获取 # 39；，url: url }，config)返回this . request(options)} post(URL:string，data？:未知):承诺 ltAxiosResponse gt|承诺 ltHttpResponse gt{返回this . request({ method: # 39；邮政 # 39；，url: url，data:data })} }导出默认HttpRequestrequest.ts

从 # 39；导入HttpRequest。/http # 39；从 # 39；导入配置；@/config/index # 39；const base URL = process . ENV . node _ ENV = = = # 39；发展 # 39；？config . base URL . dev:config . base URL . pro const request = new http request(base URL)导出默认请求以获取图书列表和图书详情为例。

API/book . ts

导入请求来自 # 39；../request # 39；导出函数getBookList(){ return request . get( # 39；books/get booklist # 39；)}导出函数getbook detail(id:number){ return request . post( # 39；books/getBookDetail # 39；，{id })}请求方法封装还是用axios，只是用了axios-miniprogram，和web端基本一致。http.js文件中引用了太多模块，本文没有列出。可以直接访问这个项目的github地址查看。

风格包装iPhoneX底部横线适配

assets/styles/common.scss

. safe -area -bottom { padding -bottom:常量(safe -area -inset -bottom)；padding-bottom: env(安全-区域-插入-底部)；}刘海儿屏幕改编

资产/风格/发际线. scss

@mixin发际线-common(){ position:absolute；box -大小调整:border -box；内容: # 39；'；指针-事件:无；}@mixin发丝(){ @include发丝-common()；顶:-50%；右:-50%；底层:-50%；左:-50%；边框:0实线# eaeaea变换:缩放(0.5)；}@mixin发际线-top($color，$left: 0，$right: 0) { @include发际线-common()；top:0；右:$右；left:$ left；border -top:1px solid $ color；变换:scaleY(0.5)；}@mixin发丝-bottom($color，$left: 0，$right: 0) { @include发丝-common()；右:$右；底部:0；left:$ left；border -bottom:1px solid $ color；变换:scaleY(0.5)；}[class * = # 39；van-发际线 # 39；]{ ；*在{ @include发际线()之后；} } . van -发线{ ， --顶 --左。--右。--底部。--环绕。--top-bottom {位置:相对；} --top::after { border -top -width:1px；} --left::after { border -left -width:1px；} --right::after { border -right -width:1px；} --bottom::after { border -bottom -width:1px；} ， -未设置。--top -bottom::after { border -width:1px 0；} } --环绕::after { border -width:1px；}}多行文字省略。

资产/样式/省略号. scss

@ mixin multi -ellipsis($ lines){ display:-WebKit -box；溢出:隐藏；text -溢出:省略号；-WebKit -line -cl:$ lines；-webkit-box-orient:垂直；} @ mixin ellipsis(){ overflow:hidden；white -space:nowrap；text -溢出:省略号；}.省略号{ @include省略号()；} . multi -ellipsis --L2 { @ include multi -省略号(2)；} . multi -ellipsis --L3 { @ include multi -省略号(3)；}综上，Taro+Vue3的项目建设终于完成了。强烈建议直接访问项目github地址克隆使用。还有一些配置细节，本文无法一一列举，在项目中探究吧！

如果我的文章能帮到你，那将是我的荣幸！

【相关学习推荐:小程序开发教程】以上就是如何使用Taro+Vue3开发小程序？(练习)详情请多关注主机参考其他相关文章！

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

• vue3是什么时候出的（vue3正式发布了吗）？
• vue有几个组件(vue有哪些组件)？

本文由主机参考刊发，转载请注明：如何用Taro+Vue3开发小程序？(练习) https://zhujicankao.com/74878.html