AppID：我的wxbce50df1270027fd

不要用测试号，不然有一些功能无法使用

配置文件

全局配置

app.json

  • 是当前小程序的全局配置

  • 包含了小程序的所有页面路径、

    • pages字段
      • 可以快速创建页面（只能在微信开发者工具中使用）
      • 可以指定页面的启动顺序（按照数组顺序）
    • window字段
      • 配置页面外观
      • 导航栏navigation
    • tabbar字段
      • 底部的tab结构配置

        页面配置

  • 页面下的json文件

  • 可以设置全局配置中关于window字段的配置
  • 优先级比全局配置高

小程序中没有div<view>标签是块级元素，代替div
在page() 入口中data属性定义变量，可以在调试工具AppData中查看到

条件渲染

  • 语法
    • wx:if="{{Boolean}}"true显示，false隐藏
    • hidden="{{Boolean}}"true隐藏，false显示
  • 区别
    • wx:if是直接删除标签节点的
    • hidden是通过标签样式dispaly:none隐藏的

  • 使用

    • 如果标签频繁被切换显示 使用hidden否则使用wx:if

      列表渲染

  • 语法

    • wx:for="{{Array}}"
      • item表示数组中的没一项
      • index表示当前数据在数组中的下标
      • 修改默认配置
        • wx:for-item="别名"
        • wx:for-index="别名"
    • 绑定wv:key
      • 数组内是简单类型的 wx:key="*this"
      • 数组内是对象数组 wx:key="对象当中的唯一的属性" ```jsx姓名:{{item.name}}—-年龄:{{item.age}}—-{{index}} 姓名:{{i.name}}—-年龄:{{i.age}}—-{{j}}

data: { dir: ‘hellow wored’, show: false, hidden: true, list: [ ‘张三’, ‘李四’ ], arr: [ {name:’张三’,age:15}, {name:’李四’,age:20} ] },

  2. <a name="pbbw4"></a>
  3. ### 事件绑定
  4. > 没有点击事件变成了 --- tap 点击
  5. > 事件类型，绝大部分的web中的事件类型都是支持的，如果不行查文档
  7. - 语法
  8.    - `bindtap="事件函数"` 是事件冒泡 
  9.       - 优先使用，如果出现事件冒泡情况将bind替换为catch
  10.    - `catchtap="事件函数"` 是事件捕获
  11. ```jsx
  12. <view bindtap="headleTap">bind</view>
  13. <view catchtap="headleTap">catch</view>
  14. <view bindtap="headleTapA">
  15. 父元素
  16. <view bindtap="headleTapB">子元素</view>
  17. </view>
  18. <view catchtap="headleTapA">
  19. 父
  20. <view catchtap="headleTapB">子</view>
  21. </view>
  24. headleTap() {
  25.         console.log('事件触发了')
  26.     },
  27.     headleTapA() {
  28.         console.log('父的事件');
  29.     },
  30.     headleTapB() {
  31.         console.log('子的事件');
  32.     },

事件传参

小程序中不支持函数直接传参，采用自定义属性的方式传递

  • 语法
    • <view data-num="值">
      • 不用插值表达式，值是字符串
      • 用插值表达式，值会有具体的类型
    • 通过e.target获取到dom再通过dataset可以访问到自定义属性 ```jsx输出100 输出200

headleNum(e) { console.log(typeof e.target.dataset.num); },

  2. <a name="exDPF"></a>
  3. ### data的获取和设置
  5. - 语法
  6.    - 获取data中的值
  7.       - `this.data.属性名`
  8.    - 设置data中的值
  9.       - `this.setDate({属性名:属性值})`
  10. ```jsx
  11. <view>{{num}}</view>
  12. <view bindtap="headleNum">点击</view>
  14. data: {
  15.         num:100
  16.     },
  17.     headleNum(){
  18.         const num = this.data.num
  19.         this.setData({
  20.             num:num+1
  21.         })
  22.         console.log(this.data.num);
  23.     },

input输入框

小程序中的输入框是没有边框的，和白色的背景混再一块是看不清的

  • 值改变事件 bindinput
  • 获取输入框的值e.detail.value ```jsx {{msg}}

data: { msg:’西瓜’ }, headleInput(e) { this.setData({ msg:e.detail.value }) // console.log(e.detail.value); }, ```