微信小程序

微信小程序复习笔记三

22 组件的共同属性

问题：内容不在界面显示



在开发中id用的不多 因为它一般是不能重复的
一般情况下id表示唯一的标识

23 样式的三种写法

全局样式 可以在wxss中写

全局样式也可在app.wxss中写 问题在于如果在另外一个页面也有一个class叫做这个名字那么它也会在另外一个页面生效
页面样式则是只有在当前页面才会生效

如果这样设置了box 那么它也只对当前页面有效果 对前面那个页面没有效果

可见行内样式的优先级是非常高的

24 掌握rpx样式导入WeUi

rpx单位是px单位的一半 为的是用来做屏幕适配

放到iphone5上面时就




特点是在iphone上面一个px刚好等于2个rpx
但是换成iphone5之后

当样式特别多的时候可以抽取到一个单独的文件

把样式抽取出来放到单独的文件之后发现不再生效了
要在wxss.wxss中导入路径 这个路径可以是相对路径也可以是绝对路径

在app.wxss也就是全局样式里面也可以做一个导入
也可以新建一个样式目录和文件

这个单独文件可能在多个页面里面都会被用到

在app.wxss里面对它做一个导入相当于全局都有那个样式

官方样式库提供的一些东西
[https://github.com/Tencent/weui-wxss]


使用官方的样式库开发一个搜索框

假设把这一坨删掉 再重新进入搜索框


如果只是单独想拿下面那个的话


当输入东西的时候会展示一些列表 列表就是result 如下对应起来

删掉一些 要拿的就是剩下这些


如上图 多拷贝了一个view报错
如果想用它的样式有2种办法 1是使用它的全局样式

由于只做一个搜索框很多样式用不到 所以也可以找一个单独的样式


硬盘打开

ctrl + c
把它先拷贝到自己的硬盘中去在这里插入代码片

回到程序里面对它做一个导入


目前点击啥的没有反应 还需要找到js文件

把js也拷贝过去
这个js没有在硬盘中拷贝 因为要做文件路径的引入所以wxss
是没有直接复制代码过去 而是复制文件luj

25 掌握Mustache语法细节

希望把2个变量拼接起来显示到小程序下方 并且中间加一个空格的话




再点击一次会切换到红色

26 wxml语法 条件判断

如果希望改变这个东西可以给它搞一个button 切换内容要不要显示

希望这个按钮到底是显示还是隐藏
跟之前改变isActive的值是一样的 只需要对原来的值进行一个取反就可以了

如下 再点击切换显示就不见了

设置一个button搞分数递增



hidden 将一个组件隐藏起来的时候 ，该组件依然是存在的（display:none)
wx:if 将一个组件隐藏起来时，该组件根本不存在（压根没有创建）
如果显示和隐藏切换的频繁非常高 选择使用hidden
如果显示和隐藏切换的频繁非常低 选择使用wx:if

27 wxml语法 列表渲染

注意：数组必须写到mustache语法里面
如下这样子会被整体当成字符串

这个item是自动生成的

希望上次那个东西一共显示三次


可以用view 但是view是一个组件 还要进行许多相关的渲染

block在小程序里面用的非常多



这种情况啥都没渲染

比如说对下面这个二维数组进行遍历：





如下 一旦插入x数据就要发生改变

28 wxml语法 wxml导入

通过data传入内容

<!-- 使用模板 此处使用相对路径和绝对路径都是可以的-->
<import src="/wxml/template.wxml"/>
<import src="../../wxml/template.wxml"/>

在其它页面 比如 首页 也可以使用

但是模板有一个特点 就是不能循环导入 import这个东西 对模板不能进行一个递归导入



include就是用来干这个事情的并且include就是用来做循环导入的
把header的导航单独抽出去

29 wxxs 认识wxs的作用

以上这种做法也是不可以的

30掌握wxs的两种写法

要新建一个wxs目录和文件

31 掌握wxs的案例练习

保留2位小数

保留三位小数




价格的格式化和时间化在开发中很常用