商场微信小程序（一）——开发环境建设、小程序结构和主页完成
微信小程序开发
小程序开发
浏览：667 次
这一系列文章记录了学习微信小程序的过程。这个教程来自一位黑马程序员，我只是用文字记录下来作为提醒。
准备：
安装微信小程序开发工具
安装VScode和以下插件：
在此处插入图片描述
描述了每个插件的功能。让我们谈谈轻松轻松。因为微信小程序不支持较少的语法，
为了便于开发，我们不直接编写微信样式文件，而是使用插件从较少的语法自动生成wxss样式。该插件添加了以下设置：
“less.compile”：{
“outExt”：“.wxss”，
},
小程序目录：
在此处插入图片描述
组件-存储用户定义的组件
图标-用于存储小程序的图标（主要是底部的选项卡）
Lib—存储使用的第三方库
页面-小程序页面
请求——封装请求
样式--存储公共样式
Utils——存储一些工具类
页面结构
“页面/索引/索引”，
“页面/类别/索引”，
“pages/goods_list/index”，
“pages/goods_detail/index”，
“页面/购物车/索引”，
“页面/收藏/索引”，
“页面/订单/索引”，
“页面/搜索/索引”，
“页面/用户/索引”，
“页面/反馈/索引”，
“页面/登录/索引”，
“pages/auth/index”，
“页面/支付/索引”
它们是主页、类别页面、产品列表页面、产品详细信息页面、购物车、收藏夹页面、订单页面、搜索页面、用户中心、反馈、登录、验证和付款页面。
使用微信小程序开发工具在app.json中快速设置各种页面和底部导航选项卡：
{
“页面”：[
“页面/索引/索引”，
“页面/类别/索引”，
“pages/goods_list/index”，
“pages/goods_detail/index”，
“页面/购物车/索引”，
“页面/收藏/索引”，
“页面/顺序/索引”，
“页面/搜索/索引”，
“页面/用户/索引”，
“页面/反馈/索引”，
“页面/登录/索引”，
“pages/auth/index”，
“页面/支付/索引”
],
“窗口”：{
“backgroundTextStyle”：“浅”，
“navigationBarBackgroundColor”：“#eb4450”，
“NavigationBarTitleText”：“黑马游狗”，
“navigationBarTextStyle”：“白色”
},
“style”：“v2”，
“sitemapLocation”：“sitemap.json”，
“选项卡栏”：{
“颜色”：“#999”，
“selectedColor”：“#ff2d4a”，
“backgroundColor”：“$fafafa”，
“位置”：“底部”，
“borderStyle”：“黑色”，
“列表”：[{
“pagePath”：“pages/index/index”，
“文本”：“主页”，
“iconPath”：“./icons/home.png”，
“selectedIconPath”：“./icons/home-o.png”
},
{
“pagePath”：“页面/类别/索引”，
“文本”：“分类”，
“iconPath”：“./icons/category.png”，
“selectedIconPath”：“./icons/category-o.png”
},
{
“pagePath”：“页面/购物车/索引”，
“文本”：“购物车”，
“iconPath”：“./icons/cart.png”，
“selectedIconPath”：“./icons/cart-o.png”
},
{
“pagePath”：“pages/user/index”，
“文本”：“我的”，
“iconPath”：“./icons/my.png”，
“selectedIconPath”：“./icons/my-o.png”
}
]
}
}
主页主要由四个部分组成：搜索框、幻灯片、分类导航和楼层导航，如下所示：
在此处插入图片描述
新建搜索组件
创建以下目录组件SearchInput，并创建名为SearchInput的组件，
[图像上传失败…（Image-a18811-1601911666095）]
关键代码如下：
搜索输入.less
.search_输入{
高度：90rpx；
填充：10rpx；
背景色：var（--themeColor）；
导航员{
高度：100%；
显示器：柔性；
对齐内容：居中；
对齐项目：居中；
背景色：#ffffff；
边界半径：15rpx；
列：#666；
}
}
搜索输入.wxml
使用组件
使用主索引中的组件
索引.json
{
“使用组件”：{
“SearchInput”：“../../components/SearchInput/SearchInput”
