微信公众平台：创建账号
微信开放平台：支付

一、小程序结构

pages:页面每一个文件夹对应一个页面
utils存放公共点工具
app.js：全局样式
app.json:对小程序做整体配置
app.wxss：微信小程序的全局风格

1、xxx.wxml=html只是写页面标签
2、xxx.wxss=css只写css

1、创建新页面

1）、点击app.jsin
2)、在“pages”下写“psges/名字/名字”，
3)、保存

-文字颜色 backgroundbarback

二、全局配置app.json

板块一"pages"

添加页面，每个页面中间使用“，”隔开，隔开最后一个省略

第一个是程序编译后的默认颜色

板块二:"windows"

全局定义小程序所有页面的背景色、文字颜色等

属性	描述
backgroundtextstyle
navigationbarbackgroundcolor	背景色
navigationbartitletex	文字内容
navigationbartextstyle	文字颜色

板块三： “style”:"v2"

样式的整体版本控制，目前最低支持就是“v2”

三、wxml语法

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML

1、wxml和html的区别

html	wxml
div	view
span	text
img	image
a	navigator

三、常用的组件

可以找微信官方文档

1、视图组件

组件	功能
view	div
scroll-view	滚动效果
swiper	轮播图

scroll-view

可滚动视图区域，使用竖向滚动时候，需要给scroll-view一个固定高度，通过wxss设置height，组件属性的长度单位默认为px

swiper和swiper-item

<swiper>
<swiper-item>
<view></view>
</swiper_item>
</swiper>

轮播图的结构

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
	<swiper-item>
    <view class="item">A</view>
  </swiper-item>
	<swiper-item>
    <view class="item">B</view>
  </swiper-item>
	<swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

轮播图的样式

.swiper-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item {
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

属性	说明
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前指示点颜色
autoplay	自动切换，5s
interval	自动切换时间间隔，ms
circular	采用衔接滑动

4、其他常用组件

4.1 text组件

类似于span
长按选中效果使用属性：selectable

<view>
 手机号支持长按选中效果
 <text selectable>13800005056</text>
</view>

4.2、rich-tex标签

把 HTML 字符串渲染为 WXML 结构

<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

4.3Button按钮

直接复制

<!-- 按钮组件的基本使用 -->
<!-- 通过 type 属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

4.4image标签

首先需要一个图片地址，在pages下新建一个文件夹，图片直接从桌面拖进去

<!-- image 图片组件 -->
<!-- image组件有默认的属性 -->
<image></image>
<image src="/images/1.png" ></image>

show-by-longgress长按图片进行识别，常用在有二维码的图片

image:在微信里有宽高值320*240 为了防止这个情况，就会加Image组件的mode属性，mode表示图片显示模式


scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素`不好用，图片会变形`
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，`可以完整地将图片显示出来,会留白`
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常`只在水平或垂直方向是完整的`，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

4.5 rpc和px

自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

05 微信小程序