【B站教程--文字笔记】零基础商城小程序项目1

64 阅读2分钟

这是跟着b站一个商城小程序视频教程敲的文字笔记。记笔记的目的除了自己以后看,还有想可以只看文字就做完一个项目。普通笔记感觉不够细,视频教程又太长,所有自己写吧。这个up我做毕设的时候就跟着他敲的,感觉很不错的。

视频教程链接:【毕设永远的神,零基础带你写一个商城小程序!】 www.bilibili.com/video/BV1DC…

毕设永远的热点题材,零基础带你写完一个商城小程序! 项目所用主要技术栈如下:

小程序端:WXML、WXSS、JS、TDesign

后端Nodejs:Nodejs、Express、MongoDB

后台管理系统:Vue、Vuex、VueRouter、Axios、ElementUI

下好微信开发者工具。先自己创建一个文件夹,然后点开开发者工具,新建一个项目,地址就选创建的那个文件夹,appid自己去注册一个,后端服务选不使用云服务,模板选js基础模板。 image.png

本教程用的TDesign。去它官网,基础组件选微信小程序。按快速开始的步骤一步步走。

image.png

image.png 要自己下好nodejs。复制npm那一行命令,在微信开发者工具的调试器这点终端,创建个新终端,把命令复制上去,按回车,等待下好。

npm i tdesign-miniprogram -S --production

image.png

按着官网讲的,构建npm。这里如果构建失败,可以上网找找原因,我在终端那输入npm init -y和npm i miniprogram-sm-crypto之后就可以构建了,构建完除了给miniprogram_npm文件夹。最好构建完了重启一下。

image.png

image.png

接着跟着官网走。

image.png image.png

tsconfig那步跳过(本次不用ts)。接下来就是引入了,引入了才能使用组件,可以在每个页面(index.json)加引入,也可以在全局(app.json)加。下面是全局。 图例是加button按钮

image.png

找个页面试一下看看成不成功。(.wxml里面加t-button的标签看看能不能加button)

image.png

ok,引入成功。很方便吧,用给t-button就能弄出给按钮,样式都写好了。