赞
踩
开发前准备—下载&安装微信开发者工具
下载并安装微信开发者工具
地址~
微信开发者工具介绍
微信开发者工具是官方提供的专门用于微信小程序开发调试的工具,它提供的主要功能如下:
● 快速创建小程序项目(起到脚手架的作用)
● 代码的查看和编辑(相当于 VSCode 作用)
● 对小程序功能进行调试(相当于浏览器作用)
● 小程序的预览和发布
与普通的网页开发不同,小程序的开发必须要使用专门的工具: 微信开发者工具
点击+号,创建新项目
填写项目信息
如上图所示填写信息,要点如下:
● 项目名称:可以直接填写
● 目录:代码保存的位置,建议使用空目录
● 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 ,responsive pixel:
在小程序中的单位rpx,它的特点是能够自动地适配置不同尺寸的手机屏幕。
原理:不管手机屏幕具体多宽,100%的屏幕宽度就是750rpx
rpx (responsive pixel):规定不管屏幕为多少px,100%的屏幕宽度就是750rpx
100%屏幕的宽度 = 750rpx
好啦~今天就聊到这啦!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。