微信小程序 -- 易购商城（学习记录）

第一阶段记录

恭喜拖延症晚期终于完成了一个界面~虽然接口都是教程给的，但也算是入手的第一个比较完整的小项目啦（除了大作业课设啥的），希望8月份能把这个小程序完全搞定鸭！
当当当，现在的效果图：

2020.8.10 周一

【学习内容】初始化页面样式
- 分区页面：首页、购物车、我的
- 其他页面：搜索
- logo：来自阿里巴巴矢量图库
- 搜索框跳转：api https://www.showdoc.com.cn/128719739414963
- 轮播图：高度自适应、宽度100%、mode、自属性autoplay等
- 换vscode主题：http://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai
小问题
- （已解决）接口访问不了。接口问题大部分是说你的小程序没有权限去访问这个接口。一种解决方法：是给不校验合法域名打上勾。但当项目需要上线时候，就必须要链接合法了，也就是第二种方法：把https这个链接添加到小程序的后台里。开发->开发设置->服务器域名…
- （已解决）发送异步请求获取轮播图数据时候，一旦代码比较臃肿，就很容易陷入异步请求的回调地域陷阱中，随着需求增加无限套娃。优化：可以通过es6的promise来解决这个问题。
- （暂未解决）弹幕说，以后腾讯地图定位都是需要接口和密钥的，还没开始做这个需求。
一些vscode里的快捷键
- 10rpx（padding:10rpx）
- bgc（background-color）
- Ctrl + /（注释）
一些翻译
- justify-content:center; 水平居中
- align-items:center; 垂直居中
- mode=“widthFix” 渲染模式，让图片的标签宽高和图片标签的内容都等比例发生变化

2020.8.11 周二

【学习内容】了解下ES6的promise
let
- 批量声明并赋值初始值。let变量不能重复声明也就是不会被污染，var可以重复声明是后面覆盖前面。
- let是块级作用域，只能在花括号中起作用。
- let不存在变量提升，先声明再使用。
- 不影响作用域链，本层级花括号中找不到，会到上一层级的花括号中找对应属性。
异步和同步
- 举个例子：普通B/S模式（同步）AJAX技术（异步）
  同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
  异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
- 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
  异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。
  所以，要我请你吃饭就用同步的方法，要请我吃饭就用异步的方法，这样你可以省钱。
- 举个例子打电话时同步发消息是异步
promise
- 基本使用
- 读取封装文件

2020.8.12 周三

【学习内容】分类导航
小问题
- （暂未解决）希望在vscode中能实现单行注释和多行注释的颜色区分，因为单行注释一般是不太去看的内容，多行注释用来给一个个区块做解释区分，所以想调成“单行注释灰色，多行注释绿色护眼高亮”，但试了很多主题都不太行，注释都只有comment一种。
- （已解决）less自动生成的是css和map文件，但wxml能和wxss同名文件链接而不是css文件，因此在不借助插件的情况下，需要将css文件中的内容拷贝到wxss文件中。

2020.8.19 周三

【学习内容】楼层套娃图
小问题
- （已解决）在做楼层这一块卡住了，总是出现一种情况，有图片占着位置，可以下滑，但是图片显示不出来。搁置了一周时间再回头看，发现是item-index写成了item-item，子图片要放在navigator标签里才能显示出来。
- （已解决）VScode如何让less文件自动保存后自动生成wxss文件：ctrl+shift+p --> settings.json --> “outExt”: “.wxss”
- （已解决）楼层中图片自适应，wxss数据部分是less自运算的，在index.wxml也需要更改下自适应，scaleToFill让图片拉伸满格。

微信小程序 -- 易购商城（学习记录）相关推荐

微信小程序--优购商城项目（1）
文章目录前言一.配置uni-app开发环境 1.开发工具--HBuilderX 2.新建uni-app项目 3.把项目运行到微信开发者工具 4.使用Git管理二.tarBar 1.创建 tabB ...
微信小程序--优购商城项目（4）
文章目录前言五.搜索 1.创建 search 分支 2.自定义搜索组件 (1)自定义 my-search 组件 (2) 通过自定义属性增强组件的通用性 (3)为自定义组件封装 click 事件 ( ...
微信小程序优购商城项目
这篇文章主要就是把我写的优购商城进行简单的说明,希望可以对大家有所帮助 1.先配置页面在app.json中设置所需要的页面路径 2.然后再封装我们需要的组件和wx.request wx.reques ...
微信小程序--优购商城项目（6）
文章目录前言七.商品详情 1.创建 goodsdetail 分支并添加编译模式 2.获取商品详情数据 3.渲染商品详情页的 UI 结构 (1)渲染轮播图区域 (2)实现轮播图预览效果 (3) 渲染 ...
微信小程序--优购商城项目（8）
文章目录前言九.购物车页面 1.商品列表区域 (1)渲染购物车商品列表的标题区域 (2)渲染商品列表区域的基本结构 (3) 为 my-goods 组件封装 radio 勾选状态 (4)为 my-g ...
微信小程序优购商城项目分析
商城项目分析首页页面布局,最上面是搜索框,搜索框下边是个轮播图,轮播图下面这个分类这一栏,再往下就是介绍,轮播图.分类.和下边的图片都是通过接口实现的.点击分类.秒杀拍.超市购.母婴品可以进入分类页 ...
基于微信小程序的球鞋商城系统的设计及实现
基于微信小程序的球鞋商城系统的设计及实现后台springboot 前台模块: 登录:用户进入商场微信小程序系统,登陆小程序. 编辑收货地址:用户增加收货地址界面与修改收货地址. 商品详情页面:用户可 ...
微信小程序之商用商城小程序
微信小程序之商用商城小程序 https://pan.baidu.com/s/1CdxrlV7GeRRmsT9UWEMtJg 码cygy 2. 用户端需求列表分类主要功能点功能特性描述首页搜索 ...
mysql基于微信小程序的化妆品商城系统设计与实现毕业设计源码041152
基于springboot微信小程序的化妆品商城系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户 ...

微信小程序 -- 易购商城（学习记录）

第一阶段记录

微信小程序 -- 易购商城（学习记录）相关推荐

最新文章

热门文章