小程序开发笔记1

花坊

一，创建项目

不使用云服务，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元素的浮动