微信小程序笔记（八）

小徐今天学习了吗
161 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章微信小程序笔记（七）中，我们学习了微信小程序的相关知识点，包括小程序的模块规范、使用 npm、全局数据、WXS介绍等相关知识点。在本篇文章中，我们将学习WXS基本用法、表单组件、提交表单、创建自定义组件、调用自定义组件等相关知识点。

WXS基本用法

WXS 与 JS 的语法主要差异在于：

  • 变量声明只能用 var
  • 变量名不能有 $
  • 不能用关键字 new
  • 模块导出语句不能简写（如： module.exports = { name: name}）

在WXML中声明WXS代码块：

  • 要使用 <wxs>标签，并且必须设置好 module 属性
  • 然后在 <wxs> 标签内编写代码，或通过标签的 src 引入外部的 .wxs 文件

在WXML中调用WXS：

使用插值表达式：{{ module名.导出名 }}

操作步骤：

  1. 在页面js中准备一个日期时间戳数据
Page({
  data: {
    now: Date.now()
  }  
})
  1. 在页面wxml中渲染该时间戳
<view class="now">{{ now }}</view>
  1. 在页面wxml中放一个wxs标签，并设置module属性，然后编写 WXS 版的格式化函数
<!-- wxs 标签必须指定 module 属性 -->
<wxs module="formatTools">
  function formatDate(timestamp) {
    // 通过 getDate() 将时间戳转换成日期对象
    var d = getDate(timestamp);
  
    // 拼接成可阅读的格式，如：2020年10月10日
    return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' d.getDate() + '日';
  }

  module.exports = {
 	 	formatDate: formatDate
  }
</wxs>

或者wxs/format.wxs

function formatDate(time) {
  // new Date(time)
  var date = getDate(time)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  return year + '年' + month + '月' + day + '日'
}

module.exports = {
  formatDate: formatDate
}

<wxs module="formatTools" src="../../wxs/format.wxs"></wxs>
  1. 调用 WXS 函数来格式化时间戳
<view class="now">{{ formatTools.formatDate(now) }}</view>

表单：表单组件

小程序中的常用表单组件有文本框input、密码框input、单选框radio、radio-group、多选框checkbox、checkbox-group、底部弹起的选择框picker。

<input type="text"/>

<input type="text" password/>

<radio-group>
  <radio value="1">男</radio>
  <radio value="0">女</radio>
</radio-group>

<checkbox-group>
  <checkbox value="1">苹果</checkbox>
  <checkbox value="2">香蕉</checkbox>
  <checkbox value="3">榴莲</checkbox>
</checkbox-group>

<picker mode="region">
  <button>请选择</button>
</picker>

表单：提交表单

表单的主要职责是收集用户填写的数据，然后将数据提交到服务端处理。

一个能正常获取数据的小程序表单应包含以下特征：

  1. 使用 包裹并设置了 submit 事件监听
  2. 每个表单项都设置了 name 属性
  3. 包含一个设置了 form-type="submit" 的 按钮

这样的表单就能被提交，并在 submit 监听函数中通过 e.detail.value 获取到表单数据了。

操作步骤

  1. 编写表单结构
    <form bind:submit="send">
  <view>
    <text>账号: </text>
    <input type="text" name="username"/>
  </view>

  <view>
    <text>密码: </text>
    <input type="text" password name="password"/>
  </view>

  <view>
    <checkbox-group name="remember">
      <checkbox value="1">记住密码</checkbox>
    </checkbox-group>
  </view>

  <button form-type="submit">提交</button>
</form>
  1. 获取表单数据
    Page({
  send(e) {
    console.log(e.detail.value);
  }
})

自定义组件

创建组件

自定义组件与小程序页面的文件构成非常类似，一个组件也是由4个文件组成。

操作步骤：

  1. 在项目根目录创建 components 目录
  2. 在 components 目录下创建一个子目录存放一个组件，比如 counter
  3. 在 counter目录上点击鼠标右键，选择“新建Component”
  4. 输入组件名counter ，完成创建(由4部分组成)

调用组件

组件的注册分为全局注册和局部注册。

  • 全局注册 所有的页面都可以用
  • 局部注册 只有某个页面可以用

要在页面、或其他自定义组件中调用一个自定义组件，需遵循以下步骤：

  1. 先在全局配置或页码配置文件中，通过 usingComponents 注册自定义组件
  2. 然后就可以通过标签的方式来调用该组件

操作步骤：

  1. 在配置文件中注册组件
    {
  ...
  "usingComponents": {
    "counter": "components/counter/counter"
  }
}
  1. 在页面wxml文件中调用组件
    <counter />
avatar
文章
阅读
粉丝