`

TODO:小程序集成WeUI

阅读更多

TODO:小程序集成WeUI

WeUI 为微信 Web 服务量身设计。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

1.使用微信开发者工具添加新项目MWL

2.下载WeUI的源码,把style文件拷贝到MWL根目录,与pages文件夹同一级

3.WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。

与 CSS 相比我们扩展的特性有:

尺寸单位

样式导入

4.在app.wxss导入样式,使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

5.WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

a)数据绑定

b)条件渲染

c)事件,关键参数是bindtap

6.组件,都包含在容器view里面,组件结合WeUI使用,构建出统一,美观都界面。

7.示例1,导航都标题是设置在*.json里面的 navigationBarTitleText,在app.json设置的参数是全局可使用,定义在page的json是局部页面可以使用。以此类推*.js也是有全局和局部之分。

代码:

看到代码里面有使用了WeUI的样式了,到此简单的WeUI则集成成功。


wxgzh:ludong86

1
0
分享到:
评论

相关推荐

    微信小程序demo:todo:wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)

    微信小程序demo:todo:wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)微信小程序demo:todo:wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)微信小程序demo:todo:wx.setStorageSync(KEY,DATA) ...

    微信小程序集成Redux实现的Todo list

    微信小程序集成Redux实现的Todo list微信小程序集成Redux实现的Todo list

    微信小程序demo:todo:wx.setStorageSync(KEY,DATA) 方法存放数据.rar

    在这个“微信小程序demo:todo:wx.setStorageSync(KEY, DATA) 方法存放数据.rar”压缩包中,包含了一个关于如何在微信小程序中使用`wx.setStorageSync`方法来存储数据的示例。 `wx.setStorageSync`是微信小程序...

    微信小程序完整demo:Todo(源代码+截图)

    微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整...

    todo:todo是一个简单的自托管todo管理器

    :memo:屏幕截图北方主题 德古拉主题 在下面的“预设颜色主题”部分中查看所有主题演示版还有一个公共演示实例,为: ://todo.mills.io部署方式Docker撰写docker-compose.yml version: '3'services: todo: image: ...

    微信小程序 todo list (源码)

    微信小程序 todo list (源码)微信小程序 todo list (源码)微信小程序 todo list (源码)微信小程序 todo list (源码)微信小程序 todo list (源码)微信小程序 todo list (源码)微信小程序 todo list (源码)微信小程序 ...

    高仿todo list小程序源码.zip

    【标题】"高仿Todo List小程序源码"指的是一个用于模仿Todo List功能的小程序的源代码,这种小程序通常用于管理日常任务,具有添加、删除、查看和编辑待办事项等功能。开发者可以参考这个源码来学习如何在微信小程序...

    微信小程序实战教程:模仿—网易云音乐

    初窥todo: 添加音乐到收藏(最近)列表 歌词滚动从一个hello world开始微信开发者工具生成 目录如下:. |-- app.js |-- app.json |-- app.wxss |-- pages | |-- index # 主页 | | |-- index.js | | ...       初...

    微信小程序源码 todo list(学习版)

    微信小程序源码 todo list(学习版)微信小程序源码 todo list(学习版)微信小程序源码 todo list(学习版)微信小程序源码 todo list(学习版)微信小程序源码 todo list(学习版)微信小程序源码 todo list(学习版)微信小...

    微信小程序完整demo:Todo.rar

    "微信小程序完整demo:Todo.rar" 是一个包含示例代码的压缩包,用于展示如何开发一个简单的待办事项(Todo)应用。通过这个DEMO,我们可以学习到微信小程序的基础架构、页面生命周期、数据绑定、事件处理以及网络...

    windows下实现屏幕旋转

    // TODO: 在此添加控件通知处理程序代码 RotateScreen(1); } void CrotaeeDlg::OnBnClickedButtonRot0() { // TODO: 在此添加控件通知处理程序代码 RotateScreen(0); } void CrotaeeDlg::OnBnClickedButtonRot...

    TODO:中国CS在线

    bbs.cncsol.com 1。0。0。0版本 应用程序

    todo:CLI个人助理

    "todo:CLI个人助理"是一款基于命令行界面(CLI)的个人任务管理工具,它旨在提升用户在终端中的工作效率,让任务管理变得更加便捷。这款工具使用JavaScript编程语言编写,这表明开发者利用了JavaScript的灵活性和跨...

    微信小程序-微信小程序,集成redux

    微信小程序集成Redux实现的Todo list 在微信小程序中使用Redux实现Todo list,同时集成了redux-devtools 使用了我自己写的小程序的Redux绑定库:wechat-weapp-redux 使用 导入到微信的开发工具目录指向src运行就...

    todo:用C语言编写的一个简单的跨平台Todo应用程序

    去做这是一个用C语言编写的简单待办应用程序。用法查看待办事项清单: todo更改名称: todo -n Things to Do要添加新任务: todo buy milktodo "eat cookies"todo 1 pour milk要编辑任务: todo -e 2 buy more milk...

    基于微信小程序的todo番茄钟设计与实现(源码+说明文档+演示视频)

    基于微信小程序的todo番茄钟设计与实现(源码+说明文档+演示视频) 第二章 微信小程序相关技术综述 9 2.1. 微信小程序介绍 9 2.1.1. 微信小程序背景 9 2.1.2. 微信小程序特点分析 9 2.2. 框架技术介绍 11 2.2.1. MINA...

    微信小程序完整demo:Todo.zip

    【微信小程序完整demo:Todo.zip】是一个包含微信小程序开发示例的压缩包,它提供了从设计到实现一个简单待办事项应用(Todo App)的全套资源。这个demo可以帮助开发者理解和学习微信小程序的基本结构、语法以及功能...

    200个微信小程序案例源码可运行.zip

    微信小程序demo: todo: wx.setStorageSync(KEY,DATA) 方法存放数据 微信小程序demo: V2EX (11月9日版) 微信小程序demo:百思不得姐 微信小程序demo:百思不得姐:使用不得姐api 微信小程序demo:柏拉图测试:趣味图片生成...

    todo:用于读取和写入TODO文件的命令行界面

    一个用于读取和写入TODO文件的命令行界面。 用法 todo [action] [flags*] [-k key] [-f filename] ... actions -h, --help show this message -l, --ls, --list list tasks -a, --add add a task -e, --edit ...

    微信小程序-devtools todo list.zip

    对于"微信小程序-cnode社区版",这可能是基于cnode.js社区的微信小程序应用,可能包含了论坛浏览、发帖、回帖等功能,开发者可以通过此项目学习如何将第三方API集成到微信小程序中,以及如何设计和实现社交类应用的...

Global site tag (gtag.js) - Google Analytics