目录
一、配置文件
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,//是否采用衔接滑动
}
这里本来想直接把这些设置从业务页面中摘出，写在模版的文件夹中，发现无法生效，就只能写在页面里了，当然也可以配成全局设置，写在另外的地方。