置顶 Taro教程之开发一款相亲类微信小程序-开发环境搭建
发布于 1 年前 作者 JavaBird 979 次浏览 最后一次编辑是 10 个月前 来自 分享

目前微信小程序的开发者大概有几百万的样子(老夫没有数过),在这几百万当中,有的是使用原生小程序语法开发的,有的是使用第三方的转编译框架进行开发的,比如 mpvue(某团),taro(某东),其它的一些不知名的框架就不列举了,据说某滴也开源了一款感兴趣的童鞋可以去了解一下。

上面说的都不是重点,重点是老夫一直是使用原生小程序语法进行开发。所以写这篇教程的时候,不知道是谁给老夫的勇气,大概是梁静茹吧!希望能支撑老夫将整个开发的过程完美呈现给各位童鞋面前。

为什么选择Taro?

因为老夫第一次接触的MVVM框架就是 React.js ,所以有一种莫名的亲切感,这只是其中一原因。 另一个原因是老夫看中 Taro 的多终端处理能力,请看以下官方介绍。

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。

不管官方吹嘘的有多牛逼,是骡子是马拉出来遛一遛!

项目结构

微信小程序的开发其实就是典型的前后端分离的具体表现,现在前端已经选择了 React.js (Taro),那么后端我们采用 PHP 提供 API接口。 这里API接口我们采用 Phalapi 提供接口数据服务,其实老夫更擅长的是 YII2 。 一般的小程序采用上述的项目结构基本上已经能够满足了,当然一些大数据量、有高并发场景的小程序,后端服务是相当复杂的,这里就不说了。

开发工具

工欲善其事必先利其器!这里老夫使用 vscode 进行小程序的开发,使用 phpstorm 进行 php 的开发。

项目结构

微信小程序的开发其实就是典型的前后端分离的具体表现,现在前端已经选择了 React.js (Taro),那么后端我们采用 PHP 提供 API接口。 这里API接口我们采用 Phalapi 提供接口数据服务,其实老夫更擅长的是 YII2 。 一般的小程序采用上述的项目结构基本上已经能够满足了,当然一些大数据量、有高并发场景的小程序,后端服务是相当复杂的,这里就不说了。

环境搭建

首先是 Taro 的环境的搭建,现在前端的很多项目都是基于 node.js 的 npm 进行包管理的,所以前提是安装 node.js,并且运行 npm 命令没有问题,由于一些众所周知的原因,一些开发包下载很慢,老夫一般使用 cnpm 进行包的安装,不懂的自行百度!

安装及使用

安装 Taro 开发工具 @tarojs/cli 使用 npm 或者 yarn 全局安装,或者直接使用npx

$ npm install -g [@tarojs](/user/tarojs)/cli
$ yarn global add [@tarojs](/user/tarojs)/cli

使用

使用命令创建模板项目 $ taro init myApp

微信小程序

选择微信小程序模式,需要自行下载并打开微信开发者工具,然后选择项目根目录进行预览。 微信小程序编译预览及打包(去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包)

# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp

项目实际代码如下:

QQ20181228-233758.png

通过 taro 命令创建好项目后,用 vscode 打开项目 Miai,vscode的终端下面运行命令 npm run dev:weapp

QQ20181228-234617.png

当项目跑起来后,通过微信的开发工具打开 Miai,就能看到小程序跑起来了

QQ20181228-235436.png

到目前为止,整个项目前期的开发环境都已经搭建好了。 如果在项目搭建过程中有问题,直接去 Taro 的官方查询结果即可。

搜索微信公众号:老夫撸代码 回复数字 1001 获取完整教程以及代码仓库地址

关注微信公众号:老夫撸代码

老夫撸代码


版权声明:未经授权,不得转载

回到顶部