当前位置:网站首页>一个必看的微信小程序开发指南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
边栏推荐
- 有意思的js 代码
- synchronized 实现原理
- 如何在SQL Server中导入excel数据,2019版
- Qt利用QtXlsx操作excel文件
- [effective go Chinese translation] part I
- AAAI 2022招募讲者啦!!
- Green apple film and television system source code film and television aggregation film and television navigation film and television on demand website source code
- PHP high precision computing
- Convert object to URL
- Rearranging log files for leetcode simple question
猜你喜欢
关于ORB——SLAM运行中关键帧位置越来越近的异常说明
浏览器中的 Kubernetes 和 IDE | 交互式学习平台Killercoda
Smart business card applet business card details page function implementation key code
Rearranging log files for leetcode simple question
vslam PPT
几种智能机器人室内定位方法对比
LeetCode简单题之重新排列日志文件
freertos学习02-队列 stream buffer message buffer
一款拥有漂亮外表的Typecho简洁主题_Scarfskin 源码下载
为什么会存在1px问题?怎么解决?
随机推荐
Weekly leetcode - 06 array topics 7 ~ 739 ~ 50 ~ offer 62 ~ 26 ~ 189 ~ 9
LeetCode15. Sum of three
Qt读写XML文件
Usage of databinding
常用正则表达式
总线结构概述
多目视觉SLAM
监控智能回放是什么,如何使用智能回放查询录像
PHP generates short links: convert numbers to letters and letters to numbers
vslam PPT
An idea plug-in that doesn't work, but can install X
There are some problems when using numeric type to query string type fields in MySQL
万物互联下如何对设备进行加密
Planification du mouvement du manipulateur dans l'assemblage 3c
idea:使用easyYapi插件导出yapi接口
The whole house intelligence bet by the giant is driving the "self revolution" of Hisense, Huawei and Xiaomi
2022.4.11-4.17 AI industry weekly (issue 93): the dilemma of AI industry
怎么读书读论文
微信小程序 catchtap=“toDetail“ 事件问题
php高精度计算