小程序开发

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

编辑时间:2019-08-24 15:30  浏览次数:浏览次数
摘要:在做微信小程序项目的开发时,一般情况下用的是wepy, 风格跟vue差不多,整体上,还算稳定,开发起来比原生的效率要高一点。
在做微信小程序项目的开发时,一般情况下用的是wepy, 风格跟vue差不多,整体上,还算稳定,开发起来比原生的效率要高一点;很多人也知道,mpvue就是用vue搭建的,但始终觉得,失去了路由的vue,就像失去了灵魂;虽然接下来要给大家安利的框架,也貌似失去了该灵魂- taro框架( Taro 是一套遵循React 语法规范的 多端开发 解决方案。)
一:安装 Taro 开发工具 @tarojs/cli npminstall -g@tarojs/cli 
二:使用命令创建模板项目 taroinit taro-react-mini-program
Taro框架开发微信小程序可以根据自己的需要,选择是否使用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文件,就这样,我们将大致需要的配置文件都配置好了;看看效果: 当有不规范的代码提交的时候。
Taro框架开发微信小程序 把所有问题都解决之后提交,当然tslint以及其他的一些配置都是自定义的,可以自己配置。觉得麻烦的可以根据自己的“口味”配置项目。
Taro框架开发微信小程序 然后我们就可以愉快的开发我们的项目,运行npm run dev:weapp,打开我们的小程序。
Taro框架开发微信小程序 很多人反馈用原生的 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/opertion/xcx1885.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
010-69759765186-1139-1767