一、微信小程序的WXML
语法
- 数据绑定
将data
中的变量用大括号进行包裹起来,{ {}}
,类似插值表达式,如{ { message}}
- 列表渲染
列表渲染通过wx:for
指令可以对data
数据进行渲染,渲染时加上wx:key
,进行唯一标识,通过wx:for-item
可以指定数组当前元素的变量名,通过wx:for-index
可以指定数组当前下标的变量名,代码示例如下
<view wx:for="{
{ items }}" wx:key="{
{ index }}">
{
{ item }} --- {
{ index }}
</view>
data: {
message: "hello view",
otherMessage: "other message",
items: [1, 2, 3, 4],
show: false
}
- 条件渲染
条件渲染可以通过wx:if
指令,还可以wx:elif
、wx:else
等等去进行条件渲染,代码示例如下
<view wx:if="{
{show}}">
{
{ message }}
</view>
<view wx:else="{
{!show}}">
{
{otherMessage}}
</view>
- 模版
在模板中定义代码片段,然后在不同的地方调用。在定义模版template
的时候,使用name
属性,里面就是代码的内容。使用模版template
的时候,使用is
属性,知道是使用的哪一个模版。如果使用模版的时候,想要传递数据,可以通过data
,示例代码如下
<template name="header">
<view>Header {
{message}}</view>
</template>
<template is="header" data="{
{message}}"></template>
如果 data
中的数据是一个对象,想要获得对象中的某一个值,那么就使用 ...
,结构赋值,示例代码如下
<template name="header">
<view>Header {
{name}} {
{age}}</view>
</template>
<template is="header" data="{
{...mes}}"></template>
data: {
message: "hello view",
otherMessage: "other message",
items: [1, 2, 3, 4],
show: false,
mes: {
name: "张三",
age: 23
}
},
- 点击事件
小程序中的点击事件使用bindTap
,如果需要修改值,使用this.setData()
,点击后数据发生变化,示例代码如下
<view wx:if="{
{show}}">
{
{ message }}
</view>
<view wx:else="{
{!show}}" bindtap="handleTap">
{
{otherMessage}}
</view>
handleTap() {
// console.log("tap")
this.setData({
otherMessage: "new message"
})
}
- 微信小程序点击事件的一些方法总结:
- 如果是普通的点击事件,那么就可以用
bindtap
,示例代码如下:
<view class="content" bindtap="handleAddressClick">{
{address}}</view>
- 如果是
radio-group
,单选按钮的一些点击事件,那么就可以用bindchange
,示例代码如下:
<radio-group bindchange="handleTypeChange">
<label>
<radio value="buy" checked="true" class="buy">求购</radio>
<radio value="sell">转让</radio>
</label>
</radio-group>
- 如果是
input
输入框的一些点击事件,那么就可以用bindinput
,示例代码如下:
<input placeholder="填写您的具体需求" class="info-input" bindinput="handleMessageChange"></input>
- 微信小程序关于发起请求的一些总结:
- 如果想进行发起请求,可以使用
wx.request()
这个API
,进行发起请求,代码示例如下:
const data = Object.assign({
}, this.staticData, {
address: this.data.address,
distinct: app.globalData.distinct
})
wx.request({
url: 'https://nuanwan.wekeji.cn/student/index.php/trade/add_item',
data: data,
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: this.handleSubmitScuuess.bind(this)
})
- 微信小程序中关于获取详情页的一些方法总结:
- 在微信小程序中,如果想要实现点击后,获取到页面的一些详情信息,可以在
onLoad()
事件中去实现,在onLoad()
生命周期函数中,传入options
选项,获取id
,页面一加载就会执行了,代码示例如下:
// pages/detail/detail.js
const app = getApp()
const header = require("../../components/header/header.js")
const data = Object.assign({
}, header.data, {
address: "",
type: "",
message: "",
contact: ""
})
Page({
// data: {
// // address: "",
// // type: "",
// // message: "",
// // contact: ""
// },
data: data,
// 页面一加载的时候就会获取到相应的详情信息,通过id发起请求,获取到具体的信息
onLoad(options) {
// console.log(options)
this.getDetailInfo(options.id);
},
getDetailInfo(id) {
wx.request({
url: 'https://nuanwan.wekeji.cn/student/index.php/trade/get_item',
data: {
distinct: app.globalData.distinct,
id: id
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: this.getDetailSucc.bind(this)
})
},
getDetailSucc(res) {
const result = res.data.data;
this.setData({
address: result.address,
type: result.type,
message: result.message,
contact: result.contact
})
}
})