一、小程序的介绍
在2017年的时候,微信推出了 一种不需要下载安装就可以使用的应用程序,也就是常说的 小程序
二、小程序开发前的准备
- 我们先去微信公众平台,注册账号并登录 官网 https://mp.weixin.qq.com/ 注册了之后我们下载开发者工具
在【已登录】的小程序页面中,点击【开发工具】
找到【开发者工具】,点击【下载】
推荐下载【稳定版本】,大家可以根据自己的系统进行选择下载
一路下一步,即可完成安装
三、开发第一个小程序应用
1、打开微信开发者工具,进行扫码登录
2、登录成功之后,可以得到创建小程序页面
3、我们在小程序项目 选择小程序 然后点击加号来创建
看到这个页面代表我们的小程序创建成功了
四、了解小程序的基本组成结构
小程序的每个页面都是一个文件夹组成的,全部放在pages文件夹中
utils文件夹是放一些工具类的
app.json是小程序的公共配置文件
app.wxss是小程序的公共样式表
project.config.json文件是项目的配置文件,会记录小程序的全部配置
sitemao.json文件是表示页面是否可以被微信索引
小程序的基本语法 wxml
wxml和html有什么不一样呢?
wxml是小程序的一套标签语言,用来构建小程序的结构,其作用类似于网页开发的HTML
他们的区别
-
标签名不一样
HTML(div,span,im,a) wxml (view,text,image,naviator)
-
属性节点不一样
HTML <a href=‘xxx’></>
wxml <naviator></navator> -
wxml提供了动态渲染数据的模板语法
数据绑定 提交渲染 列表渲染
WXSS
- wxss是一套样式语言,用于描述wxml的组件样式
- 类似于CSS,基于CSS的大部分特性
- 新增了尺寸单位 rpx ,一个rpx代表页面的宽度 1/750
- 提供了全局的样式和局部样式
- 全局:存放在根目录的 ,WXSS
- 局部:存放在页面文件夹的 .wxss
- 局部样式 > 全局样式
- wxss支持css的选择器 推荐使用( class )
.json文件的作用
小程序中的 .json 文件有两种 根目录的和页面中的
-
根目录
app.json是用于修改项目的基本配置的
比如 修改顶部的样式
-
页面中的.json文件作用是一样的 他的优先级高
小程序的宿主环境和运行环境
宿主环境就是我们这个程序需要在哪里运行 那么宿主环境就是什么 小程序是运行在微信上的 那么他的宿主环境就是微信
运行环境
小程序的基本组件(标签)
- view
视图容器 可以理解为我们HTML中的 div 标签
属性
hover-class 当我们点击的时候可以给他添加一个类目
hover-stop=propagation 类似于 HTML的阻止冒泡 - scrollview
可滚动试图区域 就是给他添加了 voerfloat:scroll
需要满足条件才能显示滚动条
内容宽度/高度超出
x轴设置了 scroll-x / y轴 scroll-y
<scroll-view class="scroll-view" scroll-x scroll-y>
<view class="scroll-item item1">1</view>
<view class="scroll-item item2">2</view>
<view class="scroll-item item3">3</view>
.scroll-view{
width: 150px;
height: 150px;
border:3px solid #000;
}
.scroll-item {
height: 100px;
width: 200px;
}
.item1 {
background-color: red;
}
.item2{
background-color: orange;
}
.item3 {
background-color: skyblue;
}
- swipe
滑块视图容器 也就是 轮播图 里面只能放 swiper-item组件
属性:indicator-dots显示小圆点
indicator-color 圆点的默认颜色
indicator-active-color 选中的圆点颜色
<swiper indicator-dots indicator-color="#fff" indicator-active-color="#ccc">
<swiper-item class="item1">1</swiper-item>
<swiper-item class="item2">2</swiper-item>
<swiper-item class="item3">3</swiper-item>
</swiper>
- text 类似我们的span标签
- rich-text 富文本。在nodes刷新中添加节点
- button 按钮
属性:size:大小
type:类型
plain:只有边框颜色 - image
图片
属性 mode:
scaleToFill缩放模式
aspectFit 可以完整地将图片显示出来。
aspectFill 图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。