第一篇【传奇开心果系列】WeUI开发原生微信小程序：汽车租赁小程序示例

最新推荐文章于 2024-04-07 19:15:29 发布
置顶 最新推荐文章于 2024-04-07 19:15:29 发布
阅读量451 收藏 1
点赞数 10
分类专栏： WeUI开发原生微信小程序示例 文章标签： 微信小程序 前端框架 android ios ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackchuanqi/article/details/135718596
版权

传奇开心果博文系列目录

  • WeUI开发原生微信小程序示例系列博文目录
    • 博文目录
      • 一、项目目标
      • 二、编程思路
      • 三、初步实现汽车租赁微信小程序示例代码
      • 四、实现汽车租赁微信小程序的登录注册示例代码
      • 五、实现汽车租赁微信小程序的订单管理示例代码
      • 六、整合实现比较完整的汽车租赁微信小程序示例代码
      • 七、归纳总结知识点

WeUI开发原生微信小程序示例系列博文目录

博文目录

一、项目目标

在这里插入图片描述
在这里插入图片描述使用WeUI和微信小程序开发者工具开发汽车租赁原生微信小程序：提供车辆展示、预订、租赁服务等功能，可以用于汽车租赁公司、共享汽车平台等

二、编程思路

当使用WeUI开发原生汽车租赁微信小程序时，你可以按照以下步骤进行：

  1. 创建项目：在微信开发者工具中创建一个新的小程序项目，并选择使用WeUI框架。

  2. 导入WeUI：将WeUI的相关文件导入到你的项目中。你可以从WeUI的官方网站（https://weui.io/）下载WeUI的源代码，然后将其放置在你的项目目录中。

  3. 构建页面：根据你的汽车租赁系统的需求，设计和构建相应的页面。你可以使用WeUI提供的组件和样式来创建各种界面元素，如按钮、表单、卡片等。

  4. 数据交互：使用微信小程序的API和WeUI的组件，实现与后端服务器的数据交互。你可以通过发送HTTP请求获取汽车租赁信息、提交订单等。

  5. 页面导航：根据你的系统设计，使用WeUI提供的导航组件（如导航栏、标签页）来实现页面之间的切换和导航。

  6. 表单验证：使用WeUI提供的表单组件和验证规则，对用户输入的数据进行验证，确保数据的完整性和准确性。

  7. 页面布局：使用WeUI的栅格系统和布局组件，创建页面的结构和布局，使界面看起来更加美观和一致。

  8. 样式定制：根据你的品牌和设计需求，对WeUI的样式进行定制，使其与你的汽车租赁系统的整体风格一致。

  9. 测试和调试：在开发过程中，使用微信开发者工具进行实时预览和调试，确保系统的功能和界面正常运行。

  10. 发布上线：完成开发和测试后，使用微信开发者工具进行打包和上传，将你的汽车租赁系统微信小程序发布到线上供用户使用。

以上是使用WeUI开发汽车租赁系统微信小程序的一般步骤。具体的实现细节和功能根据你的需求而定，可以根据WeUI的文档和示例进行开发。

三、初步实现汽车租赁微信小程序示例代码

在这里插入图片描述以下是一个简单的示例代码，展示了如何使用WeUI开发一个汽车租赁系统微信小程序的页面：

<!-- index.wxml -->
<view class="container">
  <view class="page-title">汽车租赁系统</view>
  <view class="car-list">
    <block wx:for="{{carList}}" wx:key="index">
      <view class="car-item">
        <image class="car-image" src="{{item.image}}"></image>
        <view class="car-name">{{item.name}}</view>
        <view class="car-price">租金：{{item.price}}元/天</view>
        <button class="rent-button" bindtap="rentCar">立即租车</button>
      </view>
    </block>
  </view>
</view>

/* index.wxss */
.container {
  padding: 20rpx;
}

.page-title {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.car-list {
  display: flex;
  flex-wrap: wrap;
}

.car-item {
  width: 45%;
  margin-bottom: 20rpx;
  padding: 10rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.car-image {
  width: 100%;
  height: 150rpx;
  border-radius: 8rpx;
}

.car-name {
  font-size: 16rpx;
  margin-top: 10rpx;
}

.car-price {
  font-size: 14rpx;
  color: #999999;
  margin-top: 5rpx;
}

.rent-button {
  width: 100%;
  height: 40rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 4rpx;
  margin-top: 10rpx;
}

// index.js
Page({
  data: {
    carList: [
      {
        name: "奔驰C200",
        price: 800,
        image: "/images/car1.jpg"
      },
      {
        name: "宝马X5",
        price: 1000,
        image: "/images/car2.jpg"
      },
      {
        name: "奥迪A6",
        price: 900,
        image: "/images/car3.jpg"
      }
    ]
  },
  
  rentCar: function(event) {
    var carName = event.currentTarget.dataset.name;
    // 在这里编写租车的逻辑
    console.log("租车：" + carName);
  }
})

在这个示例中，我们展示了一个汽车租赁系统的首页页面。页面包含一个标题、一个汽车列表以及每个汽车项包括汽车图片、名称、租金和租车按钮。使用WeUI提供的样式，我们设置了页面的布局和样式。

在JavaScript代码中，我们定义了一个名为carList的数据，其中包含了三个汽车的信息。在rentCar函数中，我们通过点击租车按钮获取到被点击的汽车名称，并在控制台打印出来。你可以在这个函数中添加实际的租车逻辑，比如向后端发送请求提交订单等。

请注意，这只是一个简单的示例代码，实际开发中需要根据你的具体需求进行扩展和完善。同时，你还需要创建其他页面和实现其他功能，比如用户登录、订单管理等。

四、实现汽车租赁微信小程序的登录注册示例代码

在这里插入图片描述以下是一个示例代码，展示了如何使用WeUI开发一个汽车租赁微信小程序的用户登录和注册功能的页面：

<!-- login.wxml -->
<view class="container">
  <view class="page-title">用户登录</view>
  <view class="form-group">
    <view class="form-label">手机号</view>
    <input class="form-input" type="number" placeholder="请输入手机号" bindinput="inputPhoneNumber" />
  </view>
  <view class="form-group">
    <view class="form-label">密码</view>
    <input class="form-input" type="password" placeholder="请输入密码" bindinput="inputPassword" />
  </view>
  <button class="login-button" bindtap="login">登录</button>
  <view class="register-link" bindtap="goToRegister">没有账号？去注册</view>
</view>

<!-- register.wxml -->
<view class="container">
  <view class="page-title">用户注册</view>
  <view class="form-group">
    <view class="form-label">手机号</view>
    <input class="form-input" type="number" placeholder="请输入手机号" bindinput="inputPhoneNumber" />
  </view>
  <view class="form-group">
    <view class="form-label">密码</view>
    <input class="form-input" type="password" placeholder="请输入密码" bindinput="inputPassword" />
  </view>
  <button class="register-button" bindtap="register">注册</button>
  <view class="login-link" bindtap="goToLogin">已有账号？去登录</view>
</view>

/* login.wxss 和 register.wxss 共用样式 */
.container {
  padding: 20rpx;
}

.page-title {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.form-group {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 16rpx;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  height: 40rpx;
  padding: 0 10rpx;
  border: 1rpx solid #999999;
  border-radius: 4rpx;
}

.login-button,
.register-button {
  width: 100%;
  height: 40rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 4rpx;
  margin-top: 20rpx;
}

.register-link,
.login-link {
  font-size: 14rpx;
  color: #007aff;
  text-align: center;
  margin-top: 10rpx;
}

// login.js
Page({
  data: {
    phoneNumber: '',
    password: ''
  },
  
  inputPhoneNumber: function(event) {
    this.setData({
      phoneNumber: event.detail.value
    });
  },
  
  inputPassword: function(event) {
    this.setData({
      password: event.detail.value
    });
  },
  
  login: function() {
    var phoneNumber = this.data.phoneNumber;
    var password = this.data.password;
    
    // 在这里编写登录逻辑，比如向后端发送请求验证登录信息
    
    // 假设登录成功，跳转到首页
    wx.switchTab({
      url: '/pages/index/index'
    });
  },
  
  goToRegister: function() {
    wx.navigateTo({
      url: '/pages/register/register'
    });
  }
});

// register.js
Page({
  data: {
    phoneNumber: '',
    password: ''
  },
  
  inputPhoneNumber: function(event) {
    this.setData({
      phoneNumber: event.detail.value
    });
  },
  
  inputPassword: function(event) {
    this.setData({
      password: event.detail.value
    });
  },
  
  register: function() {
    var phoneNumber = this.data.phoneNumber;
    var password = this.data.password;
    
    // 在这里编写注册逻辑，比如向后端发送请求创建新用户
    
    // 假设注册成功后，跳转到登录页面
    wx.navigateTo({
      url: '/pages/login/login'
    });
  },
  
  goToLogin: function() {
    wx.navigateTo({
      url: '/pages/login/login'
    });
  }
});

在这个示例中，我们展示了两个页面：登录页面和注册页面。每个页面都包含一个标题、表单组件和相应的按钮和链接。使用WeUI提供的样式，我们设置了页面的布局和样式。

在JavaScript代码中，我们使用data对象来保存用户输入的手机号和密码。在登录和注册函数中，我们可以编写实际的登录和注册逻辑，比如向后端发送请求验证登录信息或创建新用户。在示例中，我们假设登录和注册都成功，并在登录成功后跳转到首页或在注册成功后跳转到登录页面。

请注意，这只是一个简单的示例代码，实际开发中需要根据你的具体需求进行扩展和完善，比如添加表单验证、用户信息存储等。同时，你还需要处理用户登录状态的管理和其他相关功能，比如密码重置、退出登录等。

五、实现汽车租赁微信小程序的订单管理示例代码

在这里插入图片描述下面是一个示例代码，展示了如何使用WeUI开发一个汽车租赁微信小程序的订单管理页面：

<!-- order-list.wxml -->
<view class="container">
  <view class="page-title">订单管理</view>
  <view class="order-list">
    <view wx:for="{{ orders }}" wx:key="index" class="order-item">
      <view class="order-info">
        <view class="order-title">{{ item.carName }}</view>
        <view class="order-time">{{ item.rentalTime }}</view>
      </view>
      <view class="order-status">{{ item.status }}</view>
    </view>
  </view>
</view>

/* order-list.wxss */
.container {
  padding: 20rpx;
}

.page-title {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.order-list {
  margin-top: 20rpx;
}

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  border: 1rpx solid #cccccc;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}

.order-info {
  flex: 1;
}

.order-title {
  font-size: 16rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.order-time {
  font-size: 14rpx;
  color: #999999;
}

.order-status {
  font-size: 14rpx;
  color: #007aff;
}

// order-list.js
Page({
  data: {
    orders: [
      {
        carName: '奥迪A6',
        rentalTime: '2024-01-20 10:00',
        status: '已完成'
      },
      {
        carName: '宝马X5',
        rentalTime: '2024-01-21 14:30',
        status: '待取车'
      },
      {
        carName: '奔驰C200',
        rentalTime: '2024-01-22 09:15',
        status: '待还车'
      }
    ]
  }
});

在这个示例中，我们展示了一个订单管理页面，用于显示用户的租车订单信息。在data对象中，我们定义了一个orders数组，其中包含了三个订单的信息，包括车辆名称、租车时间和订单状态。

在页面的wxml部分，我们使用wx:for指令遍历orders数组，并使用class属性设置样式。每个订单项都包含了车辆信息和订单状态。

在wxss部分，我们设置了页面的布局和样式，包括容器的边距、标题的样式、订单列表和订单项的样式。

在JavaScript代码中，我们在data对象中定义了orders数组，并在onLoad函数中初始化了订单数据。在实际开发中，你可以根据需要从后端获取订单数据，并在orders数组中动态更新。

请注意，这只是一个简单的示例代码，实际开发中你可能需要与后端进行交互，根据用户的操作更新订单状态、处理取消订单等功能。同时，你还可以根据需求扩展和完善订单管理页面，比如添加筛选、搜索、订单详情等功能。

六、整合实现比较完整的汽车租赁微信小程序示例代码

在这里插入图片描述下面是一个整合了登录、注册和订单管理功能的比较完整的汽车租赁微信小程序示例代码：

<!-- app.wxml -->
<view class="container">
  <view wx:if="{{ !loggedIn }}" class="page-title">用户登录</view>
  <view wx:if="{{ loggedIn }}" class="page-title">订单管理</view>
  
  <view wx:if="{{ !loggedIn }}" class="form-group">
    <view class="form-label">手机号</view>
    <input class="form-input" type="number" placeholder="请输入手机号" bindinput="inputPhoneNumber" />
  </view>
  
  <view wx:if="{{ !loggedIn }}" class="form-group">
    <view class="form-label">密码</view>
    <input class="form-input" type="password" placeholder="请输入密码" bindinput="inputPassword" />
  </view>
  
  <button wx:if="{{ !loggedIn }}" class="login-button" bindtap="login">登录</button>
  <button wx:if="{{ loggedIn }}" class="logout-button" bindtap="logout">退出登录</button>
  
  <view wx:if="{{ loggedIn }}" class="order-list">
    <view wx:for="{{ orders }}" wx:key="index" class="order-item">
      <view class="order-info">
        <view class="order-title">{{ item.carName }}</view>
        <view class="order-time">{{ item.rentalTime }}</view>
      </view>
      <view class="order-status">{{ item.status }}</view>
    </view>
  </view>
</view>

/* app.wxss */
.container {
  padding: 20rpx;
}

.page-title {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.form-group {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 16rpx;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  height: 40rpx;
  padding: 0 10rpx;
  border: 1rpx solid #999999;
  border-radius: 4rpx;
}

.login-button,
.logout-button {
  width: 100%;
  height: 40rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 4rpx;
  margin-top: 20rpx;
}

.order-list {
  margin-top: 20rpx;
}

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  border: 1rpx solid #cccccc;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}

.order-info {
  flex: 1;
}

.order-title {
  font-size: 16rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.order-time {
  font-size: 14rpx;
  color: #999999;
}

.order-status {
  font-size: 14rpx;
  color: #007aff;
}

// app.js
App({
  globalData: {
    loggedIn: false,
    phoneNumber: '',
    password: '',
    orders: [
      {
        carName: '奥迪A6',
        rentalTime: '2024-01-20 10:00',
        status: '已完成'
      },
      {
        carName: '宝马X5',
        rentalTime: '2024-01-21 14:30',
        status: '待取车'
      },
      {
        carName: '奔驰C200',
        rentalTime: '2024-01-22 09:15',
        status: '待还车'
      }
    ]
  },

  inputPhoneNumber: function(event) {
    this.globalData.phoneNumber = event.detail.value;
  },

  inputPassword: function(event) {
    this.globalData.password = event.detail.value;
  },

  login: function() {
    var phoneNumber = this.globalData.phoneNumber;
    var password = this.globalData.password;

    // 在这里编写登录逻辑，比如向后端发送请求验证登录信息

    // 假设登录成功
    this.globalData.loggedIn = true;
    wx.showToast({
      title: '登录成功',
      icon: 'success'
    });
  },

  logout: function() {
    this.globalData.loggedIn = false;
    wx.showToast({
      title: '退出登录',
      icon: 'success'
    });
  }
});

在这个示例中，我们使用了一个全局的App对象来管理登录状态和订单数据。在globalData中，我们定义了loggedIn表示用户是否已登录，phoneNumber表示用户输入的手机号，password表示用户输入的密码，以及orders数组表示订单数据。

在wxml部分，我们根据用户的登录状态显示不同的标题、表单和按钮。如果用户未登录，则显示登录表单和登录按钮；如果用户已登录，则显示订单列表和退出登录按钮。

在wxss部分，我们设置了页面的布局和样式，包括容器的边距、标题的样式、表单和按钮的样式，以及订单列表和订单项的样式。

在JavaScript代码中，我们在App对象的globalData中定义了登录和订单数据，并在inputPhoneNumber和inputPassword函数中更新用户输入的手机号和密码。在login函数中，我们可以编写实际的登录逻辑，比如向后端发送请求验证登录信息。在示例中，我们假设登录成功，并通过设置loggedIn为true来更新登录状态。在logout函数中，我们将loggedIn设置为false来退出登录。

请注意，这只是一个简单的示例代码，实际开发中你可能需要与后端进行交互，根据用户的操作更新登录状态和订单数据，处理取消订单、创建订单等功能。同时，你可以根据需求扩展和完善其他功能，比如注册、密码重置、订单详情等。

七、归纳总结知识点

在这里插入图片描述在这个示例代码中，涉及到了以下几个主要的知识点：

  1. 微信小程序的页面结构和布局：通过使用wxml文件定义页面的结构，使用wxss文件定义页面的样式，可以实现页面的布局和美化。

  2. 全局数据的管理：通过App对象的globalData属性，可以在不同的页面和组件之间共享数据。这个示例中使用globalData来管理登录状态和订单数据。

  3. 用户输入的处理：通过使用bindinput事件和相应的处理函数，可以获取用户输入的内容，并进行相应的处理。这个示例中使用inputPhoneNumber和inputPassword函数来获取用户输入的手机号和密码。

  4. 登录和退出登录的逻辑：通过编写相应的登录和退出登录函数，可以实现用户的登录和退出登录功能。这个示例中使用login和logout函数来模拟登录和退出登录的过程。

  5. 页面内容的动态展示：通过使用条件渲染和列表渲染，可以根据不同的条件和数据动态展示页面的内容。这个示例中根据用户的登录状态和订单数据动态展示不同的内容。

  6. 页面样式的设置：通过使用wxss文件设置样式，可以美化页面的外观。这个示例中使用wxss文件设置了标题、表单、按钮和订单列表的样式。

这些知识点是开发微信小程序中常见的基础知识，理解和掌握它们可以帮助你开发出功能完善、界面美观的微信小程序应用。当然，在实际开发中还会涉及到其他更多的知识点和技术，例如网络请求、数据存储、页面跳转等，你可以根据具体的需求进一步学习和应用。

传奇开心果编程
关注
  • 10
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
weui开发整套移动端微商城模板源码
11-13
一、源码特点 1、自适应，运用了html5新特性标签，使用weui开发的一整套移动端商城，包括首页，购物车，订单管理，评价，分类，会员中心等，全面到注册协议都弄好了。私人定制服务手机网站模板html源码下载，可进行二次修改进行开发，适合微信，值得借鉴。 文档参考地址：http://www.ui92.com/
微信小程序：WeUI一个专为微信小程序设计的UI框架
做个懂管理、懂产品，懂技术的大叔
05-15 1650
WeUI是什么 WeUI 是一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库，后续随着小程序、企业微信等等的开放能力出现，WeUI也提供了小程序、企业微信等等的版本。我们将要介绍的，就是WeUI的小程序版本。 WeUI提供非常多的基础组件。列举如下： 表单组件 Button 按钮 Input 输入框 List 列表 Slider 滑块 Uploader 上传组件 基础组件
微信小程序（原生）开发入门学习笔记
最新发布
gl199555的博客
04-07 2094
原生微信小程序开发学习笔记
Weui初始开发链接
蜗牛小前的博客
05-12 242
https://blog.csdn.net/hou549135295/article/details/72621484
微信小程序开发之——用WeUI快速开发电影应用
我的博客
10-26 1255
一 概述 本文利用WeUI，仿制一款电影应用，下面是效果图对比 别人应用 仿制应用 二 应用分析 2.1 官方UI组件-WeUi-wxss 编号 内容 说明 1 组件 使用 2 扩展能力 使用 3 接口 未使用 4 云开发 未使用 2.2 应用与WeUI-wxss的对应关系 编号 内容 组件 1 table菜单 扩展能力/扩展组件/Tabs 2 正在热映/电影列表 扩展能力/基础组件/Panel 3 内容搜索/搜索框 扩展能
自己写的 weui 项目，方便大家学习
01-23
自己写的 weui 项目，方便大家学习下载。weui是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
微信小程序组件开发示例：上传图片组件
03-29
最近在微信小程序上要实现上传图片的功能，因为多个页面都会用到这个功能，我试着就像网页开发一样，写一个能复用的组件。 上传图片的功能，微信小程序已经提供了相应的组件和API，结合 weui 样式，如果不考虑复用的...
微信小程序weUI组件所有demo示例
10-17
之前上传过wxss后缀的样式表，今天把整个ui组件从github上拷贝下来方便大家下载，下载完直接用微信web开发者工具打开整个文件夹即可
微信小程序中weui用法解析
12-13
在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队...
微信小程序原生WEUI网页开发样式库_psd&sketch下载.zip
12-28
微信小程序原生WEUI网页开发样式库 psd&sketch下载 PSD、主题包、小应用UI、小程序、微信psd、微信UI界面、微信UI设计、微信小应用psd、微信设计流程、微信设计规范
基于微信小程序实现爱卡汽车小程序源码分享
06-13
1. 微信web开发者工具：微信小程序官网 这是个比较好用的编辑器，对于小程序编辑很方便。 2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标...
weUI 入门教程
02-24
weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266
微信小程序，租车小程序，租车公司预约小程序
01-27
租车小程序前端 项目介绍 用于租车公司预约的小程序 软件架构 后端 开发工具：Visual Studio 2015 开发语言：C# 框架：ABP Zero 数据库：MySQL NET框架：.net461 IIS版本：IIS 10 小程序端 开发工具：微信开发者工具 UI框架：ZanUI 插件：wxparser（富文本显示） 其它：阿拉丁统计、fundebug 第三方服务 腾讯云存储 阿里云短信 更新日志 20XXXXX 即将加入营销工具：分享得赏金、优惠券 2018-10-17 1.后台增加联盟功能，可以整合某个城市多家租车公司汽车信息，发布租车小程序平台 2018-10-5 增加取车城市、取车地点 增加官方提供意见反馈 增加公众号关注组件 多处优化 2018-8-22 加入微信支付、余额支付； 付款方式：定金、全额； 汽车信息费用填写更详情； 订单填写页优化、订单页优化； 加入钱包、查看
多功能租车平台微信小程序源码 汽车租赁平台源码 摩托车租车平台源码 汽车租赁小程序源码.zip
11-23
这个可以用来做租车平台，摩托车汽车都可以 要用微擎框架的，源码里面带有框架和教程
微信小程序原生开发学习01
yinyinlee07的博客
07-27 1065
自定义组件同样也是要新建wxml、wxss、json、js四个文件，在json{true}然后在wxml文件中编写组件的结构，wxss中编写样式，与页面的写法无异。注意在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。在组件js文件中，要需要使用{//这里定义了innerText属性，属性值可以在组件使用时指定innerText{type{//这里是一些组件内部数据someData{{//这里是一个自定义方法customMethod}}}){......
【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup，其中包含图片和名称
资深全栈开发工程师
07-18 3379
在微信小程序中，你可以使用weui组件库来实现弹出一个确认的popup，并在其中包含图片和名称。，并传递图片和名称数据。确认popup会显示图片、名称和确认按钮。当点击确认按钮或点击popup以外的区域时，在这个示例中，点击按钮会触发。
【微信小程序中使用WEUI组件】
一个平凡的技术热爱者
04-25 626
在小程序开发过程中，不断探索学习好的开源框架。
WeUI for 小程序--使用教程
热门推荐
程诺
06-21 8万+
weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
微信小程序从零开始开发步骤（八）引入框架WeUI
祈澈菇凉
03-23 1万+
首先来看下WeUI的官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，...
微信小程序开发怎么使用weui
05-16
使用weui进行微信小程序开发，可以按照以下步骤进行： 1. 在小程序项目中引入weui框架，可以通过在app.wxss中引入weui.wxss文件来实现： ``` @import "weui.wxss"; ``` 2. 在需要使用weui组件的页面中，按照weui的文档使用对应的组件即可，例如使用button组件： ``` <view class="page__hd"> <view class="page__title">Button</view> <view class="page__desc">按钮</view> </view> <view class="page__bd page__bd_spacing"> <view class="weui-btn-area"> <button class="weui-btn">普通按钮</button> <button class="weui-btn weui-btn_primary">主要按钮</button> <button class="weui-btn weui-btn_warn">警告按钮</button> <button class="weui-btn weui-btn_disabled">禁用按钮</button> <button class="weui-btn weui-btn_plain-primary">底部主要按钮</button> <button class="weui-btn weui-btn_plain-default">底部次要按钮</button> </view> </view> ``` 以上就是使用weui进行微信小程序开发的大致流程。需要注意的是，weui的使用方法和样式定义可以在weui官方文档中查看。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

传奇开心果编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值