小程序配置

最新推荐文章于 2024-07-26 10:15:33 发布

小白进化论~

最新推荐文章于 2024-07-26 10:15:33 发布

阅读量158

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/qq_29607677/article/details/118094838

版权

本文档详细介绍了微信小程序的开发流程，包括初始化项目、搭建目录结构、配置底部导航栏、引入字体图标以及解决常见报错问题。通过实例展示了如何创建首页、分类页、商品列表页等核心页面，并提供了关键代码示例。此外，还讨论了页面样式初始化和错误处理策略，为开发者提供了一份全面的小程序开发教程。

摘要由CSDN通过智能技术生成

新建小程序
清空无关代码
在app.json中，将日志界面logs删除
删除logs文件
清空app.wxss样式
将app.js清空，输入wx-app进行配置
清空index.wxml
配置view标签，添加页面文字
将index.wxss样式内容清空
index.js清空，输入wx-page配置
在index.json中通过navigationBarTitleText给页面添加标题
搭建目录结构
⽬录名作⽤
styles 存放公共样式
components 存放组件
lib 存放第三⽅库
utils ⾃⼰的帮助库
request ⾃⼰的接⼝帮助库
在app.json中搭建项目页面
⻚⾯名称名称
⾸⻚ index
分类⻚⾯ category
商品列表⻚⾯ goods_list
商品详情⻚⾯ goods_detail
购物⻋⻚⾯ cart
收藏⻚⾯ collect
订单⻚⾯ order
搜索⻚⾯ search
个⼈中⼼⻚⾯ user
意⻅反馈⻚⾯ feedback
登录⻚⾯ login
授权⻚⾯ auth
结算⻚⾯ pay
5.引入字体图标
在styles中创建iconfont.wxss文件夹，将拷贝代码粘贴进去，在app.wxss中通过@import进行配置通过class调用，调用方式：class=“iconfont 图标类名”
6.搭建底部导航栏
在根目录中创建icons文件加，放入图片，
在app.json中配置
“tabBar”: {
“color”: “#ddd”, //字体颜色
“selectedColor”: “#ff2d4a”, //选中时的字体颜色
“backgroundColor”: “#fafafa”, //背景颜色
“position”: “bottom”, //导航栏位置
“borderStyle”: “black”, //边框样式
“list”: [
{
“pagePath”: “pages/index/index”, //首页路径
“text”: “首页”, //标题文字
“iconPath”: “icons/home.png”, //未选中图标
“selectedIconPath”: “icons/home-o.png” //选中图标
},
7.初始化页面
在app.wxss中配置（手写标签）
page,view,text,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}
page{
–themeColor:#eb4450,
font-size:28rpx
};