乐商网_商业资讯网站
您当前的位置 : 乐商网  >  娱乐
小程序开发神兵利器-Taro实战-01
2020-04-04 13:43:35 来源:互联网 阅读:-

写在前面

这是一系列教程性质的实战演示,我希望通过这这个项目能让更多的同学理解什么是小程序,如何从0开始去完成一个商业性质的小程序项目。这个小程序的最终效果是一个群工具,目前第一个基础版本已经发布到了微信小程序,名字叫 “攒局” 有兴趣的同学可以去微信上搜索一下看看。由于我个人的美术功底比较差,所以界面比较粗糙,大家对这个产品有什么意见可以在下方留言。我会在后续的文章中逐步和大家分享我是如何一步步实现这个项目的。

技术栈

  • 小程序端 taro, ts, mobx
  • 服务器端 nodejs, ts, koa, sequelize, mysql

以上这些技术栈原则上来说我在项目中会直接使用其用法,有什么不明白的可以给我留言哈,我会根据留言情况看看是否给大家单个拿出来单个讲用法

工具

  • 微信开发者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  • vscode: https://code.visualstudio.com/
    • eslint
    • prettier
  • node: https://nodejs.org/en/
    • npm5.2+
  • yarn: https://yarnpkg.com/

项目

创建项目

用taro的官方cli工具生成项目, 由于我们可能不止一个taro项目所以为了规避版本问题,建议大家使用npx的方式初始化项目,不要在全局安装cli工具。


npx @tarojs/cli init cj-miniapp# Taro即将创建一个新项目!# Need help? Go and open issue: https://github.com/NervJS/taro/issues/new# ✔ 拉取远程模板仓库成功!# ? 请输入项目介绍! 攒局# ? 是否需要使用 TypeScript ? Yes# ? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass# ? 请选择模板 mobx

等待执行完成后我们就能看到新生成的项目文件夹——cj-miniapp,进入之后目录结构如下:


├── config #构建配置文件夹│ ├── dev.js│ ├── index.js│ └── prod.js├── global.d.ts #ts声明文件├── node_modules # 依赖模块├── package.json├── project.config.json├── src #工作目录│ ├── app.scss│ ├── app.tsx│ ├── index.html│ ├── pages│ └── store├── tsconfig.json└── yarn.lock

到这里我们已经有了一个基础项目结构,然后把整个项目添加到git代码库中方便管理后续的版本。

由于前文我们没有在全局安装cli工具这里运行整个项目之前我们需要在项目中安装@tarojs/cli 才能顺利启动整个项目

yarn add @tarojs/cli -D #添加cliyarn dev:weapp #启动项目

编译完成后我们打开微信开发者工具,导入项


小程序开发神兵利器-Taro实战-01

填写AppID,没有小程序的同学在学习阶段也可以先选择使用测试号,完成后点击导入,我们就可以看到我们的第一个项目成功运行起来了


小程序开发神兵利器-Taro实战-01

按照国际惯例,我们肯定需要将这个页面改成helloworld。打开vscode,导入项目


小程序开发神兵利器-Taro实战-01


小程序开发神兵利器-Taro实战-01

至此我们已经成功运行了我们的第一个小程序。

从下一章开始我们将会改造一下我们的项目,并正式的开始我们小程序的开发。

推荐阅读:学习app推荐

频道推荐
  • 水果捞 做法简单 规格比普通水果盘高雅 色彩纷呈 谢谢转发
    水果捞 做法简单 规格比普通水果盘高雅 色彩

    用料西瓜 菠萝、香橙、荔枝、火龙果、香蕉、油桃、火龙果、芒果、猕猴桃适量调料冰糖10克牛奶200毫升淡奶油100毫升水适量水果捞的做法1.将各种水果洗净晾干或剥...

    2020-02-12
  • 鸡翅的101种吃法,灵魂美食,蒜香炸鸡翅
    鸡翅的101种吃法,灵魂美食,蒜香炸鸡翅

    大家好,我是柚子,大家周末快乐啊,我发现啊,我的粉丝宝宝们都喜欢我发的香辣口味重的美食,哈哈哈,我也喜欢吃,因为我是四川人啊,那今天也不废话啦,给你们带来一道灵...

    2020-02-12
  • 百吃不厌的腌萝卜
    百吃不厌的腌萝卜

    用料白萝卜 1根蒜片 根据个人适量姜片 适量小米辣 少许白醋 3小杯生抽 5小杯白糖 2勺白萝卜,切块切成连刀片,放腌,拌匀,约半小时准备蒜片,姜片,小米辣准备...

    2020-02-12
  • 六道没有肉的菜、味道比有肉更香,更有营养欢迎关注收藏
    六道没有肉的菜、味道比有肉更香,更有营养欢迎

    蒜蓉娃娃菜材料::娃娃菜、粉丝、蒜蓉、红椒、海鲜酱油、鸡粉、盐、做法:1、洗净娃娃菜叶,撕成大片叶状,放盘子中。2、煮沸半锅水,开大火将娃娃菜隔水蒸五六分钟左右...

    2020-02-12
  • 了解饮食文化——火锅
    了解饮食文化——火锅

    冬天来了,温度骤降,此刻大家应该都喜欢吃一种美食,那就是火锅啦!不管是自己在家准备还是出去火锅店,吃着辣辣的火锅,哈着冰啤酒或者冰可乐,人生不要太圆满呀!火锅,...

    2020-02-12
  • 不知道明天吃什么,分享六道下饭小炒菜,每天下班炒一个
    不知道明天吃什么,分享六道下饭小炒菜,每天下

    上班族们每天除了工作上的烦恼,还有就是在吃上面的烦恼。在单位上就吃一顿,剩下的要自己解决,下班后就烦恼买什么菜,吃什么好?今天就分享六道下饭的小炒菜,都是非常下...

    2020-02-12