微信小程序制作

打开微信开发者工具后， 新建一个新的文件。开始配置

• 首先在资源管理器中，可以看到初始文件拥有 miniprogram 文件夹， 找到app.json

在json 配置文件中， 可以查询到 "page" 属性 

此时，在minprogram文件夹有会生成page的文件夹且拥有5个新的页面, 该文件为小程序中的各个子页面

 "tabBar": {
    "list" : [{
      "pagePath": "page/index/index-1",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "page/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },
    {
      "pagePath": "page/mine/mine",
      "text": "我的",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    },
    {
      "pagePath": "page/search/search",
      "text": "搜索",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    },
    {
      "pagePath": "page/logs/logs",
      "text": "视频",
      "iconPath": "icon/_videocamera.png",
      "selectedIconPath": "icon/videocamera.png"
    }
  ],
  "color": "#0094ff",
  "seletedColor" : "#ff9400",
  "backgroundColor": "#fff",
  "position": "bottom"
  },

生成tab 栏，, 在 "tabBar"的list属性中， 页面的前后顺序则为list中的对象的顺序

 

修改浏览器样式

 

微信数据绑定

  data: {
      "msg": "this is the value",
      "age": 18,
      isChecked: false,
      list: [
        {
          id: 0,
          name: "猪八戒"
        },
        {
          id: 1,
          name: "天蓬元帅"
        },
        {
          id: 2,
          name: "无能"
        }
      ],
      "person": {
        "name": "富婆",
        "age": 17,
        "sex" : "girl"
      }
  },
  //输入框的input 事件的执行逻辑
  handleInput(e) {
    console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  handletap(e) {
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num : this.data.num + operation
    })
  },

<!--
  <text> 标签相当于 <span> 标签，   是行内元素， 不会自动换行
  <view> 标签相当于 <div> 标签，    是块状元素， 自动换行

  在随时可修改的元素内容，使用数据绑定， 而不是将内容写死在元素标签中
-->
<text> 这是一个text标签， 且是直接在标签内直接添加字符</text>

<!-- 1 数据绑定 -->
  <view>{{msg}}</view>
<!-- 2 数值 -->
  <view>{{age}}</view>
<!-- 3 运算 -->
  <view>{{1 + 1 }}</view>
  <view>{{'1' + '1'}}</view>
<!-- 4 bool 布尔值 -->
  <view>{{isChecked}}</view>
<!-- 5 三元运算符 -->
  <view>{{10%2===0? 'true' : 'false'}}</view>
<!-- 
    6 数组 for 遍历 
    wx:for 绑定数据要添加 双括号  {{list}}
    wx:key = " 唯一的值"  提高列表渲染 的性能
      1 绑定一个普通字符串的时候，那么这个字符串名称肯定是  循环数组 中的对象 唯一属性 
      2 wx:key = "*this"  表示你的数组 是一个普通的数组， "*this"  表示的是循环项
      3 当wx:key= " 随意添加的值" 时， 小程序不会报错， 但当往后修改了项目的值后，会出现问题

    当出现 数组的嵌套循环时， 尤其要注意 以下绑定的名称 不要重名
      wx:for-item = "item"  wx:for-index="index"
    默认情况下不写， 循环的名称 索引的名称， item and index
    只有一层数组的话， 可以省略" <view wx:for-item = "item" wx:for-index = "index" > "
    当for值绑定了列表后， 要循环列表中的内容， 则是 使用 item. + 列表的属性值, 而不是 list.name
-->
  <view wx:for="{{list}}" wx:key="id" wx:for-index="index" wx:for-item="item">
    "属性" :  {{index}}
    --
    "值" : {{item.name}}
  </view>
  <!-- 
    7. 对象循环
      1.  wx:for="{{对象}}" wx:for-item = "对象的值" wx:for-index = "对象的属性"
        <view wx:for="{{person}}" wx:for-item = "item" wx:for-index = "index" > 
      2. 循环对象时， 最好吧 item adn index 修改一下 
        item = value  index= "key"
-->
  <view>对象循环
     <view wx:for="{{person}}" wx:for-index="key" wx:for-item="value" wx:key="age">
        属性： {{key}}
        --
        值 ： {{value}}
     </view>
   </view>

   <!-- 
     占位符  block
      1. 占位符的标签
      2. 写代码时， 标签存在
      3. 页面渲染后， 标签移除
    -->
    <view>
      <block wx:for="{{person}}" wx:for-index="key" wx:for-item="value">
        属性 ： {{key}}
        --
        值 ： {{value}}
      </block>
    </view>

<!-- 条件渲染 -->
  <view>
    <view wx:if="{{true}}">显示</view>
    <view wx:if="{{false}}">隐藏</view>
    
    <view>
      <view wx:if="{{false}}">faslse</view>
      <view wx:elif="{{false}}">2</view>
      <view>3</view>
    </view>
  </view>

  <!-- input 绑定函数 -->
  <input type="text" bindinput="handleInput" />
  <view>{{num}}</view>


  <!-- 
    1 添加 input 绑定时间，  bindinput
    2 添加按钮绑定click      bindclick  or   bindtap
    3 给函数传参， 不可直接在绑定的函数上传参  => no =>  bindtap="handletap(1)"  
    4 将函数的参数值用自定义属性  data-operation="{{参数}}" 保存
        从事件源中获取  自定义属性
   -->

   <button bindtap="handletap" data-operation="{{1}}">+</button>
   <button bindtap="handletap" data-operation="{{-1}}">-</button>

占位符 <block> 在 wxml页面渲染后会移除