干货 | Taro 开发微信小程序入门与实战

• 2019 年 11 月 21 日
• 筆記

技术选型

如果追求极致的性能又没有多终端适配的需求，推荐使用小程序原生的开发方式来开发。

如果你是 Vue 开发者，但又不想过多的折腾，继续沿用 Vue 的开发方式来开发小程序，那么用 mpvue 将会是你的最明智的选择。同时也支持一些第三方 UI 库，这就给一些需要讲求速度的小程序开发者提供了便利。mpvue 2.0 在 微信小程序 的基础上增加了对 百度智能小程序、头条小程序 和 支付宝小程序 的支持。

对于 React 爱好者来说，Taro 将是你开发小程序的不二选择，Taro 是第一款用 React 语法写小程序的框架，一直在不断的迭代和快速的成长，官方团队还给开发者提供了 Taro-UI 库，同时支持将 微信小程序 转为 Taro 项目以及 Taro 代码与微信小程序代码混写

叨叨了这么多，回到分享的主题，下面将会详细介绍 如何使用 Taro 开发微信小程序

一：安装 Taro 开发工具 @tarojs/cli

二：使用命令创建模板项目

可以根据自己的需要，选择是否使用ts, sass或者less, 接着等安装好依赖，项目就构建完成；

框架的使用和注意事项，文档中有介绍，我这边主要写一些项目配置和踩过的坑;

这里需要先安装一些依赖

代码规范 .prettierrc

.prettierignore

样式规范：.stylelintrc.js

.stylelintignore

**/dist

.tslint.json

再加上自己配置一个.gitignore文件，就这样，我们将大致需要的配置文件都配置好了；看看效果：

当有不规范的代码提交的时候

把所有问题都解决之后提交，当然tslint以及其他的一些配置都是自定义的，可以自己配置。觉得麻烦的可以根据自己的“口味”配置项目。

然后我们就可以愉快的开发我们的项目，运行npm run dev:weapp,打开我们的小程序

很多人反馈用原生的 Taro.request或者用第三方axios等等做异步请求总会有错，我没亲测，但是自己用promise封装了方法, 在根目录src文件夹下创建utils文件夹， 在这里我简单的模拟微信授权登录，以及检测session是否过期，绑定用户的场景写一个大概例子，接口为虚构：

http.ts代码如下：

api.ts

index.ts (自定义公共处理接口文件)

最后在pages/index/index.tsx中引用就好了

整个框架的使用大致就是这样了，react的书法风格还是挺舒服的，如果习惯了vue的写法可能刚开始会不习惯，有兴趣的可以尝试尝试，下面再简单的把一些小技巧给补上：

一：图片以模块的方式的引入

使用ts搭建的项目，引入静态资源，比如图片，会提示找不到模块，这时候就必须将图片声明为一个模块：

在types目录的global.d.ts文件下:

declare module ‘*.png’ {   const img: any   export default img  }

二：动态添加style

<View style={{backgroundImage: `url(${bgImg})`}}></View>

三：动态添加class

四：this的指向问题

1）在 Taro 的页面和组件类中，this 指向的是 Taro 页面或组件的实例,如果我们要引用原生组件，需要使用到this的时候，如果如下引用：

Taro.createCanvasContext(canvasId, this.$scope)  wx.createLivePlayerContext(liveId, this.$scope)

错误：wx.createLivePlayerContext(liveId, this)这样引入是没有效果的，this并不是指向 wx.createLivePlayerContext.

(当前版本没有liveplayer的回调方法，所以直接用原生wx)

五：全局样式问题

全局原始app.scss 只会影响到页面级别的文件，组件的获取不到全局的样式，

可以在组件内部import 全局样式文件，但是这里就有可能，多个组件都引入全局，生成多份全局样式文件