微信小程序搭建教程笔记

8/16
pages文件夹 存放所有的页面
utils文件夹 存放工具模块
.js 放js函数
.json 小程序全局配置文件 配置窗口外观，表现
.wxml 页面的模板结构文件
.wxss 全局样式文件 类似css在这里插入代码片
project.config.json 项目的配置文件
sitemap.json 配置小程序及其页面是否允许被微信索引

四个json配置文件：
1.app.json
2.project.config.json
3.sitemap.json
4.每个页面中的json

app.json
1.pages 记录小程序所有页面的路径
2.window 全局定义小程序所有的背景色，文字颜色等
3.style 全局定义小程序的样式
4.sitemapLocation 指明sitemap.json的位置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

修改pages下面的参数，为pages文件夹生成对应文件夹，文件夹里自动包含四个文件
调整pages数组中路劲的前后顺序，即可修改项目的首页

wxml
提供了类似Vue中的模板语法，比如数据绑定，列表渲染，条件渲染。与html的标签名称不同，属性节点不同。

wxss
类似CSS，新增rpx尺寸单位，类似rem，但是rpx会自动再不同大小的屏幕上自动换算；
app.wxss是全局样式，局部页面的.wxss仅对当前页面生效；
而且仅支持.class #id element 并集选择器 后代选择器 ::after等伪类选择器。

• 小程序的宿主环境(host)包含
  • 通信模型
  • 运行机制
  • 组件（9大类）
    • 视图容器
      view（类似div）
      scroll-view
      swiper swiper-item 轮播图
    • 基础内容
    • 表单组件
    • 导航组件
    • 媒体组件
    • map组件
    • canvas组件
    • 开放能力
    • 无障碍访问
  • API

view横向布局效果

<view class="contenter1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

1. :nth-child(odd)：选择所有奇数位置的元素。

2. :nth-child(even)：选择所有偶数位置的元素。

3. :nth-child(3n)：选择每3个元素中的第一个。

4. :nth-child(3n+1)：选择每3个元素中的第一个元素。

5. :nth-child(2n+1)：选择每2个元素中的第一个元素。

.contenter1{
  display: flex;
  justify-content:space-around;
}
.contenter1 view{
  color: white;
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
}
.contenter1 view:nth-child(1){
  background-color: lightblue;
}
.contenter1 view:nth-child(2){
  background-color: lightcoral;
}
.contenter1 view:nth-child(3){
  background-color: lightgreen;
}

scroll-view使用方法

<scroll-view class="contenter1" scroll-y="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.contenter1{
  width: 100px;
  height: 120px;
  border: 1px solid green;
}

swiper swiper-item轮播图用法

• swiper>swiper-item>view>A
• 设置是否有指示点等参数，是在里面设置

<!--pages/test/test.wxml-->
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="gray" autoplay="true" interval="5000" circular="true">
  <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;
  color: white;
}
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightsalmon;
}
swiper-item:nth-child(3) .item{
  background-color: lightsteelblue;
}

text使用
可复制有两个属性可选：selectable user-select

<view>
  不能复制
  <text user-select="true">长按复制1</text>
  <text selectable="true">长按复制2</text>
</view>

👇nodes属性必须

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

button使用

<!--普通按钮-->
<button >普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="default">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">普通按钮</button>
<!--小按钮-->
<button type="primary" size="mini">主色调按钮</button>
<button type="default" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!--描边小按钮-->
<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主色调按钮</button>
<button type="default" size="mini" plain="true">主色调按钮</button>
<button type="warn" size="mini" plain="true">警告按钮</button>

image使用
mode属性👇
mode=“aspectFit” 两边有留白
mode=“aspectFill” 两边无留白

API
①事件监听API：以on开头，监听某些事件的触发
②同步API：以sync结尾，通过函数返回值直接获取
③异步API：需要通过success，fail，complete接收调用的结果

数据绑定
在data中定义数据，在wxml使用数据
{{要绑定的数据名称}} 两个大括号也叫Mustache语法

  data: {
      info:'hello world',
      imgSrc:'http://www.ziyingziyuan.com/tree/file.png',
      randomNum: Math.random().toFixed(2)
  },

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="aspectFill"></image>
<view>{{randomNum * 100}}</view>

事件描述