微信小程序从入门到进阶（一）

pages

所有的小程序页面，每个页面以单独的文件夹存在

index：index 页面文件夹，文件夹下面都包含4个基本的页面文件，这四个文件共同组成index页面

- index.js：.js 文件 -- 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等
- index.json：.json 文件 -- 当前页面的配置文件，配置页面的外观、表现等
- index.wxml：.wxml 文件 -- 页面的模板结构文件
- index.wxss：.wxss 文件 -- 当前页面的样式表文件
- utils：工具类文件夹
- utils.js

app.js：小程序的项目逻辑文件，用来注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
app.json：小程序公共配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.wxss：小程序公共样式表
project.config.json：是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

- setting 中保存了编译相关的配置
- projectname 中保存的是项目名称
- appid 中保存的是小程序的账号 ID

sitemap.json：配置小程序及其页面是否允许被微信索引

- rules中保存了索引规则列表的配置
- rules规则中，action表示页面是否能被索引(allow,disallow)，page表示生效的页面

**wxss的介绍 **

WXSS

- WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML 的组件样式
- 类似于网页开发中的 CSS
- WXSS 具有 CSS 大部分的特性

新增了尺寸单位 -- rpx，一个 rpx 为页面宽度的 1 / 750
提供了全局的样式和局部样式。

go 复制代码

  全局样式：写入到 根目录的`wxss` 中的样式
  局部样式：写入到 页面的 `wxss` 中的样式

此外 WXSS 仅支持部分 CSS 选择器

php 复制代码

  .class（推荐使用） 和 `#id`
  element
  并集选择器和后代选择器
  ::after和::before等伪类选择器

宿主环境和运行环境

宿主环境指的是程序运行所必须的依赖环境
1. web 前端的宿主环境为：浏览器
2. android 软件的宿主环境为：android 系统
3. IOS 软件的宿主环境为：IOS系统
小程序的宿主环境是什么？

小程序的宿主环境为：手机微信。小程序可以调用手机微信中的扫码、支付、登录、分享等等功能
小程序的运行环境：

分成渲染层和逻辑层

其中 WXML 模板和 WXSS 样式工作在渲染层渲染层的界面使用了WebView 进行渲染一个小程序存在多个界面，所以渲染层存在多个WebView线程

JS 脚本工作在逻辑层。

逻辑层采用JsCore线程运行JS脚本
这两个线程的通信会经由微信客户端做中转
逻辑层发送网络请求也经由 Native（手机原生系统）转发

**小程序中完成响应式 **

在 data 中定义数据，在 wxml 中通过 {{}} 使用数据

javascript 复制代码

// 在data中定义数据
// index.js
// 获取应用实例
const app = getApp()

Page({
 data: {
   product: {
     price: 10,
     num: 5
   }
 }
})

// 在wxml中使用数据
<view>
  <view>
    <!-- wxml 中访问数据，必须使用 {{}} 语法，{{}} 语法中可以放置【任意的、单一的 JavaScript 表达式】 -->  
    商品的单价：{{product.price}}
  </view>
  <view>
    商品的数量：{{product.num}}
  </view>
  <view>
    商品的总价格：{{product.price * product.num}}
  </view>
</view>

处理点击事件

想要给 button 添加点击事件则不可以使用 click 而是bindtap || bind:tap。

bash 复制代码

  <button type="primary" bind:tap="onAddNum">num + 1</button>
// 在js中定义对应的事件
 onAddNum () {
  console.log('onAddNum')
 }

修改data中的数据

需要借助一个函数 setData。

setData 接收一个对象作为参数，这个对象就是最新的 data 数据。

其中 key 为要修改的数据， value 为最新的值

kotlin 复制代码

 /**
  * 定义事件处理的方法
  */
 onAddNum () {
  this.setData({
    'product.num': this.data.product.num + 1
  })

事件传参通过属性绑定（data-xx）的形式，把需要传递的参数绑定到当前 DOM 元素中

在对应的回调函数中，通过 e.target.dataset 进行访问

形参

首先先来看形参，对于点击事件的回调方法而言，默认会接收一个参数 event （事件对象）。这个 event 对象为：回调方法的唯一参数

实参

对于小程序中，我们不能直接为回调方法传递实参。

而是需要通过：属性绑定的形式，把需要传递的参数绑定到当前 DOM 元素中，绑定数据的属性需要以 data- 开头。该属性可以通过 e.target.dataset 进行访问。

arduino 复制代码

// html
<button type="primary" bind:tap="onAddNum" data-step="5">num + 1</button>

// js
 onAddNum (e) {
  //  获取 data-step 的值
  let step = parseInt(e.target.dataset.step);
  this.setData({
    'product.num': this.data.product.num + step
  })
 }

实现双向数据绑定

通过 value 为 input 视图绑定数据
通过监听 bindinput 获取视图的变化，在回调方法中修改数据

xml 复制代码

// html
<view>
    商品的数量：
    <!-- 1. 创建一个【数字输入框】 -->
    <!-- 2. 设置 【商品数量】 为输入框的初始值 -->
    <input class="num-input" type="number" value="{{ product.num }}" bindinput="onInput" />
</view>
  
// js
/**
  * 3. 监听 input 的输入事件
  */
 onInput (e) {
  //  4. 获取用户输入的值
   const val = parseInt(e.detail.value);
  //  5. 赋值给【商品数量】
  this.setData({
    'product.num': val
  })

条件渲染

wx:if ... wx:elif ... wx:else
hidden
v-if 用来控制【组件是否会被渲染】
hidden 用来控制【组件是否会被隐藏】
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

xml 复制代码

<!-- wx:if ... wx:elif ... wx:else：判断结果为 true 则进行渲染，否则不进行渲染 -->
  <view>
    售货员小姐姐惊呼：
    <text wx:if="{{ product.price * product.num <= 100 }}">hello 帅哥</text>
    <text wx:elif="{{ product.price * product.num > 100 && product.price * product.num < 1000 }}">哇哦 有钱人哦</text>
    <text wx:else>土豪你好</text>
  </view>
  <!-- hidden：结果为 true 则隐藏，否则不隐藏 -->
  <view>
    售货员小姐姐惊呼：
    <text hidden="{{ !(product.price * product.num <= 100) }}">hello 帅哥</text>
    <text hidden="{{ !(product.price * product.num > 100 && product.price * product.num < 1000) }}">哇哦 有钱人哦</text>
    <text hidden="{{product.price * product.num < 1000}}">土豪你好</text>
  </view>

列表渲染

小程序中为我们提供了 v-for 指令，让我们进行【列表渲染】的实现。

同时也为我们提供了一个：包裹性质的容器 block 组件，当我们去循环多个元素时，可以使用 block 进行包裹，block 组件只起到包裹的其他组件的作用，本身并不会进行渲染。

xml 复制代码

// html
<!-- 
    利用 wx:for 循环渲染商品
    默认数组的当前项的下标变量名默认为 index，
    数组当前项的变量名默认为 item
   -->
  <view class="product-box">
    <block wx:for="{{ products }}" wx:key="index">
      <view class="product-item">
        <text>商品名：{{item.name}}</text>
        <text>价格：{{item.price}}</text>
      </view>
    </block>
  </view>
  
// js
data: {
   products: [
     {
       name: '苹果',
       price: 3.2
     },
     {
       name: '面包',
       price: 5.0
     },
     {
       name: '可乐',
       price: 2.5
     }
   ]
 }