当前位置:网站首页>一个必看的微信小程序开发指南1-基础知识了解
一个必看的微信小程序开发指南1-基础知识了解
2022-04-23 07:21:00 【是小天才哦】
哈喽哈喽,大家好呀,很高兴朋友你能看到这篇文章!
本人目前是计算机大一的学生,基于爱好自学了微信小程序开发。而在这里我想通过我整个学习过程的个人理解,把微信小程序开发这件事给朋友你用简单的语言讲懂。
因为本人和你一样也是学习者,所以文章中出现的错误,还望多多指出~
目录
1.小程序的项目结构
这里我们重点来介绍几个新手必须知道的文件
pages: 存放所有小程序内页面
app.js:小程序项目逻辑层执行的工作
app.json: 小程序项目的全局配置文件
app.wxss: 小程序项目的全局样式文件
project.config.json:项目的配置文件
sitemap.json: 用于配置小程序及其页面是否允许被微信搜索到。
2.小程序页面的组成部分
这里可以看到在 pages 目录当中还存在两个目录,一个是index,另外一个是lianxi。而在这两个目录当中仔细观察可以看到都有四个分别以 .js .json .wxml .wxss 为后缀的文件。而index.js,index.json,index.wxml,index.wxss四个文件分工合作来组成一个index的小程序页面。
.js:页面的脚本文件,存放页面的数据,事件处理函数等
.json:当前页面的配置文件,配置窗口外观等
wxml:页面的模板结构文件
wxss:针对wxml当中定义的组件进行修改
3.全局配置文件和局域配置文件
全局配置文件:所有以app开头的文件都是全局配置文件,针对所有小程序的内容进行统一配置
局域配置文件:针对当前目录中配置页面的内容进行单独配置。注意局域配置文件>全局配置文件
4.两个新手必须了解的配置文件
1.app.json:这个配置文件我们必须了解四个函数
pages:记录当前小程序所有页面的路径
window:全局定义小程序所有页面的背景颜色,文字颜色等。
style:全局定义小程序组件所使用的样式版本。
sitemapLocation:用于指明 sitemap.json的位置。
这里重点来了解一个函数-pages。
这里我们可以看到在 pages 函数当中我们有四行内容,这四行就是当前小程序你所有的页面的路径。而排在第一行的 "pages/list/list"就是我们打开小程序看到的第一个页面。
如果需要添加新的页面,只要在 pages函数添加对应路径就可以完成添加
这里先看到最右边的我们在 pages函数当中添加了 "pages/regz/regz"创建了一个代号为rgzn的页面(文件夹也会随之创建,中间红色括号可以看到),最后发现在左边的页面我们看到的页面就是 名为 regz的页面。
2.project.config.json文件:这里我们来了解三个重要函数
setting:编译相关的配置
projectname:项目名称
appid:小程序的账号ID
这里注意appid这个函数,这个函数内容填写的就是你个人的ID
5.小程序的宿主环境
宿主环境:程序运行时所依赖的环境,打个比方,我们现在在 steam上买的游戏基本只能在 windows 当中使用,一旦在linux系统当中就无法使用了。
而小程序的宿主环境就是手机微信。
6.小程序的通信模型
小程序通信的主体一共分为三个部分
1.渲染层:由wxml模板和 wxss样式负责
2.逻辑层: js脚本负责
3.第三方服务器。
渲染层,逻辑层和第三方服务器的数据传输完全由native(微信客户端负责)
7.小程序运行机制
1.小程序下载到本地
2.解析 app.json 全局配置文件
3.执行app.js 文件内容
4.渲染小程序首页
5.小程序启动完成
8.页面渲染的过程
1.加载解析页面的.json配置文件
2.加载页面的 .wxml 模板和 wxss.样式
3.执行页面的 .js文件,调用 page()函数打开对应页面
4.渲染完成
好了好了朋友们我们今天的内容到这就结束了,今天的内容到这里就结束了,今天的学习内容并不是很多,关键多看几遍就好了,有啥不会的朋友记得论坛里面提问哈~
如果朋友你感觉文章的内容对你有帮助,可以点赞,关注文章和专栏以及关注我哈~嘿嘿嘿~我会定期更新文章的,谢谢朋友你的支持哈~
版权声明
本文为[是小天才哦]所创,转载请带上原文链接,感谢
https://blog.csdn.net/little_startoo/article/details/124348447
边栏推荐
- Hump naming object
- Jetson Xavier NX (3) bazel mediapipe installation
- 谈谈那些基础但不简单的股票数据
- Campus transfer second-hand market source code download
- [go]常见的并发模型[泛型版]
- LeetCode简单题之计算字符串的数字和
- The third divisor of leetcode simple question
- How to import Excel data in SQL server, 2019 Edition
- Talk about the basic but not simple stock data
- My heart's broken! A woman's circle of friends envied others for paying wages on time and was fired. Even her colleagues who liked her were fired together
猜你喜欢
An article understands variable lifting
欧圣电气深交所上市:市值52亿 陆为东父女为美国籍
Rotation function of leetcode medium problem
Qt读写XML文件
vslam PPT
如何保护开源项目免遭供应链攻击-安全设计(1)
LeetCode中等题之旋转函数
干货!以点为形:可微分的泊松求解器
AAAI 2022 recruit speakers!!
The whole house intelligence bet by the giant is driving the "self revolution" of Hisense, Huawei and Xiaomi
随机推荐
Idea: export Yapi interface using easyyapi plug-in
[untitled]
社区团购小程序源码+界面diy+附近团长+供应商+拼团+菜谱+秒杀+预售+配送+直播
vslam PPT
在MATLAB中快速画圆(给出圆心坐标和半径就能直接画的那种)
Sword finger offer Day24 math (medium)
LeetCode簡單題之計算字符串的數字和
岛屿的个数
Draw a circle quickly in MATLAB (the one that can be drawn directly given the coordinates and radius of the center of the circle)
Ansible Automation Operation and Maintenance details (ⅰ) Installation and Deployment, Parameter use, list Management, Profile Parameters and user level ansible operating environment Construction
Install MySQL for Ubuntu and query the average score
华硕笔记本电脑重装系统后不能读取usb,不能上网
欧圣电气深交所上市:市值52亿 陆为东父女为美国籍
js常用数组方法
单点登录 SSO
如何在SQL Server中导入excel数据,2019版
Ubuntu安装Mysql并查询平均成绩
1216_ MISRA_ C standard learning notes_ Rule requirements for control flow
The third divisor of leetcode simple question
每周leetcode - 06 数组专题 7~739~50~offer 62~26~189~9