首页 > TAG信息列表 > WXSS

框架-视图层（WXSS）

WXSS WXSS WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比，WXSS 扩展的特性有： 尺

微信小程序使用animate.css库

背景： 在小程序中使用animate.css库，做一些炫酷的动画效果 操作步骤： 第一步：使用 npm install animate.css --save 安装第二步：在 node_modules 文件中找到 animate,并把 animate.css文件复制出来第三步：将复制出来的 animate.css 文件后缀修改为 .wxss 并放入 utils文件夹中（其他文件

[flag]小程序-day3

容易出错的地方 向数组中添加元素时经常忘了写逗号 新建小程序页面 修改项目首页 小程序代码的构成-WXML WXML(WeiXin Markup Language) WXML和HTML的区别 小程序代码的构成-WXSS WXSS（WeiXin Style Sheets） WXSS和CSS的区别 小程序代码的构成-JS逻辑交互 小程序中的

【小程序自动化Minium】三、元素定位- WXSS 选择器的使用

最近更新略疲，主要是业余时间多了几个变化。比如忙活自己的模拟赛车驾舱升级、还跟朋友筹备一个小程序项目、另外早上的时间留给背单词了。。。 上一章中讲到Page接口的get_element()与get_elements()方法，其中有个必填参数就是选择器，而 minium 正是通过它来定位元素的。 对前端有

统计微信小程序项目代码行数

打开终端=>当前路径是项目目录=>复制下面命令即可： find . "(" -name "*.json" -or -name "*.js" -or -name "*.wxss"  -or -name "*.wxml" ")" -print | xargs wc -l  

微信小程序中的less开发公共样式引入

微信小程序开发如何使用less请见上篇文章---------   微信小程序中使用less后如何引入公共样式？ 尝试过多种方式后最优解： 例如公共样式为 public.less保存编译后变成了public.wxss; 在你要引入的文件中，例如index.less中顶部使用； @import (css) "../../css/public.wxss";   此时，只

webstorm 使用file Watcher 编译scss文件为 wxss

全局安装 sass npm install sass -g Arguments输入 $FileName$:$FileNameWithoutExtension$.wxss Output paths to refresh输入 $FileNameWithoutExtension$.wxss

vscode中less自动输出为wxss或者css

/*   注意事项：！！！！     less文件保存后会自动将.wxss文件覆盖     但是在wxss中修改后不会将less同步，此处是单向流动，本pages里面用less开发 */ /* 具体步骤     1.vscode安装插件easy less;     2.在全局settings.json中配置less.compile，避免所有项目都这样   

记录小程序字符串模板渲染WxParse

1、先去https://github.com/icindy/wxParse上downLoad代码，然后直接复制到项目里，跟pages目录同级 2、在要用的js页面声明 var WxParse = require('../../wxParse/wxParse'); /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //字符串模板渲染

【微信小程序】小程序支持使用less

需要用到 VS Code编辑器 1. vs code安装easy less插件        2.安装完成后，进行setting.json文件配置 点击设置图标   再点击右上角的图标进行进入setting.json文件          setting.json里进行配置 "less.compile": { "outExt": ".wxss" }   3.测试是否

微信小程序数字字母不自动换行

只要在需要换行的view的标签wxss内添加  word-break:break-all;就可 添加前   添加后      

调试微信小程序原理

1、调试webview，开发者工具打开菜单，微信开发者工具——调试——调试微信开发者工具， 执行document.querySelectorAll("webview")[1].showDevTools(true); 2、打开内置命令，打开普通调试器（非上面调试器），javascript上下文选择top，执行help()，开发者工具提供23个内置方法 3、打开小程序框

【小程序】轮播图swiper的实例

 1、swiper.wxml <view> <swiper class="banner" indicator-dots="true" indicator-color="0,0,0,0.8" indicator-active-color="white" autoplay="true" interval="1500" circul

初学微信小程序

    我们可以看到这个项目已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。 下面我们简单了解这三

微信小程序：引入阿里巴巴矢量图标库iconfont

阿里巴巴矢量图标库：https://www.iconfont.cn/ 第一步：生成fontclass地址 将喜欢的icon加入购物车将购物车中的图标添加至项目获取项目的Font class地址，打开连接，并复制内容 第二步：引入字体 将Font class内容粘贴到微信小程序项目中 新建文件 static/font/iconfont.wxss 在 app

微信小程序-漂亮的搜索框【样式】

十年河东，十年河西，莫欺少年穷 学无止境，精益求精   凌晨四点半写博客，你们做的到么？ 加班通宵了，虽说我的事情不算多，但也不能白白浪费时间，于是乎就有了这篇博客 话多多说，直接上代码了。 组件：SearchInput.wxml <view class="searchInput"> <navigator url="/pages/search/search" o

微信小程序wxss样式文件中引用iconfont素材

原因: 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64，然后引用。 解决方案如下: 一.下载阿里巴巴矢量库中自己项目的iconfont字体文件.   二. 打开这个网站, Online @font-face generator 上传字体,选择b

02-小程序 - 模板与配置◆ WXML 模板语法 ◆ WXSS 模板样式 ◆ 全局配置 ◆ 页面配置 ◆ 网络数据请求 ◆ 案例 - 本地生活

◆ WXML 模板语法 ◆ WXSS 模板样式 ◆ 全局配置 ◆ 页面配置 ◆ 网络数据请求 ◆ 案例 - 本地生活 ① 能够使用 WXML 模板语法渲染页面结构 ⚫ wx:if、wx:elif、wx:else、hidden、wx:for、wx:key ② 能够使用 WXSS 样式美化页面结构 ⚫ rpx 尺寸单位、@import 样式导入、全

2021-10-31

代码目录详解 assets 静态资源目录 多用于存储图片、视频等文件 子目录 icons 图标文件 styles 页面CSS样式文件 components 目录 用于存储组件化页面。 举例： 说明 类似某产品列表页面 可以重复性使用此组件页面。 Searchinput 代表 搜索模块 每个页面都有相应 js、wxml

微信小程序-模版详解<template>

<!--template.wxml--> <template name="msgItem">   <view class="template_style">     <text class="info">This is template.wxml文件，我是一个模板</text>   </view> </template>   /* pages/template

36-项目中搜索框的实现

其实这个搜索框要写成自定义组件，因为我们在好多页面都可以用的到 点击搜索框后，还会跳转到另一个搜索样式的页面 所以本质是一个导航标签/超链接 1、在微信开发者工具中，在conponents中新建SearchInput文件夹，然后新建component，输入SearchInput就会帮助我们建好那四个文件。 2、在

WXSS——样式（6）

1.尺寸单位 rpx（respective pixel）:小程序独有的尺寸单位，规定屏幕宽为750rpx。 可根据屏幕自适应大小。 比如，当屏幕宽度为 375px （像素），则 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px 2.数据类型 WXS 语言目前共有以下几种数据类型： number数值string字符串boolean布尔值object

12-样式导入

wxss中直接就支持样式导入功能。 也可以和less中的导入混用。 使用@import语句可以导入外联样式表，只支持相对路径 步骤： 1、创建commons.wxss文件 2、在页面的wxss文件中通过@import进行引入 3、编写wxml文件

11-样式WXSS

1、与css相比，wxss扩展的特性有 响应式长度单位rpx 样式导入 2、rpx （1）我们下面这样写死的话，如果手机的大小发生变化，我们写的view不会等比例缩放 （2）下面这样写，可以支持等比例缩放 (3)扩展需求

使用ColorUI构建小程序项目

目录 一、快速开始 1.从现有项目开始 1.1 详细步骤： 2. 从新项目开始 2.1详细步骤 2.2 说明 二、结语 一、快速开始 参照colorui官方给出的说明：GitHub - weilanwl/ColorUI: 鲜亮的高饱和色彩，专注视觉的小程序组件库 1.从现有项目开始 下载源码解压获得/demo，复制目录下的 /c