! 一步一步从最基础的开始搭建项目
** 粗略地认识底层原理
** 学会全局配置以及页面局部配置
** 要学会独自查阅文档
下载步骤
注册 AppID
- 里面有开发文档,用来指引学习
- 完成账号注册,选择对应类型(个人)
-
- 点击此处,可以查看AppID
下载微信开发者工具
- 最好下载稳定版
开发
可在微信小程序中开发 也可以在vsCode中开发
(目前跟着学习的是在微信小程序中)
目录结构
pages
- 入口文件夹
- index
- logs:暂时不需要用到 (可删除)
- 在这里新建文件夹后,再右键 新建Page 会生成四个必要的文件,同时在app.json中会自动注册组件
utils
- 里面有一些工具
app.json
- " pages ":所有页面都必须在pages中进行注册,在这里添加注册保存,pages中也会生成对应文件;里面的第一个路径即是首先显示的页面
- 不支持注释
- " window ":在这里配置页面文字或者背景的颜色
app.wxss
- 配置整体的样式
配置文件
开始
- 阅读官方文档
- 学会查阅文档,前面四个部分较为重要
- MVVM架构
-
-
(对比:vue的架构) - 好处:
- MVVM架构将我们从 命令式编程 转移到 声明式编程
双线程模型
- 小程序基于WebView环境下,若在同一线程,执行过多的js逻辑可能阻塞渲染,导致界面卡顿
- 采用 双线程模型 的架构:
- 一些简单的数据绑定(在app.js文件中写)
- 可以看到循环绑定的方式与vue中不一样,在小程序中一旦要引用变量,必须要{{}},默认的有 item 和index
- 对全局的简单配置(在app.json文件中配置)
- 所有属性均可在文档中查找
// 这里配置的是小程序顶部 "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#006eb0", "navigationBarTitleText": "摔倒检测", "navigationBarTextStyle": "white" }
// 这里配置的是小程序底部 "tabBar": { "selectedColor": "#006eb0", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "assets/tarbar/home.png", "selectedIconPath": "assets/tarbar/home.png" },{ "pagePath": "pages/favor/favor", "text": "历史检测", "iconPath": "assets/tarbar/history.png", "selectedIconPath": "assets/tarbar/history.png" } ] }
- 效果图:
- 像在官方文档中,很清晰的列出来属性对应的样式
- 单独配置(在对应文件夹中的json文件中)
- 在文档中可查到配置的属性有多种,可以在json配置滚动到底部的距离(加载新数据),在js中调用函数写事件,具体案例回头查看。
- 控制台中AppData可以用来查看页面数据