微信小程序

第一节、了解

小程序就是一种不需要下载安装即可使用的应用，用户扫一扫或者搜一搜即可打开应用

了解以下词汇

api 应用接口(封装好的函数等)
app 手机上的应用
h5  移动端页面
小程序 移动端页面

mp和app对比

app：手机应用必须要下载、安装、注册等
mp： 不需要下载安装即可使用

小程序特点

1   不需要下载安装即可使用导致了第一次打开小程序时会加载该应用
2   小程序代码不能超过2m（提高客户体验），因此小程序中图片采用的网络图片，但是图标是可以的
3   小程序代码容量可以突破2m,不能超过20M(通过分包技术)
4   小程序开发语言依然是js

提前准备

 百度 "微信公众平台" 
 1 下载微信开发者工具
 2 查看自己的appid（将来会把该id用到项目中） --开发--开发管理---开发设置
 百度 "api 小程序" 查看官方文档

通过微信开发者工具创建项目

介绍微信开发者工具界面

预览：    调试器在手机屏幕上的
真机调试： 调试器在PC端，方便调试
编译：一般情况下当ctrl+s保存时会自动编译，如果遇到缓存等bug，点击该按钮可以强制重新编译
上传：上线才用
提前配置：
详情---》本地设置---》打钩不检验合法域名。。。。
微信中发送的ajax的域名必须是https开头，并且需要在官网中配置使之合法，才能够正常发请求

第二节、项目结构

pages (页面)
	目录
		目录.js    全局业务
		目录.json  局部配置
		目录.wxml  页面布局
		目录.wxss  页面样式
.eslintrc.js 代表编写习惯约束 (老大让小弟统一编码风格)
app.js    全局业务
app.json  全局配置
app.wxss  全局样式

页面(局部)配置   >  全局配置

第三节、新建页面

页面的组成：一个目录+4个同名文件(js、json、wxml、wxss)，位置：pages下

js:业务（事件注册、钩子函数、方法等）
json：当前页面的配置
wxml:当前页面的布局
wxss：当前页面的样式

方式1：
	在pages下新建xx目录，然后选择该目录右键--》新建page，取前缀名，名字和目录xx匹配
	
方式2:直接手动配置路由，程序能够自动帮你新建页面
	路由是自动帮你配置的

第四节、app.json （全局配置）

1 配置路由 pages

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  
配置语法：pages/目录/前缀文件
注意：默认访问的是配置的第一个路由

指定默认访问的页面

1 点击 普通编译  按钮
2 添加编译模式
3 编辑模式名称和启动页面（去选择不要手写）
4 以后选择模式名称默认启动对应页面

2 窗口表现 window

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#13bb67",
        "navigationBarTitleText": "xxx",
        "navigationBarTextStyle": "white",
         自定义导航
        "navigationStyle":"custom"
    },

3 tab 栏 tabbar

百度 ”iconfont“ 下载图标

"tabBar": {
        "color":"#ccaa11",
        "selectedColor":"#ee7897",
        "list": [
          {
            "pagePath": "pages/home/home",
            "text": "首页",
            "iconPath":"/img/home.png",
            "selectedIconPath":"/img/home2.png"
          },
          {
            "pagePath": "pages/cat/cat",
            "text": "分类",
            "iconPath":"/img/cat.png",
            "selectedIconPath":"/img/cat2.png"
          },
          {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath":"/img/my.png",
            "selectedIconPath":"/img/my2.png"
          }
        ]
      },

第五节、样式

单位：rpx
作用：可以根据屏幕宽度进行自适应
公式：rpx=  750  * 元素在设计稿中的宽度 /设计稿基准宽度
设计稿基准宽度:按照UI设计师来规定的
比如：设计稿基准宽度为800px ，量出来的宽度为100， ----》750 * 100 /800  =93.75rpx
比如：设计稿基准宽度为750px ，量出来的宽度为100， ----》750 * 100 /750  =100rpx
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
width如果写成750rpx，则正好是手机的宽度

第六节、组件

1 view 块级器

阻止冒泡

<view class="father" hover-class="change_f">
    <view class="son" hover-class="change_s" hover-stop-propagation>
    </view>
</view>

2 text 文本

1 选中  <text 	user-select>我的</text>
2 支持空格 <text 	space="emsp/ensp">蜗   牛</text>

3 rich-text 富文本

富文本支持标签，类似于v-html

<rich-text nodes="<h1>123</h1>"/>

4 image 图片

<image src="/img/a1.jpeg" mode="heightFix"/>
<image src="https://img0.baidu.com/it/u=2392075222,321187020&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=350" mode="widthFix"/>

mode="widthFix/heightFix" -->缩放
widthFix :宽不变，高度自适应---》适用于宽>高的图
heightFix:高不变，宽度自适应 ---》适用于高>宽的图

5 navigator导航

<navigator url="" open-type=""></navigator>
注意：只能跳转内部页面
内部页面分类：
	1 tabbar页面
	2 非tabbar页面
注意：跳转页面时以/开头
<navigator url="/pages/test/test">跳转test(非tabbar页面)</navigator>
<navigator url="/pages/my/my" open-type="switchTab">我的(tabbar页面)</navigator>

6 scroll-view 滚动容器 （重点）

分类：1 横向滚动 2 竖向滚动

scroll-view标签本身不支持display-flex

1 横向滚动

<scroll-view 	scroll-x>
<view class="v">
    <view> aa </view>
    <view> bb </view>
    <view> cc </view>
    <view> dd </view>
    <view> ee </view>
    <view> ff </view>
</view>
scroll-view .v{
    /* border:1rpx red solid; */
    display: flex;
}

.v view{
    width: 300rpx;
    flex-shrink: 0;
}

2 竖向滚动：注意：竖向滚动一定要给scroll-view 一个高度(通过样式来控制)

<scroll-view 	scroll-y>
    <view> aa </view>
    <view> bb </view>
    <view> cc </view>
    <view> dd </view>
    <view> ee </view>
    <view> ff </view>
</scroll-view>
scroll-view{
    border:1rpx red solid;
    height: 100vh;
    width: 200rpx;
    /* display: flex; */
}
view{
    height: 400rpx;
}

去掉滚动条

::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

7 swiper -轮播图

<swiper
indicator-dots
indicator-color="rgba(133,222,11,0.6)"
indicator-active-color="rgb(255,255,255)"
autoplay
interval="1000"
circular
current="1"
>
    <swiper-item>
        <image src="https://img0.baidu.com/it/u=3970160540,1330599016&fm=253&fmt=auto&app=120&f=JPEG?w=994&h=500" mode="widthFix"/>
    </swiper-item>
    <swiper-item>
        <image src="https://img0.baidu.com/it/u=3760590391,932254407&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500" mode="widthFix"/>
    </swiper-item>
    <swiper-item>
        <image src="https://img0.baidu.com/it/u=1603601431,3825281494&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" mode="widthFix"/>
    </swiper-item>
</swiper>

第七节、数据绑定

所有页面的业务都放在对应js文件中：

Page({
	data: {
    },
})
渲染：
1 在wxml中通过{{xxx}}模板来进行渲染	
2 写活属性  <标签  属性="{{xxx}}"

列表渲染

默认item代表数组中的每一个元素
默认indes代表下标

理想中的写法：wx:key="{{item.id}}"
正确的写法：wx:key="{{id}}"
<view wx:for="{{stus}}" wx:key="id">
    {{index}} --{{item.name}}
</view>

别名：

<view wx:for="{{stus}}" wx:key="id" wx:for-item="s" wx:for-index="i">
    {{i}} --{{s.name}}
</view>