微信小程序开发历程 - 02 一些基础语法

一、配置文件

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,//是否采用衔接滑动
}

这里本来想直接把这些设置从业务页面中摘出，写在模版的文件夹中，发现无法生效，就只能写在页面里了，当然也可以配成全局设置，写在另外的地方。