【开发】MBTI 答题小程序开发笔记-1

最近在做一个简单的 MBTI 答题小程序开发，在这里做一些笔记。

用到的框架是 Taro，可以用 npm 下载。下载 Taro 遇到的问题解决传送门：【Taro】报错-‘taro‘ 不是内部或外部命令，也不是可运行的程序

1 创建项目

在小程序项目文件夹下输入cmd，

弹出 cmd 之后运行：

git init

即可便捷地将项目使用 git 托管。

然后用 Taro 的脚手架自动搭建项目，运行 init [项目名称]。这里我的项目名称是 mbti-test-mini

然后根据自己项目的需要来创建 taro-ui 模板的兼容性很好，所以这里选择它。

创建好之后用 WebStorm 等软件打开项目。这时候自动运行的 npm install 可能会报错，解决方法传送门：【npm】WebStrom 中加载 npm 依赖失败的错误处理

总之遇到报错不要慌，搜/问 AI 就完事了。

2 运行测试和预览

然后我们要做的是微信小程序，就要按下面这个小三角运行试试看，能跑起来就打开微信开发者工具预览一下页面。

打开我们的程序文件夹，导入项目。

出现下面红框里的页面就是成功了

然后稍微改动一下文本什么的，重新编译一下看看能不能刷新，上次创建的时候莫名其妙改了不起效果，重新创建了才行。

2.1 组件的引入和使用

到 Taro UI 官网 ，我们把 Taro UI 全局引入到 app.ts

然后随便复制一个组件到 index.tsx 看下效果，我放了一个徽标和几个按钮进去，显示有效果。

2.2 小程序开发小技巧

在 app.config.ts 中更改pages的顺序，把目前要调整的页面放到前面，就可以方便地预览效果了。

3 实现页面跳转

可以直接去官方文档搜跳转

写一个 onClick 粘贴到 Button 里面即可。

以上是基础内容，先写到这里。