小程序基础的上课笔记

374 阅读3分钟

1. 花括号和引号之间如果有空格,将最终被解析成为字符串

<view>
<!-- // 字符串和花括号之间不能有空格,否则会识别失败 -->
<!-- <checkbox class="" value=""   checked=" {{ischeck}}" color=""> -->
    <checkbox class="" value=""   checked="{{**ischeck**}}" color="">       
    </checkbox>
</view>

2.wx:for

项的变量名默认为 item wx:for--item 可以指定数组当前元素的变量名 下标变量名默认为 index;  wx:for--index 可以指定数组当前下标的变量名 wx:key ⽤来提⾼数组渲染的性能wx:key 绑定的值 有如下选择 1. string 类型,表⽰ 循环项中的唯⼀属性 如

list: [{

                id: 0,

                name: "豪1"

            },

            {

                id: 1,

                name: "豪2"

            },

            {

                id: 2,

                name: "豪3"

            },

        ]

wx:key="id" 

view wx:for="{{**list**}}" wx:for-item="item" wx:for-index="index" wx:key="id" style="white-space:pre-wrap">

<!-- 微信小程序<text>和<view>标签并不能让文本自动换行,微信小程序也不支持 <br/>换行 -->

    索引:{{**index**}}

    

    姓名:{{**item** **.** **name**}}

</view>

只有一层循环默认情况下可以不写wx:for-item="item" wx:for-index="index"  wx:key="id" 是为了提高运行效率

3. 对象循环

wx:for”{{object}}” wx:for-item=”对象的值” wx:for-index=“对象的属性” 循环对象的时候最好把item和index的名称修改一下 wx:for-item=“vlue” wx:for-index=“key”;

4.保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]

    wx:key="*this"


<view>

    <block wx:for="{{ [1,2,3]}}" wx:key="*this" >

        <view> {{index}}: </view>

       <view> {{item}} </view>

</block>

</view>

5.渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

图片.png

6.wx:if 在框架中,使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{false}}">1</view>

  <view wx:elif="{{true}}">2</view>

  <view wx:else>3</view>

7. hidden

<view hidden="{{condition}}"> True </view>

应用场景:

1.当标签不是频繁地切换显示,优先使用 wx:if 直接把标签从页面中移除

2.当标签被频繁切换显示,优先使用hidden 通过添加样式的方式切换显示, hidden属性不要和样式display一起使用,会被覆盖(hidden本身用到的就是display:none)

8.事件绑定

1.需要给input标签绑定 input事件

绑定关键字 bindinput(bind关键字开头的事件)

2 .如何获取 输入框的值

通过事件源对象来获取

e.detail.value 

3 .输入框的值 赋值到 data当中

    不能直接 

    this.data.num=e.detail.value 

    this.num=e.detail.value 

    正确的写法


      this.setData({

        num:e.detail.value 

      })

4.需要加入一个点击事件

   1. bindtap

   2.无法在小程序当中的 事件中 直接传参 

   3. 通过自定义属性的方式来传递参数

data-operation="{{1}}"

   4. 事件源中获取 自定义属性

8.image标签

默认宽度为320px,高度240px;

支持懒加载

图片.png mode的13种模式

图片.png

9.swiper微信轮播图组件

图片.png

swiper-item

10.navigator(超链接标签)

图片.png open-type的有效值

图片.png

11.尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

12.样式导入

wxss中直接就⽀持,样式导⼊功能。也可以和less中的导⼊混⽤。使⽤@import语句可以导⼊外联样式表,只⽀持相对路径

13.小程序使用less

原⽣⼩程序不⽀持less,其他基于⼩程序的框架⼤体都⽀持,如wepy,mpvue,taro等。但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现

1.编辑器是vscode

2.安装插件easy less

图片.png 3.在vscode的设置中加入如下配置:

"less.compile": {

    

        "compress"false,//是否压缩

        "sourceMap"false,//是否生成map文件,有了这个可以在调试台看到less行数

        "out"true// 是否输出css文件,false为不输出

        "outExt"".wxss"// 输出文件的后缀,小程序可以写'wxss'

    },

4.在要编写样式的地⽅,新建less⽂件,如index.less,然后正常编辑即可。

14.选择器

⼩程序不⽀持通配符 *

图片.png