专栏首页极乐技术社区干货 | Taro 开发微信小程序入门与实战

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

微信小程序是以微信为运行环境的一种应用,其实质是 Hybrid 技术的应用,Hybrid App 即混合模式移动应用介于 Web APP、Native APP 这两者之间的应用。与 H5 类似,但又比 H5 拥有很多原生的能力,比如摄像头、陀螺仪、NFC、调用位置信息等。小程序的原生开发方式用的也是 JavaScriptHTMLCSS 语言。

技术选型

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

如果你是 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 全局样式文件,但是这里就有可能,多个组件都引入全局,生成多份全局样式文件

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:csdn

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序一周报 | 小程序游戏类目开放测试 / 朋友圈小程序广告全量上线

    极乐君
  • 小程序一周报 | 小游戏扶持政策:月流水50万以下免抽成

    极乐君
  • 小程序如何实现多进程?从隔离角度出发,看完你就会懂!

    小程序这个名词相信大家已经不陌生了,继微信之后,阿里巴巴、百度、头条等大厂相继实现了自己的小程序。小程序是一种全新的开放能力,开发者能够快速开发出小程序并集成进...

    极乐君
  • JavaScript装饰者模式

    首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下,

    wfaceboss
  • 这个创业团队,凭什么比肩京东、美团,出现在微信的搜索框上?

    朝夕日历 Pro、群约小助手、朝夕万年历……关注知晓程序的朋友可能对这几个小程序都不会感到陌生。但是对出品这些优质小程序的团队,你可能却并不太了解。

    知晓君
  • 【TS】506- TypeScript 交叉类型

    TypeScript 交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

    pingan8787
  • 完善你的Laravel异常处理

    异常处理是编程中十分重要但也最容易被人忽视的语言特性,它为开发者提供了处理程序运行时错误的机制,对于程序设计来说正确的异常处理能够防止泄露程序自身细节给用户,给...

    KevinYan
  • 校长讲堂第八讲

    一个 C 程序可能有很多部分组成,它们被分别编译,并由一个通常称为链接器、链接编辑器或加载器的程序绑定到一起。由于编译器一次通常只能看到一个文件,因此它无法检测...

    聚沙成塔
  • go 接口

    平凡的学生族
  • 使用Swoole异步发送邮件

    最近做公司的一个管理系统,需要把每天的统计信息发送到领导的邮箱。由于使用SMTP协议发送邮件的速度太慢,所以只能异步发送。刚开始实现了一个基于php-reque...

    后端技术探索

扫码关注云+社区

领取腾讯云代金券