微信公众号开发C#系列-12、微信前端开发利器:WeUI

   日期:2024-12-26    作者:gzhuarentang 移动:http://3jjewl.riyuangf.com/mobile/quote/45431.html

通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的移动端UI组件,最后找到了微信官方开发的一套前端组件:WeUI。

2.1 WeUI概述

WeUI、微信公众号开发的瑞士军刀。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。有了这个作为基础,我们再也不用担心微信开发的浏览器兼容性问题了,微信官方推出的这个东西拯救了千千万万的开发者

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。

WeUI开源地址:https://github.com/Tencent/weui

WeUI使用示例:https://weui.io/

基于jquery的WeUI:http://jqweui.com/(提供了大量的第三方组件库

2.2 为什么选择jQuery WeUI

jQuery WeUI 的定位正如 jQuery 的定位:做一把锋利易用的小刀,而不是做一个笨重的大炮。

  • 简单易用,无上手难度
  • 丰富强大的组件库,并且还在不断完善中
  • 轻量,无限制,可以结合任何主流JS框架使用,比如 等
  • 高性能的 CSS3 动画,低端手机上依然可以较流畅运行
  • 详尽完善的官方文档
  • 标准稳定的API,基本可以保证版本透明更新
  • 基于 MIT 协议发布,免费开源

考虑到大家对WeUI组件的使用有忧虑,不知如何下手。下面我就从最基础的开始,手把手教你入门WeUI。已经很熟悉的朋友请直接跳过此段,前往官方网站查看demo。

1、引用必须的文件

如果你用的是原始的开发方式,比如基于jQuery的开发,那么你首先需要去Github上面将WeUI的源文件down下来,然后引入到你的项目;如果是基于npm管理组件,使用npm命令的方式引入WeUI组件即可。这里我们使用的是原始的开发方式。如果你只需要WeUI的css样式支持,那么你只需要引入weui.css文件即可;如果除了样式之外,还需要WeUI的js组件支持,那么你还需要引用另外一个包:weui.js。下面先介绍基础的WeUI样式库,先来看看WeUI到底能为我们带来啥,后面再来分享WeUI.js以及jquery.WeUI.js的相关技术。

要使用WeUI,这里首先必须引入css样式文件

 

2、最基础的组件样式

下面我们以一个最基础的表单来展示WeUI的使用方法,如下我们开发一个个人资料录入的页面效果。

 
 

代码讲解

(1)网页上面的这一句必须要有,这个和WeUI无关,是浏览器的显示比例问题。建议各位准备做移动端开发之前可以百度下viewport的含义,这样更容易理解响应式。加这一句是告诉浏览器在不同的设备上面的显示比例问题。

(2)最外面必须要有一个大的容器div,即上述代码里面的

(3)上述代码里面的radio和checkbox的效果是可以切换的。比如上述代码改下可以将性别这一项变成多选选,爱好这一项变成单选,你只需要将radio和checkbox切换即可。

4.1、switch开关

 
 

4.2、文本框搜索组件

 
 

4.3、正在加载、暂无更多、查看更多效果

 
 

4.4、图片全屏预览

首先引入必须的样式文件

 

在body最后面引入js

 

需要说明的是这个效果需要jquery-weui.js组件的支持。你需要去down这个组件的dist目录,然后引用dist目录下面的swiper.js文件。这块有问题的可以单独留言。

引入相关的css与js文件之后,下面就可以开始着手写html了。

 

js代码初始化

 
 
 
 
 
  • 微信公众号开发C#系列-1、微信公众平台注册

  • 微信公众号开发C#系列-2、微信公众平台接入指南

  • 微信公众号开发C#系列-3、搭建微信本地调试环境-借助花生壳实现内网穿透

  • 微信公众号开发C#系列-4、获取接口调用凭证

  • 微信公众号开发C#系列-5、用户和用户组管理-支持同步

  • 微信公众号开发C#系列-6、消息管理-普通消息接受处理

  • 微信公众号开发C#系列-7、消息管理-接收事件推送

  • 微信公众号开发C#系列-8、自定义菜单及菜单响应事件的处理

  • 微信公众号开发C#系列-9、多公众号集中管理

  • 微信公众号开发C#系列-10、长链接转短链接

  • 微信公众号开发C#系列-11、生成带参数二维码应用场景

微信公众平台技术文档-官方

Senparc.Weixin SDK + 官网示例源代码

RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录

RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍

RDIFramework.NET框架SOA解决方案(集Windows服务、WinForm形式与IIS形式发布)-分布式应用

RDIFramework.NET代码生成器全新V3.5版本发布-重大升级


一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。

RDIFramework.NET官方网站:http://www.rdiframework.net/

RDIFramework.NET官方博客:http://blog.rdiframework.net/

同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏

RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用

欢迎关注RDIFramework.net框架官方公众微信(微信号:guosisoft,及时了解最新动态。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号