请选择 进入手机版 | 继续访问电脑版

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

Taro  / 只看大图  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-2-18

跳转到指定楼层
写在前面

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

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

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

    微信开发者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlvscode: https://code.visualstudio.com/
      eslintprettier
    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-1.jpg

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




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

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




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




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

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

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

原文地址:https://www.toutiao.com/a6787615841992049164/
转播转播 分享淘帖
回复

使用道具

0

主题

67

帖子

140

积分

注册会员

Rank: 2

积分
140
祖国你在我心上 发表于 2020-2-18 18:42:15
弄不动了。小程序这边就是原生开发,后台用golang语言编写。主要就是websocket数据传输。
回复

使用道具 举报

0

主题

75

帖子

154

积分

注册会员

Rank: 2

积分
154
藏獒47 发表于 2020-2-18 18:42:51
转发了
回复

使用道具 举报

0

主题

87

帖子

184

积分

注册会员

Rank: 2

积分
184
乔峰之逆风痰 发表于 2020-2-18 18:43:02
转发了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则