vs code设置

设置识别wxss样式和wxml标签文件

 "files.associations": {
 "*.wxml": "html",
 "*.wxss": "css",
  }

安装小程序语法提示插件，wxml插件，wxss-peek插件

微信开发者工具

小程序目录结构

web项目

小程序项目

小程序中如何快速新建页面呢

//在app.json的"pages":[]
"pages": [
        "pages/index/index",
        "pages/index2/index",//新建的页面
        "pages/index3/index"//新建的页面
    ]

配置文件

一个小程序应用会包括最基本的两种配置文件

全局配置app.json：

app.json是当前小程序的全局配置，包括了小程序所有的页面路径，界面表现，网络超时事件，底部tab等配置

页面配置page.json（index.json）:

页面配置的文件是page.json（index.json）。只能设置全局配置中关于window字段的功能。如设置页面标题，导航栏延时等
不用写window字段
优先级比全局配置高

数据绑定-->插值表达式

数据绑定也叫插值表达式，是一种将变量渲染到页面中的技术

//index.js
page({
 //定义数据
 data:{
    msg:'萨摩耶'
   }
 })
 //index.wxml中
 <view class="container">
   {{msg}}
  </view>

标签属性使用插值表达式

插值表达式中三元表达式写法

条件渲染

注意：使用条件渲染时，双引号和大括号直接不能有空格

//index.wxml中
 <!-- 条件渲染测试wx:if -->
   <!-- 当wx:is=true时显示，否则隐藏 -->
     <view wx:if="{{show}}">
          显示
     </view>
     <view wx:if="isShow">
          隐藏
     </view>
     <!-- hidden -->
    <!-- 当hidden为true时，隐藏，否则显示 -->
     <view hidden="{{hidden}}">
          隐藏
     </view>

    //index.js中
 page({
    定义数据
     data: {
      show:true,
      isShow:false,
      hidden:true
  }
     })

wx:if与hidden的区别

相同点:wx:if和hidden都能控制标签的显示和隐藏

不同点:实现标签隐藏是通过一尺标签来实现，hidden实现隐藏式通过添加样式来实现

列表渲染

使用小程序中列表渲染技术，可以很方便的将数组中的数据显示到页面中语法：wx:for="{{数组名}}"

wx:for：index为索引,item为循环项

<view class="Myl" wx:for="{{list}}" wx:key="*this" wx:for-item="item" wx:for-index='index'>
    <p>{{item}}重要的事啊说三遍{{index}}</p>
  </view>

page({
//数据
data:{
  list:[
            '1.','2.','3.'
        ],
   }
 })

> > wx:for-item可以指定数组当前元素的变量名
> > wx:for-index可以指定数组当前下标的变量名

唯一标识---> `wx:key`

如果该数组中的元素频繁被修改，为了提高小程序重新渲染的效率，可以在渲染每一项时指定一个唯一的标识。方便小程序查找到该元素

wx:key针对不同的数值类型有不同的写法

1.普通数组:wx:key="*this"

2.数组对象:wx:key="字符串"表示对象有唯一属性（有id就用id）

事件

事件是视图层到逻辑层的通讯方式。负责将用户对于的页面的操作通知给js，用户在页面中所有的行为，如点击按钮，滑动页面，都需要靠事件传递给js进行处理

事件绑定

小程序中绑定事件，通过bind和catch关键字来实现，如bindtap和catchtap,也可以写成bind:tap,catch:tap

bind是事件冒泡，catch是事件捕获

 <!-- 事件冒泡和事件捕获,嵌套的元素 -->
  <view class="fater" bindtap="eventFater">
    父元素

<!-- 嵌套 -->
    <view class="child" bindtap="eventChild">
      子元素
    </view>

点击子元素时，父元素也触发了

bindtap改为catchtap,就不会发生事件冒泡

  <view class="fater" catchtap="eventFater">
    父元素

<!-- 嵌套 -->
    <view class="child" catchtap="eventChild">
      子元素
    </view>

事件传参

通过传递自定义属性的方式

//pages/index/index.js
page({
//点击事件传参,el是事件对象
    Event(el){
        // 获取自定义属性
         //el.target.dataset.xxx
        //页面中使用data-text
        let text = el.target.dataset.text
        console.log(text);
    }
 })

//index.wxml
  <!--事件传参： 页面中使用data-text -->
  <view bindtap="Event" data-text="萨摩耶">输出萨摩耶</view>

  <view data-text="阿拉斯加" bindtap="Event">
    输出阿拉斯加
  </view>

data的获取和设置

获取data中的值this.data.属性名 this.data.属性名

设置data中的值this.setData([属性名:属性值])

//如果直接修改，页面不会更新
this.data.num = 300//页面的值不会变
//页面更新
this.setData([属性名:值])

如果data中的数据是对象时

案例

1.点击确定按钮将输入框中的值设置到数组中

2.添加的元素不能和之前的元素重复

3.点击数组中某一项的适合执行删除

//结构
<view class="headers">
  <input type="text"   focus placeholder="请输入内容" class="input" model:value="{{inputValue}}" />
  <button bindtap="btnFn">确定</button>
</view>
  
<view  class="item-list" wx:for="{{array}}">
  <!--data-index="{{index}}":传索引值-->
  <span wx:key="*this" bindtap="changeFn" data-index="{{index}}"  wx:for-index="index"  >
    {{item}}
  </span>
</view>

//
Page({
    // 定义数据
    data:{
        // msg:'萨摩耶',
        list:[],
        focus : true,
        inputValue: ''
    },
    onReady() {
   //获取数据
   let text=  this.data.inputValue

   //  console.log(text);
   let array = this.data.list
   

//点击确定按钮
      btnFn(){
          //获取数据
        let value=  this.data.inputValue

    //  console.log(text);
    let array = this.data.list
    //去重
  if(array.indexOf(value)==-1&&value){
      array.push(value)
  }
//   重新设置值
     this.setData({
        array:  array
     })
    // console.log(25,array);
    this.setData({
        inputValue:''
    })
      },
      //点击删除
      changeFn(e){
    let newList = this.data.list
    //利用事件对象获取当前点击的索引
 let i = e.target.dataset.index
        // 删除
        newList.splice(i,1)
        //重新设置值
        this.setData({
            array: newList
        })
})

微信小程序