小程序开发笔记1

花坊

一,创建项目

5e22e2b1711a477480b54e9027f9267e.png

不使用云服务,js基础模板

375b48567cc64841b8da24832464d7cf.png

项目初始化

 

重制App.js代码

b8af6cff6dc14422b403c037ca67c2cb.png

删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段

 

 

 

重置 app.wxss 中的代码

92fc4307af924360ad1a21878ea305e9.png

 

删除 app.json 中 pages 下的 "pages/logs/logs" 路径,同时删除 pages/logs ⽂件夹。

99bce01dc8f74568a3ba7256ca6c0059.png

删除 components 中的⾃定义组件。

 

重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。

b4f5e1c4496d4ad5b2a0638e63c081c4.png

更新 utils 下 util.js 的⽂件名为 formatTime.js。

c607b4865cd94a92961b72464e88eb4d.png

二,⾃定义构建 npm + 集成Sass

将⼩程序源码放到 miniprogram ⽬录下

c666302966ef4adba28535190f812910.png

⾃定义构建

⾸先在project.config.json 配置 miniprogramRoot 选项,指定⼩程序源码的⽬录。

 

e030f36a3a394df7881acef44bc6b601.png

然后配置 project.config.json 的 setting.packNpmManually 为 true。

441ec4adfe9940509fa3df7068623bff.png

project.config.json在内建终端里打开

b1157adb5ebb496f882fbf7d771d2aa3.png

最后配置 project.config.json 的 setting.packNpmRelationList 项,指定 packageJsonPath 和

miniprogramNpmDistDir 的位置。

0d15188f4c254bcc84ef9a9a7ef59e4c.png

packageJsonPath 表示 node_modules 源对应的 package.json

miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置

 

安装 vant ,然后进⾏ npm 构建 ,测试是否能够正常 vant 构建成功。

22222c8042cc4ffd8c2577cf5974250e.png

集成 Sass

在 project.config.json ⽂件中,修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ,即可开启⼯具内置的 sass 编译插件。

记得更改wxss后缀名为sass,关闭并重新打开项目

9bee746196e6483a8b23d32c8b34118c.png

 

3构建项⽬⻚⾯

assets⽂件导⼊

配置app.json⽂件

6daa289b318343f0a31579fd08da38ae.png

58b5ec7993d149a9829241c013fde379.png

f9acae3094294f65b5857af0372908c3.png

c30a84c0c30f4a798ee2f71960f9e8e7.png

 

四,⾸⻚

首页完成效果

8ec594d3c057437d861135b99aaf0e9f.png

⾸⻚结构

d752af1ed5dd41c7b2f6a26892906c01.png

⾸⻚背景图

11b159643896487bbbcfce5bcb6d764f.png

2f0f08cc48c44d98b358a10ee262e925.png

banner组件

新建banner组件

73ab1cc7a141491eb8f943a16e36a155.png

构建banner组件结构

banner.js

48587d2a9b304ece8cab6b76f175388f.png

banner.json

4ebc5b31953740f59e88103bbb55652f.png

banner.xml

cf70ded8cc3c4e26b08c0c3caaf0e6c3.png

Index.json

97722e802c5842f3883ea7dc2ef864fe.png

 

轮播图组件

f8efbc9b2f3d4411aa250cf8ec886443.png

d2eedd5bbfe64e1e9ed51a3570868b03.png

3795d78261904c4f93c0c8d63dc78d77.png

完成后效果

bc7944ea62594474a3e4c4b3c7ed5704.png

entrance组件

新建entrance组件 并构建entrance组件

ff47f2f2ebeb4aa8b7cff584d93f5988.png

bef3732dc1674d779827497326ea312b.png

86cac2909053405ba688709107ba7caa.png

e17e9ed83d5d441399faf84ec39a0477.png

完成⼴告区域

a5aa0230f36643a5ad5e076d1ee86437.png

6ec274b38c7c42aead4151d77ac3b901.png

 

注册goods-card和goods-list全局组件

6a210bf58ad4456c815f4d257b80ab44.png

完成goods-card组件

goods-card.js

c16cedb8d73e4942bf5131ae4e349938.png

goods-card.json

f197100fbffe4203951e9ad56934548b.png

goods-card.scss

5df8319de81a44c2ba4a2d4c1619c34b.png

2d38261ac0ef44fdb0a816374c259d25.png

666a84502264404a944af753afb4013a.png

30ff4954bffc492aac6f465281098105.png

3cdb8b06c66a45f1a19eaa865f7ee754.png\

goods-card.wxml

16346cf931b640b58d44c40a3192662f.png

0a6573c001b746b39180be241590bcc5.png

goods-list组件

goods-list.js

32f9df7d45df47a490cd1542a73fbf66.png

goods-list.json

0a198b334ba94b14a8521dce4136456d.png

goods-list.scss

53152b34b7c249a39d553829d2575d4d.png

0af5ad18435d4a9b81c5bb3503401ef5.png

⾸⻚⻚⾯

5e2703b9bda54c7e92fd59b2389db41f.png

分类⻚⾯

页面完成效果

e497e54879c54d96b231767e97c7fad2.png

category.wxml

88d2e400a3e64eab8d348abefb3128d0.png

category.wxss

b740d365ea684e57a977225a55be8003.png

bcbb829c950543f199a2db49a1f2d926.png

17358ff3808e4c239f39d3477ce31588.png

知识点

01-css单位

97d458013b754a3f81392bff68304980.png

02-flex布局

c9017fa94bf448b2a8679c3afce48b32.png

e8500f738e5b49d5a1a67b07efe98ef7.png

03-元素定位

4c9914a450184b5aacae1375c243aced.png

79d313e345d34b1bb35194e6c1b840d3.png

fbe0d346fb4a4bbc9f2710682683b991.png

04-伪元素选择权

bcd80c5439ff40e0bc80519d7f48247e.png

05元素的浮动

4ed449e9c38546659d0802c43aaa6be6.png

6a7db61530814f34a8c894adcb92849d.png

 

 

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值