赞
踩
该文章是学习黑马小程序时所做。
填入自己的appid
删除初始化项目无用代码
① app.json中,删除日志界面log,修改小程序标题
② 删除pages文件夹下的logs文件夹
③ 清空app.wxss中内容
④ 清空app.js中内容,使用wx-App
生成最基础界面模板
⑤ 清空index.wxml中代码
⑥ 清空index.wxss中内容
⑦ 清空index.js中代码,使用wx-Page初始化index.js中代码
⑧ 修改index.json中代码,单独修改首页标题
⑨ 删除util文件夹。
搭建项目目录结构
录名 | 作用 |
---|---|
styles | 存放公共样式 |
components | 存放组件 |
lib | 存放第三方库 |
utils | 自己的工具库 |
request | 自己的SKD |
⻚⾯名称 | 名称 |
---|---|
⾸⻚ | index |
分类⻚⾯ | category |
商品列表⻚⾯ | goods_list |
商品详情⻚⾯ | goods_detail |
购物⻋⻚⾯ | cart |
收藏⻚⾯ | collect |
订单⻚⾯ | order |
搜索⻚⾯ | search |
个⼈中⼼⻚⾯ | user |
意⻅反馈⻚⾯ | feedback |
登录⻚⾯ | login |
授权⻚⾯ | auth |
结算⻚⾯ | pay |
打开阿⾥巴巴字体图标 ⽹站
选择的图标
添加⾄项⽬
下载到本地,选择第二个Font Class,并在地址栏打开新地址,复制全部代码到项目中
将样式⽂件 由 css 修改为 wxss
⼩程序中引⼊,在全局app.wxss中引入,就可以在每个wxss中使用了
测试
界面调用主题颜色
在index.wxss中使用
小程序标题红底白字
在app.json中通过window设置
在这里将服务器接口域名加上,否则请求不到数据
使⽤tabbar 实现底部导航功能
使⽤⾃定义组件的⽅式 实现 头部搜索框
加载 轮播图 数据
① 请求数据
② 渲染数据
基础版本:
封装请求版本:
加载 导航 数据
加载 楼层 数据
https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
https://api-hmugo-web.itheima.net/api/public/v1/home/floordata
加载分类⻚⾯数据
接口数据关系映射
① 请求数据并构造数据
点击左侧菜单,右侧数据动态渲染
缓存
https://api-hmugo-web.itheima.net/api/public/v1/categories
es7的 async 号称是解决回调的最终⽅案
lib/runtime/runtime.js
,将代码拷⻉进去import regeneratorRuntime from '../../lib/runtime/runtime';
商品列表搜索
https://api-hmugo-web.itheima.net/api/public/v1/goods/search
https://api-hmugo-web.itheima.net/api/public/v1/goods/detail
https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch
无
获取预⽀付参数
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder
创建订单
https://api.zbztb.cn/api/public/v1/my/orders/create
更新订单状态
https://api.zbztb.cn/api/public/v1/my/orders/chkOrder
encryptedData,rawData,iv,signature
code
encryptedData,rawData,iv,signature code
token
和⽤⼾数据 rawData
存⼊本地存储https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin
创建订单
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create
查看订单支付状态
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder
历史订单查询
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all
this.selectComponent("#tabs");
https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all
+
可以选择本地图⽚,并且显⽰到⻚⾯上提交
可以上传图⽚到 接⼝ 地址 新浪图床 上https://www.muzijuping.com/Home/Index/UploadAction/
无
将wx-request封装为promise,参数通过params传递,并将结果通过resolve和reject传递出去
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。