花坊
一,创建项目
不使用云服务,js基础模板
项目初始化
重制App.js代码
删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段
重置 app.wxss 中的代码
删除 app.json 中 pages 下的 "pages/logs/logs" 路径,同时删除 pages/logs ⽂件夹。
删除 components 中的⾃定义组件。
重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。
更新 utils 下 util.js 的⽂件名为 formatTime.js。
二,⾃定义构建 npm + 集成Sass
将⼩程序源码放到 miniprogram ⽬录下
⾃定义构建
⾸先在project.config.json 配置 miniprogramRoot 选项,指定⼩程序源码的⽬录。
然后配置 project.config.json 的 setting.packNpmManually 为 true。
project.config.json在内建终端里打开
最后配置 project.config.json 的 setting.packNpmRelationList 项,指定 packageJsonPath 和
miniprogramNpmDistDir 的位置。
packageJsonPath 表示 node_modules 源对应的 package.json
miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置
安装 vant ,然后进⾏ npm 构建 ,测试是否能够正常 vant 构建成功。
集成 Sass
在 project.config.json ⽂件中,修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ,即可开启⼯具内置的 sass 编译插件。
记得更改wxss后缀名为sass,关闭并重新打开项目
3构建项⽬⻚⾯
assets⽂件导⼊
配置app.json⽂件
四,⾸⻚
首页完成效果
⾸⻚结构
⾸⻚背景图
banner组件
新建banner组件
构建banner组件结构
banner.js
banner.json
banner.xml
Index.json
轮播图组件
完成后效果
entrance组件
新建entrance组件 并构建entrance组件
完成⼴告区域
注册goods-card和goods-list全局组件
完成goods-card组件
goods-card.js
goods-card.json
goods-card.scss
\
goods-card.wxml
goods-list组件
goods-list.js
goods-list.json
goods-list.scss
⾸⻚⻚⾯
分类⻚⾯
页面完成效果
category.wxml
category.wxss
知识点
01-css单位
02-flex布局
03-元素定位
04-伪元素选择权
05元素的浮动