小程序入门篇——基础部分

125 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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:项目配置文件 image.png
  • sitemap.json:配置小程序及其页面是否允许被微信索引(下面是不被索引disallow,终端报错去project.config.json改checkSiteMap:false)

image.png 页面:

  • .js:页面脚本文件,存放页面的数据、处理函数……

image.png

  • .json:当前页面配置文件。一种数据格式 image.png
  • .wxml:当前页面模板结构文件,小程序的标签语言

image.png

  • .wxss:当前页面的样式表文件,rpx自动单位换算

(4)新建页面:app.json->pages->"pages/--/--"(--要一致就是--中的--的文件) (5)修改项目首页:改pages数组中的顺序,第一个就是首页

小程序的宿主环境

  • 通信主体:渲染层(wxss、wxml)+逻辑层(js脚本)

  • 通信模型 image.png

  • 运行机制:

  1. 下载代码包
  2. 解析app.json
  3. 执行app.js调用APP()创建小程序实例
  4. 渲染小程序首页
  5. 启动完成
  • 页面渲染过程:
  1. 加载解析页面的.json配置文件
  2. 加载页面的.wxml模板和.wxss样式
  3. 执行页面的.js文件,调用Page()创建页面实例
  4. 页面渲染完成