当前位置:   article > 正文

3分钟教你创建微信小程序~_微信开发者怎么创建第二个小程序

微信开发者怎么创建第二个小程序

开发前准备—下载&安装微信开发者工具
下载并安装微信开发者工具
地址~

微信开发者工具介绍
微信开发者工具是官方提供的专门用于微信小程序开发调试的工具,它提供的主要功能如下:
● 快速创建小程序项目(起到脚手架的作用)
● 代码的查看和编辑(相当于 VSCode 作用)
● 对小程序功能进行调试(相当于浏览器作用)
● 小程序的预览和发布
与普通的网页开发不同,小程序的开发必须要使用专门的工具: 微信开发者工具

1.创建第一个小程序项目

点击+号,创建新项目
在这里插入图片描述

填写项目信息
在这里插入图片描述

如上图所示填写信息,要点如下:
● 项目名称:可以直接填写
● 目录:代码保存的位置,建议使用空目录
● AppID: 填写之前申请的小程序AppID (也可以使用测试账号)
● 后端服务:不使用云服务
● 模板选择:选择 Javascript 基础模板。

启动小程序项目
在这里插入图片描述

二.认识小程序-目录结构

小程序文件类型
小程序主要提供了 4 种文件类型:
在这里插入图片描述

文件作用
在这里插入图片描述

三.认识小程序-页面布局

页面的构成
一个完整的小程序页面需要包括 4 个类型的文件:
● .wxml 定义页面的结构,类似于 .html
● .wxss 定义页面的样式,类似于 .css
● .js 定义页面的逻辑,监听事件、发起请求等
● .json 定义页面的配置,如页面标题等
在这里插入图片描述

页面结构: (两个新标签 view, text)
● view 定义块级区域,相当于网页中的 div 标签
● text 定义行内区域,相当于网页中的 span标签
在这里插入图片描述

页面样式
● 类选择器,与网页中一致
● 标签选择器,与网页中一致
● … 大部分的 css 样式都可以用到小程序中
在这里插入图片描述

四.小程序-配置文件

配置文件简介
小程序配置文件是一种json格式的文件。可以起到快速新建页面、设定小程序首页、设置窗口样式及设置导航栏和底部tabBar等作用。

在这里插入图片描述
分类:
全局 app.json
页面 page.json

全局配置简介
和vue中全局的概念是一样的

页面配置简介
页面配置只针对某个页面生效

五.小程序适配-响应式单位rpx

响应式单位rpx
rpx ,responsive pixel:
在小程序中的单位rpx,它的特点是能够自动地适配置不同尺寸的手机屏幕。
原理:不管手机屏幕具体多宽,100%的屏幕宽度就是750rpx

rpx (responsive pixel):规定不管屏幕为多少px,100%的屏幕宽度就是750rpx
100%屏幕的宽度 = 750rpx


好啦~今天就聊到这啦!
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/623649
推荐阅读
相关标签
  

闽ICP备14008679号