微信小程序制作

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

• 首先在资源管理器中，可以看到初始文件拥有 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标签， 且是直接在标签内直接添加字符


  {{msg}}

  {{age}}

  {{1 + 1 }}
  {{'1' + '1'}}

  {{isChecked}}

  {{10%2===0? 'true' : 'false'}}

  
    "属性" :  {{index}}
    --
    "值" : {{item.name}}
  
  
  对象循环
     
        属性： {{key}}
        --
        值 ： {{value}}
     
   

   
    
      
        属性 ： {{key}}
        --
        值 ： {{value}}
      
    


  
    显示
    隐藏
    
    
      faslse
      2
      3
    
  

  
  
  {{num}}


  

   +
   -

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