Cao Note

外观

WXML-WXSS语法 ​

WXML 语法 ​

wxml 概述及作用 ​

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

组件+数据

view 类似于 div

text 类似于 span

image 类似于 img

数据绑定 ​

<view>{{name}}</view>
<view>{{name}}</view>

绑定属性 ​

<view data-title="{{title}}">{{name}}</view>
<view data-title="{{title}}">{{name}}</view>

关键字的处理 ​

关键字：true 和 false

<checkbox checked="{{false}}"></checkbox>
<checkbox checked="{{false}}"></checkbox>

运算 ​

算术运算 ​

<view data-title="{{title}}">{{age+1}}</view>
<view data-title="{{title}}">{{age+1}}</view>

逻辑运算 ​

<checkbox checked="{{age>20}}"></checkbox>
<checkbox checked="{{age>20}}"></checkbox>

字符串运算 ​

<view data-title="{{title}}">{{name+"san"}}</view>
<view data-title="{{title}}">{{name+"san"}}</view>

路径运算 ​

<view data-title="{{title}}">{{arr[1]}}</view>

<view data-title="{{title}}">{{obj.height}}</view>
<view data-title="{{title}}">{{arr[1]}}</view>

<view data-title="{{title}}">{{obj.height}}</view>

三元运算符 ​

<view data-title="{{title}}">{{age>18?"成年":"未成年"}}</view>
<view data-title="{{title}}">{{age>18?"成年":"未成年"}}</view>

**总结:**对于小程序渲染数据只要碰到 js 代码就使用,渲染数据时不能调用函数。

列表渲染 wx:for ​

jsx
<view wx:for="{{arr}}" wx:key="*this">
  {{item}}---{{index}}
</view>

<view wx:for="{{arr}}" wx:for-index="key" wx:for-item="val" wx:key="*this">
  {{val}}---{{key}}
</view>

<view wx:for="{{obj}}" wx:key="*this">
  {{item}}---{{index}}
</view>

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



<view wx:for="{{name}}" wx:key="*this">

  {{item}}---{{index}}

</view>
<view wx:for="{{arr}}" wx:key="*this">
  {{item}}---{{index}}
</view>

<view wx:for="{{arr}}" wx:for-index="key" wx:for-item="val" wx:key="*this">
  {{val}}---{{key}}
</view>

<view wx:for="{{obj}}" wx:key="*this">
  {{item}}---{{index}}
</view>

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



<view wx:for="{{name}}" wx:key="*this">

  {{item}}---{{index}}

</view>

block 是包裹元素 ​

jsx
<block wx:for="{{goods}}">
  <view>id:{{item.id}}</view>
  <view>name:{{item.name}}</view>
</block>
<block wx:for="{{goods}}">
  <view>id:{{item.id}}</view>
  <view>name:{{item.name}}</view>
</block>

wx：key ​

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

条件渲染 ​

jsx
<view wx:if="{{age>=18}}">成年</view>
<view wx:if="{{age>=18}}">成年</view>
<view wx:else>未成年</view>

<view wx:if="{{age<18}}">未成年</view>
<view wx:elif="{{age<=30}}">中青年</view>
<view wx:else>中年</view>
<view wx:if="{{age>=18}}">成年</view>
<view wx:if="{{age>=18}}">成年</view>
<view wx:else>未成年</view>

<view wx:if="{{age<18}}">未成年</view>
<view wx:elif="{{age<=30}}">中青年</view>
<view wx:else>中年</view>

hidden 属性 ​

<view hidden="{{age>=18}}">成年</view>
<view hidden="{{age>=18}}">成年</view>

wx:if vs hidden ​

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

模板 (了解) ​

定义模板 ​

jsx
<template name="temp">
  <view>我的名字是:zhangsan</view>
  <view>我的年龄是:18</view>
</template>
<template name="temp">
  <view>我的名字是:zhangsan</view>
  <view>我的年龄是:18</view>
</template>

使用模板 ​

使用模板并且向模板中传值 ​

jsx
<template name="temp">
  <view>我的名字是:{{user.name}}</view>
  <view>我的年龄是:{{user.age}}</view>
</template>
<template name="temp">
  <view>我的名字是:{{user.name}}</view>
  <view>我的年龄是:{{user.age}}</view>
</template>

模板的作用域

引用 （了解） ​

import ​

<import src="../../templates/template.wxml" />
<import src="../../templates/template.wxml" />

import 只引入目标文件中的 template 标签以内东西

include ​

<include src="../../templates/template.wxml" />
<include src="../../templates/template.wxml" />

include 只引入目标文件中的 template 标签以外东西

WXSS 样式 ​

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

尺寸单位 ​

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

设备rpx 换算 px (屏幕宽度/750)px 换算 rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入 ​

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

选择器 ​

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容

小程序不支持属性选择器

小程序的背景图不支持本地图片路径，可以将图片转成 base64 位的字符串使用

全局样式/局部样式 ​

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

字体图标 ​

jsx
安装步骤：
(1)进入阿里巴巴矢量图标库https://www.iconfont.cn/
(2)选择自己的图标,添加到购物车，
(3)进入购物车,选择项目设置，选择base64点击下载代码到本地,进行解压(里面有字体文件iconfont.ttf,也有图标转化好的base64格式的文件iconfont.css)将iconfont.css中的内容粘贴进入到页面的wxss中，
(4)page.wxml页面进行使用
<view class="iconfont 你的图标类"></view>
安装步骤：
(1)进入阿里巴巴矢量图标库https://www.iconfont.cn/
(2)选择自己的图标,添加到购物车，
(3)进入购物车,选择项目设置，选择base64点击下载代码到本地,进行解压(里面有字体文件iconfont.ttf,也有图标转化好的base64格式的文件iconfont.css)将iconfont.css中的内容粘贴进入到页面的wxss中，
(4)page.wxml页面进行使用
<view class="iconfont 你的图标类"></view>

代码案例：

<view class="iconfont icon-gonglve"></view>
<view class="iconfont icon-gonglve"></view>

WXS 脚本概述 ​

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构，可以充当 wxml 中的函数功能。

wxs 的语法和 js 的 es5 语法基本一样

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

jsx
<view>{{m1.jiequ(user.name,0,2)}}</view>

<wxs module="m1">
  var jiequ = function (str, start, end) {
    return str.substring(start, end)
  }
  module.exports = {
    jiequ: jiequ
  }
</wxs>
<view>{{m1.jiequ(user.name,0,2)}}</view>

<wxs module="m1">
  var jiequ = function (str, start, end) {
    return str.substring(start, end)
  }
  module.exports = {
    jiequ: jiequ
  }
</wxs>

WXS 模块 ​

wxs 是不同于 js 的一门语言，语法和 js 的 ES5 语法

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

Copyright © 2024-present xiaocao