目录
一、配置文件
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、require(js的路径);
如何在js中引用外部js,使用require()
方法。
var config = require("./config.js");
这样,直接在代码中可以引用config.js
中使用module.exports
暴露出来的host。
host : config.host
3、如何全局使用此host
在app.js
中引用config.js
,在其他页面可以直接调用
var app = getapp();
//可直接调用
app.host;
二、页面配置
在app.json
中可以配置页面。
1、pages
此项配置下可以配置页面文件在项目结构文件pages中的存放路径。值得注意的是,复制保存一个路径后会自动创建对应的文件夹以及相应的.js、.json、.wxml、.wxss文件。
"pages":[
"pages/index/index",
"pages/logs/logs"
]
2、window
此项配置下配置小程序外侧的框架的样式。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eee",
"navigationBarTitleText": "shopping",
"navigationBarTextStyle":"black"
}
3、tarBar
配置底部 tab 栏的表现。
"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>
PS:不加wx:key
控制台会报warning
3、条件渲染
<view wx:if='{{str=="Hello World"}}'>
if显示
</view>
<view wx:elif='{{str=="Hello"}}'>
elif显示
</view>
<view wx:else>
else显示
</view>
普通的if语句普通地略过。
4、template 模版
就是可以引入的通用模版。
<import src="../template/swiper.wxml"/>
<!-- is指定调用模版的名称 -->
<template is="tmp_swiper"/>
另一个文件中
<!-- template标签包裹的内容是模版内容 -->
<template name="tmp_swiper">
<view>
模版
</view>
</template>
5、swiper 轮播
官方名称:滑块视图容器。咱就叫轮播了吧。
基础演示看官方,这里直接使用swiper结合template。
模版:
<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,//是否采用衔接滑动
}
这里本来想直接把这些设置从业务页面中摘出,写在模版的文件夹中,发现无法生效,就只能写在页面里了,当然也可以配成全局设置,写在另外的地方。