Оглавление
1. Файл конфигурации
1、module.exports = {}
Создайте новый config.js и используйте var для определения переменных для хранения фонового адреса.
var localhost = "http://127.0.0.1:8890"
Используйте, чтобы module.exportsвыставить этот адрес наружу.
//方法一
module.exports = {
host : localhost
}
//方法二
module.exports.host = localhost;
2. требуется (путь js);
Как ссылаться на внешние js в js, используйте require()метод.
var config = require("./config.js");
Таким образом, открытый хост можно config.jsиспользовать непосредственно в ссылке на код.module.exports
host : config.host
3. Как использовать этот хост глобально
app.jsУпоминается в config.js, может быть вызван непосредственно на других страницах
var app = getapp();
//可直接调用
app.host;
2. Конфигурация страницы
Страницы можно настроить в формате app.json.
1, страницы
В этой конфигурации вы можете настроить путь хранения файла подкачки в файле структуры проекта pages . Стоит отметить, что после копирования и сохранения пути будет автоматически создана соответствующая папка и соответствующие файлы .js, .json, .wxml и .wxss.
"pages":[
"pages/index/index",
"pages/logs/logs"
]
2, окно
В этой конфигурации настройте стиль рамки вне апплета.
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eee",
"navigationBarTitleText": "shopping",
"navigationBarTextStyle":"black"
}
3、tarBar
Настройте поведение нижней панели вкладок.
"tabBar": {
//字体颜色
"color": "#6e6d6b",
//选中后字体颜色
"selectedColor": "#e64340",
"list": [{
//文件路径
"pagePath": "pages/index/index",
//文字
"text": "首页",
//图标
"iconPath" : "images/icon/index.png",
//选中后图标
"selectedIconPath": "images/icon/index-select.png",
}
}
Для более подробной настройки обратитесь к глобальной конфигурации официального документа апплета .
Три, базовый синтаксис WXML
1. Привязка данных
Связать в js:
Page({
data: {
str: 'Hello World',
}
})
Используйте это в wxml:
<view>{
{
str}}</view>
Используйте двойные скобки для обозначения ссылок. Следует отметить, что эта привязка является односторонней. Модификации в js могут быть переданы на страницу, но значения, измененные непосредственно на странице, не будут переданы в js.
2. Рендеринг списка
Определить массив в js:
Page({
data: {
str: ['Hello','World'],
}
})
Используйте это в wxml:
<view wx:for='{
{str}}'>
{
{
index}}{
{
item}}
</view>
{
{index}}: нижний индекс отображаемого массива
{
{item}}: объект цикла
Можно указать индексы и имена объектов:
<view wx:for='{
{str}}' wx:for-item='s' wx:for-index='i' wx:key='*this'>
{
{
i}}{
{
s}}
</view>
wx:keyPS: предупреждение будет сообщено без консоли
3. Условный рендеринг
<view wx:if='{
{str=="Hello World"}}'>
if显示
</view>
<view wx:elif='{
{str=="Hello"}}'>
elif显示
</view>
<view wx:else>
else显示
</view>
Обычные операторы if обычно пропускаются.
4, шаблон шаблона
Это общий шаблон, который можно импортировать.
<import src="../template/swiper.wxml"/>
<!-- is指定调用模版的名称 -->
<template is="tmp_swiper"/>
в другом файле
<!-- template标签包裹的内容是模版内容 -->
<template name="tmp_swiper">
<view>
模版
</view>
</template>
5. Карусель Swiper
Официальное название: Slider View Container. Назовем это каруселью.
Посмотрите официальную базовую демонстрацию, здесь напрямую используйте swiper в сочетании с шаблоном.
трафарет:
<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>
Цитировать:
<import src="../template/swiper.wxml"/>
<template is="tmp_swiper" data="{
{swiperCon}}"/>
настройки шаблона конфигурации js
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,//是否采用衔接滑动
}
Вот я изначально хотел вытащить эти настройки прямо из бизнес-страницы и прописать их в папку шаблона, но обнаружил, что они не могут вступить в силу, поэтому я мог только прописать их на странице.Конечно, их можно сделать и в глобальные настройки и написано в другом месте.