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
组件库
项目
- Github - hioshop
- Github - wechat-app-mall
- Gitee - Open-Shop
- Gitee - CRMEB Java 电商系统
- Github - FecMall
流程
- 主体认证
- 支付
- 备案