微信小程序开发入门-创建项目及认识结构

微信小程序开发入门-新建项目及其结构

1.微信小程序注册

​ 微信登录：https://mp.weixin.qq.com/

​ 按照提示注册即可(需要邮箱激活)， 若是个人开发，请选择“个人”并填写相关信息

​ 查看AppID：

​

2.下载并安装微信开发者工具

​ https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

​ 注意：对应自己电脑系统及版本

3.登录微信开发者工具并新建小程序项目

​ 3.1项目结构：

3.2 每个页面都由4个文件组成

​ index.js : 页面脚本文件

​ index.json ：页面配置文件

​ index.wxml： 页面模板结构文件

​ index.wxss ：页面的样式表文件

3.代码构成

4.1 WXML模板

​ WXML（WeiXin Markup Language）是小程序框架设计的一种标记语言

4.2 WXSS

​ WeiXin Style Sheet 表示小程序样式

​ 新增rpx单位: 在不同大小的屏幕上可以自动换算

​ **app.wxss ** 是全局样式， 局部页面的.wxss只对当前页面有效

4.3 .js文件

​ app.js 是整个小程序项目的入口文件，通过App()函数启动整个小程序

​ 页面的.js文件是页面的入口文件，通过Page()函数创建并运行

​ 普通的.js文件是普通的功能模块文件，用来封装公共的函数或属性

4.宿主环境

4.1 宿主环境包含什么内容？

​ 通信模型、运行机制、组件、API

​ 通信模型： 渲染层（wxml/wxss）和逻辑层（.js）由微信客户端转发

4.2 运行机制

​ 小程序启动过程：

​ 1) 将小程序代码包下载到本地

​ 2) 解析app.json全局配置文件

​ 3) 执行app.js小程序入口文件，调用***App()***创建小程序实例

​ 4) 渲染小程序首页 ； 启动完成

​ 页面渲染过程：

​ 1) 加载.json 配置文件

​ 2) 加载.wxml和.wxss

​ 3) 执行.js文件，调用***Page()***创建

​ 4) 页面渲染完成