微信小程序开发

html中有标签
a p div span
小程序没有，小程序自己封装过的叫组件
https://developers.weixin.qq.com/miniprogram/dev/component/

text 	-> span	不换行放文字
view	-> div	独占一行
image	放置图片
icon	小图标

  "tabBar":{
    "color": "#00b26a",
    "selectedColor":"#ffca28",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"主页"
      },
      {
        "pagePath": "pages/abouts/abouts",
        "text": "关于"
      }
    ]
  }

之前写的是px
<view style="height: 300px;"></view>
在小程序中使用rpx来表示
<view style="height: 300rpx;"></view>
小程序中，手机屏幕大小可能不一样，使用px像素会有问题，小程序使用的宽度就是750px
无论在什么手机上都会等比例缩放

在xx.wxss里面写css样式
app.wxss里面写的样式会在整个项目中生效

<button type="primary" plain size="mini" bind:tap="handleClick" data-name="zhangsan" mark:age="18">你好</button>

Page({
  handleClick(event){
    console.log(event.mark.age)
    console.log(event.target.dataset.name)
  },
})

最基本的
<navigator url="/pages/abouts/abouts">
  <button plain type="primary">跳转路由</button>
</navigator>
更多跳转（opentype属性）
<navigator url="/pages/abouts/abouts" open-type="switchTab">
  <button plain type="primary">跳转路由</button>
</navigator>
跳转携带参数
<navigator url="/pages/abouts/abouts?name=zhangsan&age=18" open-type="switchTab">
  <button plain type="primary">跳转路由</button>
</navigator>
Page({
  // 生命周期函数，检测页面变化
  onLoad(optins){
    console.log(this.options.name);
  }
}

Page({
  handleClick(event){
    wx.navigateTo({
      url: 'url',
    })
  },
})

data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },

{{motto}}
里面不能写语句，方法调用
可以使用：变量 三元运算 数学表达式 逻辑判断

<button type="primary" plain size="mini" bind:tap="handleClick">你好</button>

{{age}}

  handleClick(event){
    this.data.age+=1
    console.log(this.data.age);
  },

handleClick(event){
  // 要让页面改变，使用微信提供的
  this.setData({
    age:++this.data.age
  })
  console.log(this.data.age);
},
  
//修改对象类型：
this.setData({
  "userInfo.age":90
})

<view wx:for="names" wx:key="index">{{item}}</view>

//1、先追加，在setData
this.setData({
  "names":newNames
})
//2、修改
this.setData({
  "names[0]":"张三"
})
//3、删除
//先把数组修改好，再使用set设置

<view wx:for="names" wx:key="index">{{item}}</view>

 <view wx:for="names" wx:key="index" wx:for-index="myIndex" wx:for-item="myItem">{{item}}</view>

wx:if
wx-elif
ex-else

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"

使用module:value="{{value}}"

name:<input type="text" model:value="{{name}}"/>
    {{name}}

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

<checkbox checked="{{false}}"> </checkbox>

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})
可以使用hidden
<view hidden="{{view == 'MINA'}}"> MINA </view>

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})