本项目为样例DEMO,项目地址:https://github.com/Jack-WangZhe/Young-Blood-Competition-Mini-Program
一.小程序开发工具
1.微信开发工具介绍
- 快捷键
command+p
打开快速搜索文件功能 - 快捷键
command+e
搜索最近打开的文件 - 按F1可以查看对应的快捷键
- 可以通过选项栏中的设置 -> 设置对应快捷键内容
二.小程序基础知识
1.小程序文件类型
- 样式
- wxss -> css
- 骨架
- wxml -> html
- 业务
- js -> js
- 配置
- json
2.小程序组织方式
- 组织结构(组件式编程思想)
- app.json全局配置文件
- app.wxss
- app.js全局JS文件
- project.config.json小程序环境配置文件【可以没有】
- Page
- wxml
- wxss
- js逻辑控制文件
- json页面配置文件【可以没有】
- component1
- wxml
- wxss
- js逻辑控制文件
- json页面配置文件【可以没有】
- component2
- Page…
3.初始化小程序
-
按流程新建小程序
-
当在pages下新建目录命名为classic,在classic目录下创建pages时会生成js/json/wxml/wxss文件,且会将此pages注册到app.json文件中
{ "pages": [ "pages/classic/classic" ] }
-
此时页面显示的内容就是classic.wxml文件里的内容
-
配置文档参见:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
4.框架json配置项
- pages
- 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的
.json
,.js
,.wxml
,.wxss
四个文件进行处理。 - 数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改
- 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的
- window
- 用于设置小程序的状态栏、导航条、标题、窗口背景色
- 详细内容参见文档即可
- 注:当希望设置占用到手机屏幕顶端的样式时,可以通过设置navigationStyle为custom将样式从最上方进行设置,但右上角胶囊按钮仍会保留
- 上拉和下拉时都会有对应的背景内容是通过backgroundColor属性控制的,对于IOS来说可以设置下拉时上方显示的颜色backgroundColorTop和上拉时下方显示的颜色backgroundColorBottom
- 可以通过enablePullDownRefresh启用下拉刷新等
5.组件
- 视图容器
- cover-image
- cover-view
- movable-area
- movable-view
- scroll-view
- swiper
- swiper-item
- view
- 组件wxml跟html很相近,只不过小程序提供了一些专门的组件(view等等),我们也可以自己定义对应的组件