【项目实训——咖啡点单微信小程序】

一、项目目录结构

utlis:工具

app.js : 入口文件

app.json : 配置、键值对、主界面在第一个、放数据？

（"pages" : 有哪些界面、“windows” : ）

app.wxss : 全局的样式表

pages : 有几个文件夹表示有几个界面、并在app.js中声明

（index.wxml自带标签、index.wxss当前样式、index.json自已的配置、index.js页面逻辑）

网页三要素：HTML CSS JS

 

二、开发者工具

软件开发流程大致是什么

项目定位：前端的小程序（本地Json）

 

三、集成vant

界面跳转api：wx.navigateTo（确认跳转的界面已经声明和存在）

微信小程序安装Vant组件库-CSDN博客

 

四、

利用开发者文档工具

前后端数据请求：前端请求后端数据（发请求，接收响应） 后端请求数据库（接受请求，发出响应，预设接口） 数据库（和后端交互）

date.json用来暂时存放本来由后端提供的数据（模拟接口）

1. 在json文件所在的文件夹中，打开命令窗口
2. 输入命令 npm i json-server -g（npm指通过npm仓库下载、nmp包管理器）
3. 输入命令 json-server data.json --watch（监听json文件）
4. 运行成功，出现 http://localhost:3000/types （意味着我们可以通过访问此路径获取数据）

 

五、扒拉数据

1）.本地josn模拟后端

借鉴别人的项目，找到商品详情，里面的链接里有它自已的云端数据，

改掉它的格式，在浏览器里打开，选择原始数据

copy到本地端data.json数据里，右键格式化文档调整代码，换成自已的咖啡数据

2）.上传图片到免费的网站，实现本地云端调用

我自已使用的网站：ImgBB — 免费图片存取/上传图片

 

 

问题：

1.json-server : 无法加载文件xx\npm\json-server.ps1，因为在此系统上禁止运行脚本

这是powershell下，一是进入管理员模式，二是打开cmd（

json-server.cmd --watch data.json

/json文件保持一致）

 

2.校验这里勾选 不

 

3.Error: Type of "code" (number)  is not supported. Use objects or arrays of objects.

（翻译：不支持“代码”(数字)的类型。请使用对象或对象数组。）

（解释：在code后面不应该直接跟数字0而是应该跟一个Object对象或者是数组对象。）

 

 

快捷键

1.shift+[ 选中变量，给变量加｛｝

2.win+D 快速回桌面