第三章 开发第一个小程序

3.2.4 使用text文本组件

在首页的“单选投票”文字时包含在class为btn的view组件中的，想修改文字样式，对btn添加样式设置。

当view组件中有多段文字时，只修改其中一段文字，就在这段文字的外面添加一个组件如text组件，对该组件的添加个性化组件。

index.wxml:

<view class="btn">

  <image class="btn-img" src="/imgs/btn-img1.png" mode="widthFix"></image>

  单选投票

  <text class="btn-desc">创建一个单选投票</text>

</view>

index.wxss:

.btn-desc {

  font-size: 10pt;

  margin-left: 25rpx;

}

效果如图：

3.3开发创建投票页面

3.3.1 创建小程序的第二个页面

创建单选投票页面，需在app.json中的pages属性声明第二个页面，如下：

{

  "pages":[

    "pages/index/index",

    "pages/createVote/createVote"

        ]

}

ctrl+s保存后，微信开发工具会自动创建这个文件的四个文件:

修改createVote.json文件设置页面标题为“创建单选投票”：

{

  "navigationBarTitleText": "创建单选投票"

}

小程序两个页面不能跳转，在/pages/index/index.js增加一个跳转函数onTapCreateRadioVote:

Page({onLoad(){},onTapCreateRadioVote(){    wx.navigateTo({url:'/pages/createVote/createVote'})  }})

在 /pages/index/index.wxml将跳转函数绑定到“单选投票”按钮上

<view class="btn" bind:tap="onTapCreateRadioVote">

  <image class="btn-img" src="/imgs/btn-img1.png" mode="widthFix"></image>

  单选投票

  <text class="btn-desc">创建一个单选投票</text>

</view>

(之前用bindTap没生效，用bind:tap生效了，开心!)

单击首页的“单选投票”按钮，成功跳转到单选投票页面，效果如图：