入门小程序记录(一) 语法记录

数据绑定 胡子语法(相当于vue的差值表达式)

<!-- 数据绑定 -->
<view>{{message}}</view>

循环语法

显示在js文件data定义的变量

wx:for-item=“v” wx:for-index=“i” 可以改变为item的默认值,和改变默认索引index的变量名

<!-- 循环语法  注意key值,我们需要设置,不然报错,key值可以为字符串,数子,不需要用胡子语法但是还是一个变量,
*this是为item,当然可以写:key="item"-->
<view wx:for="{{arr}}" wx:key="*this">{{item}} {{index}}</view>
<!-- block 代表一个空的元素,可以使用指令,指令可以被使用 没有标签-->
<block wx:for="{{arr}}" wx:key="*this" wx:for-item="v" wx:for-index="i">
{{v}}{{i}}
</block>	

隐藏语法 (这里跟vue的V-show 不一样)

true为隐藏,fales为显示

<!-- 显示隐藏语法  布尔true为隐藏,fales为显示-->
<view hidden="{{fales}}">呵呵呵</view>
<view hidden="{{message==='男'}}">看不见我</view>

绑定事件(关键字:bind)

我们要使用bind事件=“处理函数” ,传值要通过 data-key="传递的数据"

<!-- 事件语法 使用bind事件,参数由data-参数key="参数值"传递-->
<view bindtap="handlerTap" data-id="100"data-name="{{userName}}"
data-arr="[1,2,3,4,5]">点击触发事件</view>

获取时间传递的数据

这个拿值就是比较麻烦了**,并且拿到的都是字符串格式**

handlerTap(e){
    console.log(e);
    console.log(e.currentTarget.dataset.id);  //这样才能拿到传过的值数据都是以字符串的形式得到
    console.log(e.currentTarget.dataset.name);
    console.log(JSON.parse(e.currentTarget.dataset.arr));
  },

实现双向绑定

之前小程序是没有双向绑定这个说法的,所以我们会使用inp事件代替双向绑定

<!-- 绑定输入框的值,在使用input事件进行绑定.   -->
<input type="text" bindinput="handlerval" 
style="  border: 2px solid #ccc; margin:10px 10px" />

这里我们接受数据获取绑定框的值
可以的话我们会绑定到data里面,如和真实的双向绑定可以参考我之前的解释vue的双向绑定
关于模拟v-model 父子传值

  // 绑定输入框的值
  handlerval(e){
    console.log(e.detail.value);
  },

在小程序2.9.3之后推出了简单的双向绑定,使用会更方便,但是2.9.3之前就有点坑了,比如用户输入数据,我们根本接受不到,所以用不用问项目经理

<!-- 简易的双向绑定是从基础库 2.9.3 开始支持 ,不能使用2.9.3前 -->
<input model:value="{{userpassword}}" 
style=" border: 2px solid #ccc; margin:10px 10px "/>
<button bindtap="handlerpassword">点击获取输入框信息</button>

动态的改变样式或者class,这个还比较常用,好用

代码一改变样式

<!-- 动态改变样式 -->
<view bindtap="handlerbgc" style="width:750rpx;height:200rpx;background-color:{{bgc}}">点击我改变背景颜色,我接受一个动态的背景颜色</view>
<!-- wxss不能使用通配符选择器* -->

// 动态改变样式
  handlerbgc(){
    let r = Math.floor(Math.random()*255);
    let g = Math.floor(Math.random()*255);
    let b = Math.floor(Math.random()*255);
    // let color = rgb(`${r}`,`${g}`,`${b}`);
    let color = "rgb(" + r + ',' + g + ',' + b + ")";
    //改变data里面的属性需要使用方法 setData
    this.setData({bgc:color})
  },

代码二,动态改变类名

    <!-- 后面要增加点击事件,隐藏右边商品列表,使用hidden -->
    <view class="{{active === index?'click_category_title':'category_title'}}"
     wx:for="{{goodsList}}"wx:for-index="index" wx:key="cat_id"
    bindtap="toggleTitle" data-index="{{index}}">{{item.cat_name}}</view>

点击后变换样式

关于全局样式,和页面样式

全局:

页面:

通配符选择器不能在wxsss文件里面生效
同一个类名设置的样式,页面样式会覆盖全局样式