1.WeChatミニプログラムの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"
})
}
- WeChatアプレットクリックイベントのいくつかのメソッドの概要：
- 通常のクリックイベントの場合は、使用できます
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>
- リクエストの開始に関するWeChatアプレットの概要：
- リクエストを開始する場合は、
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)
})
- WeChatアプレットの詳細ページを取得するためのいくつかの方法の要約：
- WeChatアプレットでは、ページをクリックした後に詳細情報を取得したい場合は、
onLoad()イベントで取得できます。onLoad()ライフサイクル関数で、optionsオプションを渡してgetを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
})
}
})