使用Taro框架开发微信小程序

摘要:在做微信小程序项目的开发时，一般情况下用的是wepy, 风格跟vue差不多，整体上，还算稳定，开发起来比原生的效率要高一点。
在做微信小程序项目的开发时，一般情况下用的是wepy, 风格跟vue差不多，整体上，还算稳定，开发起来比原生的效率要高一点；很多人也知道，mpvue就是用vue搭建的，但始终觉得，失去了路由的vue，就像失去了灵魂；虽然接下来要给大家安利的框架，也貌似失去了该灵魂- taro框架（ Taro 是一套遵循React 语法规范的 多端开发 解决方案。）
一：安装 Taro 开发工具 @tarojs/cli npminstall -g@tarojs/cli 
二：使用命令创建模板项目 taroinit taro-react-mini-program
可以根据自己的需要，选择是否使用ts, sass或者less, 接着等安装好依赖，项目就构建完成； 三：项目目录结构 ├── dist 编译结果目录 ├── config 配置目录 | ├── dev.js 开发时配置 |├── index.js 默认配置 | └── prod.js 打包时配置 ├── src 源码目录 |├── pages 页面文件目录 | |├── index index页面目录 | || ├── index.js index页面逻辑 || |└── index.css index页面样式 | ├── app.css 项目总通用样式  |└── app.js 项目入口文件  └──
package.json 框架的使用和注意事项，文档中有介绍，我这边主要写一些项目配置和踩过的坑; 这里需要先安装一些依赖 npminstall tslint stylelint tslint-config-prettier -D  代码规范 .prettierrc { stylelintIntegration:true, tslintIntegration:true, tabWidth:2,singleQuote:true, semi:false } 样式规范： .stylelintrc.js module.exports= {  ignoreFiles: [\'**/*.md\',\'**/*.ts\',\'**/*.tsx\',\'**/*.js\']  } tslint.json { extends: [tslint:recommended,tslint-config-prettier], rules: { ordered-imports:false, object-literal-sort-keys:false,member-access:false, member-ordering:false, no-empty-interface:false, no-console: [true,warning], interface-name: [true,never-prefix], no-empty:false, quotemark: [true,single] //semicolon: [false], // 结尾比较分号 //trailing-comma: [false], // 结尾必须逗号 //requireForBlockBody:true, } } 接着配置git的提交commit提交验证，需要安装对应的依赖包。 再加上自己配置一个.gitignore文件，就这样，我们将大致需要的配置文件都配置好了；看看效果： 当有不规范的代码提交的时候。
把所有问题都解决之后提交，当然tslint以及其他的一些配置都是自定义的，可以自己配置。觉得麻烦的可以根据自己的“口味”配置项目。
然后我们就可以愉快的开发我们的项目，运行npm run dev:weapp,打开我们的小程序。
很多人反馈用原生的 Taro.request或者用第三方axios等等做异步请求总会有错，我没亲测，但是自己用promise封装了方法, 在根目录src文件夹下创建utils文件夹， 在这里我简单的模拟微信授权登录，以及检测session是否过期，绑定用户的场景写一个大概例子，接口为虚构： ├── utils  | ├── api.ts请求接口设置  | ├── http.tshttp公共请求文件 | └──index.ts api.ts importHttpfrom\'./http\' consthttp =newHttp() // 自动登录 consturl =\'xxxxx\' exportconstlogin =(data: object) =>http.post(url, data) index.ts (自定义公共处理接口文件) importTarofrom\'@tarojs/taro\' import{ login }from\'./api\' // 获取微信登录凭证 exportconstwxLogin =async() => { try{ constres =awaitTaro.login() returnres.code } catch(error) { console.log(\'微信获取临时凭着失败\') }  }exportconstuserLogin =async() => { try{ awaitTaro.checkSession() if(!Taro.getStorageSync(\'token\')) { thrownewError(\'本地没有缓存token\')  }  }catch(error) { constcode =awaitwxLogin() constloginRes: any =awaitlogin({ code // ...(其他参数) }) console.log(\'用户数据\', loginRes)  }  } 最后在pages/index/index.tsx中引用就好了 import{ userLogin }from\'../../utils/index\' .... asynccomponentDidMount() { awaituserLogin() }  
整个框架的使用大致就是这样了，react的书法风格还是挺舒服的，如果习惯了vue的写法可能刚开始会不习惯，有兴趣的可以尝试尝试，下面再简单的把一些小技巧给补上：
一：图片以模块的方式的引入 使用ts搭建的项目，引入静态资源，比如图片，会提示找不到模块，这时候就必须将图片声明为一个模块： 在types目录的global.d.ts文件下: declare module ‘*.png’ { const img: any export default img }
二：动态添加style  
三：动态添加class 1.0?’class-yes’: ’class-no\'}> 2.0?’class-yes’: ’class-no}`}> 四：this的指向问题 1）在 Taro 的页面和组件类中， this 指向的是 Taro 页面或组件的实例,如果我们要引用原生组件，需要使用到this的时候，如果如下引用： Taro.createCanvasContext(canvasId,this.$scope) wx.createLivePlayerContext(liveId,this.$scope) 错误：wx.createLivePlayerContext(liveId, this)这样引入是没有效果的，this并不是指向 wx.createLivePlayerContext.

本文地址：https://www.webbj.cn/operation/xcx1885.html