Mini Program

WXML

与 HTML 语法类似:WXML

  • 使用 {{value}} 绑定数据
  • 使用 wx:for 遍历数组
<view>
  <view class="title">Demo</view>
  <view>
    <view> 
      <button type="default" size="mini" bind:tap="onChangeCnt">add cnt</button>
      cnt: {{cnt}}
    </view>
    <view>
      <button type="primary" size="mini" bind:tap="onChangeStr">reverse str</button>
      str: {{str}}
    </view>
    <view>
      <button type="warn" size="mini" bind:tap="onModifyObj">modify obj</button>
      obj.name: {{obj.name}}, obj.age: {{obj.age}}
    </view>
    <view>
      <button type="default" size="mini" bind:tap="onAppendArr">append arr</button>
      <button type="default" size="mini" bind:tap="onModifyArr">modify arr</button>
      <view wx:for="{{arr}}" wx:key="index">
        index: {{index}}, name: {{item.name}}, age: {{item.age}}
      </view>
    </view>
  </view>
</view>

WXSS

与 CSS 语法类似:WXSS

.title {
  font: large;
  text-align: center;
}

Javascript

示例

Page({
  data: {
    cnt: 0,
    str: "hello world",
    obj: {name: "Jack", age: 12},
    arr: [
      {name: "Ann", age: 19},
      {name: "Bob", age: 11},
      {name: "Chris", age: 82},
    ],
  },
  onChangeCnt() {
    this.setData({
      cnt: this.data.cnt + 1,
    });
  },
  onChangeStr() {
    this.setData({
      str: this.data.str.split('').reverse().join(''),
    });
  },
  onModifyObj() {
    this.setData({
      'obj.name': this.data.obj.name.split('').reverse().join(''),
      ['obj.age']: this.data.obj.age + 1,
    });
  },
  onAppendArr() {
    const ele = {name: "Tom", age: 23}
    this.setData({
      arr: [...this.data.arr, ele],
    });
  },
  onModifyArr() {
    const lastIndex = this.data.arr.length - 1;
    const lastAge = `arr[${lastIndex}].age`;
    this.setData({
      [lastAge]: 100,
    });
  },
});

修改数据

// 修改简单类型
this.setData({
  cnt: this.data.cnt + 1,
});

this.setData({
  str: this.data.str.split('').reverse().join(''),
});

// 修改复杂类型
// 方法 1:定义新对象/数据然后赋值
const newObj = {name: "Tom", age: 13}
this.setData({
  obj: newObj,
  arr: [...this.data.arr, newObj]
});

// 方法 2:使用要修改元素的 expression(新版本可以不用加方括号)
this.setData({
  'obj.name': this.data.obj.name.split('').reverse().join(''), // 写法1,直接使用要修改对象的 expression 如 'obj.name' 或 'arr[0].name'
  ['obj.age']: this.data.obj.age + 1, // 写法2,使用方括号包裹 expression 例如 ['obj.age']
  ['arr[0].name']: 'Anna', 
  [`arr[${this.data.arr.length - 1}].age`]: 100, // 如果数组的 index 是变量,要用 `[${index}]` 的格式
});

导入导出变量

// 导出
export const data = {a: 'xxx', b: 'yyy'}
// 导入
import data from './relative/path/file.js'

HTTP 请求:wx.request

wx.request({
  url: 'test.php',
  method: 'POST',
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

References

Cloudbase

组件库

项目

流程

  • 主体认证
  • 支付
  • 备案