微信小程序入门（2）

发表于   |   分类于

今天继续介绍接触到的内容。

新建文件

上次说到了手动新建四种类型文件，然后在app.json里注册。其实小程序提供给我们一种快捷的新建文件的方式——直接在app.json里注册完保存，就能直接生成文件。
优点：快；
缺点：一不小心写错保存后需要删除重建或重命名。

跳转

选项卡页面

当我们需要用到有选项卡的页面时，需要先注册。我先建了三个页面welcome、hello和world。

1
2
3
4
5
6
7
8
9
10
11
12
"tabBar":{
    "list":[
        {
            "pagePath": "pages/hello/hello",
            "text": "Hello页面"
        },
        {
            "pagePath": "pages/world/world",
            "text": "World页面"
        }
    ]
}

与pages注册顺序相似，在list中的第一项是跳转后默认页面。
当我们需要跳转到带有选项卡的页面时，不能使用wx.nagvigateTo()或wx.redirecTo()，而应该使用wx.switchTab()。
在启动页面welcome中添加跳转方法，我的是onSwitchTap，再在welcome.js里添加该方法

1
2
3
4
5
6
7
Page({
  onSwitchTab: function(){
    wx.switchTab({
      url: '../hello/hello'
    })
  }
})

如图

wx.navigateTo()与wx.redirectTo()

这两者的区别是：使用wx.navigateTo()可以返回，
使用wx.redirectTo()不能返回。
我们先建一个测试页面A页面，然后分别测试
使用wx.navigateTo()

使用wx.redirectTo()

很明显可以看到顶部的返回按钮的有无。

数据绑定

因为之前接触过vue.js这种mvvm框架，所以看到数据绑定有种熟悉的感觉。
首先我们在js文件里初始化数据

1
2
3
4
5
Page({
  data:{
    text: "hello 页面"
  }
})

在wxml文件中绑定数据

1
2
3
<view>
    <text>{{text}}</text>
</view>

当我们需要修改数据时，在对应的函数中添加

1
2
3
4
this.setData({
    //相应的数据
    key:value
});

全局变量

我们可以在app.js中添加全局变量

1
2
3
App({
  globalText: 'Global'
})

然后在需要的页面，比如我是hello页面

1
2
3
4
5
6
var app = getApp();
Page({
  data:{
    text: app.globalText
  }
})

当我打开hello页面，就可以看到Global。

模板

最好先建一个文件夹，作为模板的文件夹。该目录下只需要wxml和wxss两种文件。比如我先建一个title文件夹

在wxml文件中

1
2
3
<template name="titleTemplate">
    <text class="title">Title模板</text>
</template>

在wxss文件中

1
2
3
4
5
.title{
    display: block;
    font-weight: bold;
    font-size: 50rpx;
}

假设我在hello中引用该模板,
现在wxml文件中

1
2
3
4
5
<import src="../title/title-template.wxml" />
<view>
    <text>{{text}}</text>
    <template is="titleTemplate" />
</view>

再在wxss文件中

1
@import "../title/title-template.wxss";

效果

总结：

  1. 先创建模板文件，需要wxml文件和wxss文件

  2. 在模板wxml文件中使用

    1
    <template name="模板名"></template>

  3. 在需要引用模板的文件中使用

    1
    <import src="模板路径" />

    注意最后要有 /
    引用完使用

    1
    <template is="模板名" />

  4. 同理wxss文件也要引用

    1
    @import "模板样式路径";

组件

到目前为止，我用过的组件有

1
view,scroll-view,swiper,icon,text,button,input,image

还有很多组件没接触到，之后细看。