一、整体认识小程序框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.1、响应的数据绑定

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

在开发者工具中预览效果

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

• 开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 Hello Weixin!；
• 当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到并执行对应的事件处理函数；
• 回调函数触发后，逻辑层执行 setData 的操作，将 data 中的 name 从 Weixin 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello MINA!。

pages/counter/index.wxml

<!--pages/counter/index.wxml-->
<view class="counter">
 <view class="title"><text>计数器</text></view>
 <view>{{count}}</view>
 <view>
  <button type="primary" bindtap="onCount">点击count++</button>
 </view>
</view>

pages/counter/index.wxss

/* pages/counter/index.wxss */

.counter
{
  font-size: 60rpx;
  text-align: center;
  padding: 30rpx;
}

.counter view{
  margin: 20rpx 0;
}

.counter .title{
  color:red;
}

pages/counter/index.js

// pages/counter/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    count:100
  },
  onCount(){
    this.setData({count:this.data.count+1});
  }
})

运行效果：

1.2、页面管理

框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到 框架 中，其他的一切复杂的操作都交由 框架 处理。

1.3、基础组件

框架 提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。

1.4、丰富的 API

框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

1.5. 小程序文件结构和传统web对比

通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json

二、组件

小程序中的组件是由宿主环境提供的，主要分为9大类：

视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问

2.0、单位

2.0.1、响应式单位rpx

在使用 CSS 进行移动端的网页开发时，由于不同手机设备的屏幕比，在换算像素单位时会遇到很多麻烦。为了方便开发人员适配各种屏幕WxSS 中加入了新的尺寸单位 rpx 即（responsive pixel，响应式像素)。

rpx 说明

rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx

100% 屏幕的宽度 = 750rpx

rpx响应单位

• rpx是微信小程序独有的，解决屏幕自适应的尺寸单位

• 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx

• 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

rpx 和 px之间的换算

• 在普通网页开发中 ， 最常见的像素单位是px

• 在小程序开发中推荐使用 rpx这种响应式的像素单位进行开发

• 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px

<view class="rpxDemo">
  Hello rpx!
</view>

.rpxDemo
{
  width: 375rpx;
  height: 375rpx;
  background: yellow;
  font-size:80rpx;
}

运行在iphone5上：

 更大屏幕的iphone6

 字体与view都相应响应式变大。

2.0.2、其它单位

px 绝对单位，页面按精确像素展示

em 相对单位，相对于它的父节点字体进行计算

rem 相对单位，相对根节点html的字体大小来计算

% 一般来说就是相对于父元素

vh 视窗高度，1vh等于视窗高度的1%

vw 视窗宽度，1vw等于视窗宽度的1%

.box
{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box view{
  background: lightcoral;
  height: 50vh;
  line-height: 50vh;
  width: 50vw;
  text-align: center;
}

<view class="box">
  <view>
    Hello rpx!
  </view>
</view>

示例2：

<view class="mybox">
  <view class="demo">
    Hello Applet!
  </view>
</view>

.mybox
{
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  height: 100vh;
}
.demo{
  background: oldlace;
  width: 50vw;
  height: 50vh;
  text-align: center;
  line-height: 50vh;
  font-size: 7vw;
}

运行效果：

2.1、view组件

在微信小程序开发中，view就相当于html5中的div，也是块状元素

官方文档给出的解释呢就是：视图容器

我们在编写html5页面所用的div呢，在开发小程序中就改成view即可

属性说明：

<view>Hello wx</view>

view类似div，这里主要学会使用view+flex布局 https://www.cnblogs.com/best/p/6136165.html#_label1

示例：

<view hover-class="bgcolor" class="box">
  <view>Tom</view>
  <view>Jack</view>
  <view>Rose</view>
</view>

.bgcolor{
  background: lightcyan;
}
.box{
  display: flex;
  flex-direction: row;
  background: oldlace;
  justify-content:space-around
}

.box view{
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.box view:nth-child(1){
  background: #ddeeff;
}
.box view:nth-child(2){
  background: #99ddee;
  width: 200rpx;
}
.box view:nth-child(3){
  background: #6699dd;
}

结果：

示例：

结果：

2.2、scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度

说白了其实就是一个可以 允许滚动的容器，只需要设置最大高度即可

属性说明：

<!--pages/hello/index.wxml-->
<scroll-view class="box" scroll-x="true" scroll-y="true">
  <view class="innerbox">
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容
  </view>
</scroll-view>

.innerbox{
  width: 500px;
  height: 100px;
  background-color: lightblue;
}

通俗点讲呢，就是轮播图组件，微信小程序中，轮播图我们不用在自己去写

可以用它自带的swiper组件与swiper-view共同来完成

swiper属性说明：

<swiper class="swiper-content" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay="true" interval="2000"
circular>
<!-- circular：衔接滑动 -->
<!-- 未激活的小圆点的颜色：indicator-color -->
<!-- autoplay:自动轮播 -->
<!-- indicator-dots:开启小圆点 -->
<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-content{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: green;
}
swiper-item:nth-child(2) .item{
  background-color: yellow;
}
swiper-item:nth-child(3) .item{
  background-color: pink;
}

<text>需求文档策划书</text>  <!-- 长按选中效果需加上selectable -->

<view>
<text>1&nbsp;2 &gt; &lt;</text>
</view>

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

<view>
  <text>{{"<hr/>"}}</text>
  <rich-text nodes="{{'<hr/>'}}">
  </rich-text>
  <view>123</view>
  <rich-text nodes="<hr/>">
  </rich-text>
</view>

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<image src="/images/rocket_top.png" mode="aspectFit" style="border: 1px red solid;"/>

"tabBar": {
        "color": "#999",//字体颜色
        "selectedColor": "#000000",//选中后的字体颜色
        "backgroundColor": "#FFF",//背景颜色
        "list": [{//组件集合
          "pagePath": "pages/index/index",//路径
          "text": "组件",//名称
          "iconPath": "static/c1.png",//图标
          "selectedIconPath": "static/c1.png"//选中后的图标
        }, {
          "pagePath": "pages/text/text",
          "text": "接口",
          "iconPath": "static/c2.png",
          "selectedIconPath": "static/c2.png"
        }]
      }
    }

<template>
    <view>
        <view class="login-bg">
            <view class="login-body" open-type="getUserInfo" @click="getUser">
                微信授权登陆
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            getUser(e) {
                wx.getUserProfile({
                    desc: '用于完善会员资料',
                    success: (res) => {
                        console.log(res)
                    }
                })
            },
        }
    }
</script>

<style>
</style>

作业

(1)、完成微信发现页的页面布局

 注意选项卡、与分组，尽量把信息存放在一个数组中，通过for属性遍历出内容。

(2)、完成下面的页面布局

(3)、完成一个猜数字游戏

首页是菜单选择页，共包含3个按钮，具体内容解释如下：
开始游戏：点击跳转到游戏页面；
游戏规则：点击跳转到游戏规则页面；
关于我们：点击跳转到关于我们页面。

本栏目推荐文章
• 2024/1/13 算法笔记
• Python学习笔记
• 深入探索JVM：理解Java程序在虚拟机中的存储和管理
• 从C++CLI工程的依赖库引用问题看.Net加载程序集机制
• 字节微服务HTTP框架Hertz使用与源码分析｜拥抱开
• 微信小程序 wxs的概念
• HDP 笔记
• 深入理解spring框架：剖析多线程模式下数据库连接
• 学习进度笔记2
• jQuery自动加载更多程序

组件 框架 笔记 程序 WXML组件 框架 笔记 程序 程序wxml 模板 程序wxml 组件 框架 常见 程序 语法 模板 程序wxml wxml-to-canvas程序uniapp canvas wxml 框架 命令 笔记 程序 wxml2canvas wxml2