微信小程序实例:开发showToast消息提示接口

        相信在学习小程序文档或者已经创建项目的开发员们,都很清楚小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式,那假如我想要的是不要图标只要存粹的文字提醒呢?或者是我不要微信单方面提供的那种图片呢?想要自己指定的情况呢?这时候要怎么办..


        这几天我根据wx.showToast接口提供的参数,跟着写了个消息提醒模板,

1、如果没有指定icon图标地址,那么就是单纯的显示文字提示,否则就是图标+文字的模式,这时候就要确保icon指向的图片地址是正确的啦。

2、如果没有指定duration提示的延迟时间,默认是1.5s,而我设置的最大值10s是不会自动隐藏消息提示的,除非手动hideToast. 单位:毫秒

3、如果没有指定mask遮罩,默认是跟着显示的,防止触摸穿透

4、如果没有指定cb回调函数,默认直接显示消息提醒,否则可以在等消息提示结束后即刻处理一些其他业务:例如地址跳转,改变订单状态等等

        

以下是整个模板代码结构:        

showToast.wxml::

<template name="showToast">
  <block wx:if="{
  {showToast.isShow? showToast.isShow: false}}">
    <view class="toast-bg" wx:if="{
  {showToast.mask==false? false : true}}"></view>
    <view class="toast-center">
      <view class="toast">
        <image class="toast-icon" src="{
  {showToast.icon}}" mode="scaleToFill" wx:if="{
  {showToast.icon}}" />
        <text class="toast-text">{
  {showToast.title}}</text>
      </view>
    </view>
  &
  • 18
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
以下是一个简单的表单微信小程序实例,包含姓名、性别、年龄和联系方式四个字段: 1. 在微信开发者工具中创建一个新的小程序项目,选择“空白模板”。 2. 在 app.json 中添加以下代码,配置页面路由: ``` { "pages": [ "pages/index/index", "pages/form/form" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "表单", "navigationBarTextStyle": "black" } } ``` 3. 在 pages/index 目录下创建 index.wxml 文件,添加一个“进入表单”按钮,点击后跳转到表单页面: ``` <view class="container"> <button class="btn" bindtap="goToForm">进入表单</button> </view> ``` 4. 在 pages/index 目录下创建 index.js 文件,添加 goToForm 函数,用于跳转到表单页面: ``` Page({ goToForm: function() { wx.navigateTo({ url: '../form/form' }) } }) ``` 5. 在 pages/form 目录下创建 form.wxml 文件,添加表单元素: ``` <view class="container"> <form bindsubmit="submitForm"> <view class="input-group"> <text>姓名:</text> <input name="name" placeholder="请输入姓名"></input> </view> <view class="input-group"> <text>性别:</text> <radio-group name="gender"> <label><radio value="male"></radio>男</label> <label><radio value="female"></radio>女</label> </radio-group> </view> <view class="input-group"> <text>年龄:</text> <input name="age" type="number" placeholder="请输入年龄"></input> </view> <view class="input-group"> <text>联系方式:</text> <input name="contact" placeholder="请输入联系方式"></input> </view> <button class="btn" formType="submit">提交</button> </form> </view> ``` 6. 在 pages/form 目录下创建 form.js 文件,添加 submitForm 函数,用于提交表单并跳转回首页: ``` Page({ submitForm: function(e) { wx.showToast({ title: '提交成功', icon: 'success', duration: 2000, success: function() { wx.navigateBack() } }) } }) ``` 7. 在 app.wxss 中添加样式: ``` .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .btn { margin-top: 20px; padding: 10px 20px; border: none; border-radius: 5px; background-color: #007aff; color: #fff; } .input-group { display: flex; flex-direction: row; align-items: center; margin-top: 20px; } input { flex: 1; height: 30px; border: 1px solid #ddd; border-radius: 5px; padding: 5px; } label { margin-left: 10px; } .btn[type="submit"] { margin-top: 40px; } ``` 以上就是一个简单的表单微信小程序实例,可以根据实际需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值