Inhaltsverzeichnis
1. Konfigurationsdatei
1、module.exports = {}
Erstellen Sie eine neue config.js und definieren Sie mit var Variablen zum Speichern der Hintergrundadresse.
var localhost = "http://127.0.0.1:8890"
Verwenden Sie diese Option, um module.exportsdiese Adresse nach außen hin sichtbar zu machen.
//方法一
module.exports = {
host : localhost
}
//方法二
module.exports.host = localhost;
2. require(path of js);
So referenzieren Sie externe JS in JS mit require()der Methode.
var config = require("./config.js");
Auf diese Weise kann der exponierte Host direkt in der Codereferenz config.jsverwendet werden.module.exports
host : config.host
3. So verwenden Sie diesen Host global
app.jsReferenziert in config.js, kann direkt auf anderen Seiten aufgerufen werden
var app = getapp();
//可直接调用
app.host;
2. Seitenkonfiguration
Seiten können in konfiguriert werden app.json.
1、Seiten
Unter dieser Konfiguration können Sie den Speicherpfad der Auslagerungsdatei in den Projektstrukturdateiseiten konfigurieren . Es ist zu beachten, dass nach dem Kopieren und Speichern eines Pfads automatisch der entsprechende Ordner und die entsprechenden .js-, .json-, .wxml- und .wxss-Dateien erstellt werden.
"pages":[
"pages/index/index",
"pages/logs/logs"
]
2、Fenster
Konfigurieren Sie in dieser Konfiguration den Stil des Rahmens außerhalb des Applets.
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eee",
"navigationBarTitleText": "shopping",
"navigationBarTextStyle":"black"
}
3、tarBar
Konfigurieren Sie das Verhalten der unteren Registerkartenleiste.
"tabBar": {
//字体颜色
"color": "#6e6d6b",
//选中后字体颜色
"selectedColor": "#e64340",
"list": [{
//文件路径
"pagePath": "pages/index/index",
//文字
"text": "首页",
//图标
"iconPath" : "images/icon/index.png",
//选中后图标
"selectedIconPath": "images/icon/index-select.png",
}
}
Eine detailliertere Konfiguration finden Sie in der globalen Konfiguration des offiziellen Dokuments des Applets .
Drittens die grundlegende WXML-Syntax
1. Datenbindung
In js binden:
Page({
data: {
str: 'Hello World',
}
})
Verwenden Sie dies in wxml:
<view>{
{
str}}</view>
Verwenden Sie doppelte Klammern, um Referenzen anzuzeigen. Es ist zu beachten, dass diese Bindung einseitig ist. Änderungen in js können an die Seite übertragen werden, direkt auf der Seite geänderte Werte werden jedoch nicht an js übertragen.
2. Listenrendering
Definieren Sie ein Array in js:
Page({
data: {
str: ['Hello','World'],
}
})
Verwenden Sie dies in wxml:
<view wx:for='{
{str}}'>
{
{
index}}{
{
item}}
</view>
{
{index}}: Array-Index anzeigen
{
{item}}: Schleifenobjekt
Indizes und Objektnamen können angegeben werden:
<view wx:for='{
{str}}' wx:for-item='s' wx:for-index='i' wx:key='*this'>
{
{
i}}{
{
s}}
</view>
wx:keyPS: Warnung wird ohne Konsole gemeldet
3. Bedingtes Rendern
<view wx:if='{
{str=="Hello World"}}'>
if显示
</view>
<view wx:elif='{
{str=="Hello"}}'>
elif显示
</view>
<view wx:else>
else显示
</view>
Gewöhnliche if-Anweisungen werden normalerweise übersprungen.
4, Vorlagevorlage
Es handelt sich um eine allgemeine Vorlage, die importiert werden kann.
<import src="../template/swiper.wxml"/>
<!-- is指定调用模版的名称 -->
<template is="tmp_swiper"/>
in einer anderen Datei
<!-- template标签包裹的内容是模版内容 -->
<template name="tmp_swiper">
<view>
模版
</view>
</template>
5. Swiper-Karussell
Offizieller Name: Slider View Container. Nennen wir es Karussell.
Die Basisdemo finden Sie auf der offiziellen Website. Hier wird Swiper direkt in Kombination mit der Vorlage verwendet.
Schablone:
<template name="tmp_swiper">
<view>
<swiper indicator-dots="{
{swiperCon.indicatorDots}}" indicator-color="{
{swiperCon.indicatorColor}}" indicator-active-color="{
{swiperCon.indicatorActiveColor}}"
autoplay="{
{swiperCon.autoplay}}" interval="{
{swiperCon.interval}}" duration="{
{swiperCon.duration}}" >
<block wx:for="{
{swiperCon.imgUrls}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {
{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
</template>
Zitieren:
<import src="../template/swiper.wxml"/>
<template is="tmp_swiper" data="{
{swiperCon}}"/>
js-Konfigurationsvorlageneinstellungen
swiperCon: {
imgUrls: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,//是否显示面板指示点
indicatorColor: "rgba(0, 0, 0, .3)",//指示点颜色
indicatorActiveColor: "#007aff",//当前选中的指示点颜色
autoplay: true,//是否自动切换
interval: 5000,//自动切换时间间隔
duration: 1000,//滑动动画时长
circular: true,//是否采用衔接滑动
}
Hier wollte ich diese Einstellungen ursprünglich direkt von der Geschäftsseite extrahieren und in den Vorlagenordner schreiben, stellte jedoch fest, dass sie nicht wirksam werden konnten, sodass ich sie nur auf die Seite schreiben konnte. Natürlich können sie auch global gemacht werden Einstellungen geändert und an anderer Stelle geschrieben.