微信小程序如何导入weui并使用example里的模板

wawayv_lightning

于 2023-04-19 20:53:23 发布

阅读量225

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_45777875/article/details/130186952

版权

不知道是不是weui改版的问题

查了几个博客没试出成功的

并没有用npm,直接导入文件

github下载weui

https://github.com/Tencent/weui

将weui.wxss文件复制粘贴到项目

项目使用样式的pages里面xxx.wxss文件引入weui.wxss文件路径

@import '/weui.wxss';

将源文件app.wxss内容复制到项目文件【这一步没看到博客有写】

实际上查询一下example里面的模板选择器类型

可以看到一些开头的class是在app.wxss文件里面定义的

调用源文件example里面的例子

运行源文件example可以看到例子，直接复制粘贴对应代码

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wawayv_lightning

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue经典开源项目汇总

xiangzhihong8的专栏

01-31

1万+

Vue.js（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用...

小程序云开发入门到实践:WeUI

最新发布

sybh的博客

06-21

188

结合WeUI在开发者工具模拟器的实际体验以及WeUI的源代码，找到WeUI基础组件里的article、flex、grid、panel，表单组件里的button、list与之对应的pages文件夹下的页面文件，并查看该页面文件的wxml、wxss代码，了解它们是如何写的。修改排版样式的核心在wxss，也就是修改css样式。也就是说，WeUI框架的引入是因为它把很多css样式写好啦，省去了我们的一些麻烦，我们要使用它就是需要把我们的组件的选择器如class、id和WeUI框架的保持一致即可。

1 条评论您还未登录，请先登录后发表或查看评论

weui的模版

05-10

有一个完全的demo,可以直接复制使用的.

微信小程序模板文件的引入

weixin_44432032的博客

01-19

624

小程序引入模板

YoungC

09-15

473

有些时候我们制作小程序的时候要复用很多模块，这个时候我们就会用模板形式来体现，那么今天就来记录下创建模板与引入模板。首先先把引入模板添加上来，在页面头部添加一个这个标签，注意的是，要有最后的 / 才可以正常的显示 <import src='/common/template/list.wxml' /> 当你在页面引入这个模板的时候，那么插入到页面上，你还需要用模板标签去将结构插入到页面中去。 <template is='list' /> 也就是上述的方法，将你整理好的l

第6课 微信小程序模板的引入与使用：

舜岳的博客

05-06

468

第6课 微信小程序模板的引入与使用：在template1.wxml中自定义一个wxml模板： <template>定义模板标签</template> 在template1.wxss中为模板设置wxss样式：在index1.wxml页面内引入模板：  <import src="../templat...

weui-master:weui模板

03-23

WeUI-为WeChat Web服务量身定制介绍 WeUI是类似于WeChat的UI框架，由WeChat设计团队正式设计，是为WeChat Web开发量身定制的，目的是改善和标准化WeChat用户的体验。包括button ， cell ， dialog ， progress ， toast ， article ， actionsheet ， icon 。手机演示旧版：：文献资料 WeUI文档 WeUI设计参考发展执照 MIT许可证（）请随时使用并为开发做出贡献。贡献如果您有任何改善微信WeUI的想法或建议，欢迎提交问题/拉取请求。

收藏=学会前端小程序开源项目121个

m0_57290404的博客

05-09

2830

微信小程序 Demo 案例大厂资源开源项目 weapp-demo ★852 - 仿豆瓣电影微信小程序 wechat-weapp-gank ★567 - Gank微信小程序 wechat-weapp-mall ★531 - 微信小程序移动端商城 SmallAppForQQ ★492 - 微信小程序高仿QQ应用 weapp-wechat-zhihu ★348 - 微信中的知乎仿芒果TV ★289 - 微信小程序demo weChatApp-Run ★202 - 跑步微信小程序Demo we

H5练手项目-写一个菜鸟裹裹小程序

weixin_34062329的博客

12-18

2426

新手写小程序并不简单，菜鸟裹裹查看快递是很方便的，平常自己查看快递的时候都是在用。当我在微信端搜索菜鸟裹裹小程序时，却没有发现，于是便想自己动手仿app版写一个菜鸟裹裹的小程序，对其中的快递查询物流跟踪很有兴趣。项目目录结构使用的开发工具 VScode和微信开发者工具平台提供：微信公众品台|小程序，在该品台注册账号获取AppId...

使用小程序框架开发实现在线点餐功能

# 1. 介绍小程序框架及其特点在本章中，我们将介绍小程序框架是什么以及它的特点和优势。...- **跨平台性**：小程序框架支持多个平台，例如微信小程序、支付宝小程序等，开发者可以在不同平台上进行

微信小程序模板（几十个）

11-13

微信小程序模板欢迎下载。。。。。。。。。。。。。。。

WeUI 商城模板免费下载，完整全套模板包括首页/列表/登录等。

05-26

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在WeUI基础上开发的完整全套模板包括首页/列表/登录等。

weui模板+微商城+jquery

08-07

基于weui整套移动端微商城模板源码，基于weui整套移动端微商城模板源码

weui手机商城模板在线下载

12-22

weui手机商城模板在线下载, weui手机商城模板在线下载 weui手机商城模板在线下载

weui开发整套移动端微商城模板

01-10

weui开发的一完整手机移动端商城购物平台整站html模板源码下载，包括首页，购物车，订单管理，评价，分类，会员中心等，全面到注册协议都弄好了。

weui框架-小程序weui模板

张火火

05-30

3547

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, mi

微信小程序第四篇模板使用

山外小楼

08-07

3729

微信小程序的模板使用有两种方法 1 include 这个方法适用页面内有一个模板的 <include src="../template/header" /> header.wxml里面是这样的 2 .import 方法加载模板，此方法适用于页面内有多个模板 <import src="../template/footer" /> <t...

weui实现微信网页模板（主页，购物车，分类，后台等等）

咖啡味的小认真

04-24

2293

试试

微信WeUI常见页面模板

weixin_34101229的博客

08-31

2852

购物车模板就是popup弹层(css样式+js)，还有slider滑动操作，还有增减的js 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" c...

微信小程序WeUI基础样式库weui.wxss详解

"微信小程序weui.wxss是一个基础样式库，专为微信小程序设计，提供与微信原生视觉体验一致的组件，包括button、cell、dialog、toast、article、icon等。这个库由微信官方设计团队创建，并遵循MIT许可证。" 在给定的...