开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
一、创建个人开发账号
(1)登录mp.weixin.qq.com/
(2)点击右上方立即注册,接下来按步骤填写信息
二、创建小程序
(1) 获取APPID:进入小程序后——开发管理——开发设置 看到AppID(小程序ID) | wx254e…… |
(2) 安装微信开发者工具developers.weixin.qq.com/miniprogram… 根据自己的系统选择安装即可
(3) 文件夹
- pages:存放所有小程序页面(每个页面都有一个单独文件夹)
- utils:工具性质的模块
- app.js:项目入口文件
- app.json:项目全局配置文件,pages(记录当前小程序所有页面的路径),window(全局定义小程序所有页面的背景色。文字颜色等)、style(全局定义小程序组件所使用的样式版本,删掉就是旧样式)、sitemapLocation(用来指明sitemap.json位置)
- app.wxss:全局样式文件
- project.config.json:项目配置文件
- sitemap.json:配置小程序及其页面是否允许被微信索引(下面是不被索引disallow,终端报错去project.config.json改checkSiteMap:false)
页面:
- .js:页面脚本文件,存放页面的数据、处理函数……
- .json:当前页面配置文件。一种数据格式
- .wxml:当前页面模板结构文件,小程序的标签语言
- .wxss:当前页面的样式表文件,rpx自动单位换算
(4)新建页面:app.json->pages->"pages/--/--"(--要一致就是--中的--的文件) (5)修改项目首页:改pages数组中的顺序,第一个就是首页
小程序的宿主环境
-
通信主体:渲染层(wxss、wxml)+逻辑层(js脚本)
-
通信模型
-
运行机制:
- 下载代码包
- 解析app.json
- 执行app.js调用APP()创建小程序实例
- 渲染小程序首页
- 启动完成
- 页面渲染过程:
- 加载解析页面的.json配置文件
- 加载页面的.wxml模板和.wxss样式
- 执行页面的.js文件,调用Page()创建页面实例
- 页面渲染完成