微信开发修改button里的字体大小_微信小程序全栈开发课程【视频版】2.2 index页面完善...

点击观看视频课程 ↓↓↓

微信小程序首页完善https://www.zhihu.com/video/1195308096099282944

课程文字版

1、template 部分

（1）修改template部分的代码

template里面包含html代码，对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中的template部分的代码修改成下面的代码

<template><div><div class="show"><div class="mark-text">当前分数</div><div class="mark">{{mark}}</div></div><div class="row"><div class="right button" @click='addMark(1)'>+ 1</div><div class="left button" @click='addMark(-1)'>- 1</div></div><div class="row"><div class="right button" @click='addMark(5)'>+ 5</div><div class="left button" @click='addMark(-5)'>- 5</div></div></div>
</template>

（2）在<template/>标签下只能有一个子节点元素

html的所有代码必须包含在一个 html 标签中，如果写多个如<div/>这样的标签则会报错，如下所示：

正确示例

<template>
<div><div>//html页面代码</div>
</div>
</template>

错误示例

<template>
<div>//html页面代码
</div>
<div>//html页面代码
</div>
</template>

（3）双大括号{{ }}

<div class="mark">{{mark}}</div>双大括号{{ }}会将数据解释为普通文本，而非 HTML 代码。里面一般包裹的是vue.js的变量或者方法，这些变量、方法要先在script里面定义

（4）点击事件@click

<div class="right button" @click='addMark(1)'>+ 1</div>@click是v-on:click的缩写，是给html标签添加的点击事件，addMark(1)是在script里面的method对象中定义的方法

2、script 部分

（1）修改script部分的代码

script里面包含js代码，对应着原生小程序框架里中的.js文件。我们将index.vue文件中的script部分的代码修改成下面的代码

<script>export default {data () {return {mark: 0}},methods: {addMark (add) {//this.mark = 0 + 1this.mark = this.mark + addconsole.log("mark",this.mark)  }}}
</script>

（2）data对象

data里面定义的是数据，我们在这里定义了mark并赋值为0。在 template中，通过{{mark}}来使用数据。在script的methods对象中，通过this.mark来使用数据

data () {return {mark: 0}
}

data 选项必须是一个函数，不然vue实例之间可能会相互影响。比如，像下面这样定义就是错误的~

data: { mark: 0
}

（3）methods对象

methods对象里面定义的是vue的方法，也可以说是函数。比如，下面代码就表示，我们自定义了一个叫 addMark 的方法函数。add是addMark方法的参数，在template中通过@click调用的addMark(1)就是将add参数作为1，此时mark = 0 + 1 变成了1，console.log语句是可以将结果打印到微信开发者工具中的控制台，我们一般用来测试。

methods: {addMark (add) {//this.mark = 0 + 1this.mark = this.mark + addconsole.log("mark为：",this.mark)  }
}

3、style 部分

script部分比较简单，里面包含css代码，对应着原生小程序框架里中的.wxss文件。就是将template里出现的html元素加一些样式。我们将index.vue文件中的script部分的代码修改成下面的代码。

（1）安装sass插件

我们在style标签中加入lang='scss'，用来支持scss语言的运行环境。如果没有安装sass插件，启动npm run dev会报错，我们先打开终端安装一下scss插件

//打开项目目录
~$ cd WeChatProjects/truth_hold//在项目目录中安装sass插件
~/WeChatProjects/truth_hold$ npm install sass-loader node-sass --save-dev

scss可以看成是css的扩展语言，比css更加简洁灵活。即使你是css零基础，也可以直接学习scss。

（2）添加样式代码

<style lang='scss'>
.show{text-align:center;height:266px;background: #EA5149;margin-bottom:5px;color: #FFFFFF;font-weight:bold;.mark-text{font-size: 20px;padding:28px;}.mark{font-size: 88px;}
}
.row{margin: 40px 56px;.button{width: 70px;height: 70px;line-height:70px;border-radius: 20%;border: none;text-align:center;font-size: 25px;color:#FFFFFF;font-weight:bold;}
}
.right{background:#EA5149;float: right;
}
.left{background:#feb600;margin-right:80px;
}
</style>

Vue官方文档https://cn.vuejs.org/v2/guide/

如果以前没有接触过vue，可能看到vue代码会有点懵，建议花点时间看一下vue 的官方文档，对vue有一个大概的认识，不然下面的学习可能会比较困难。

4、测试效果

先在项目目录中运行npm run dev

~/WeChatProjects/truth_hold$ npm run dev

在微信开发者工具中点击加减按钮，会看到以下效果

5、index.vue代码示例

最后将index.vue文件中的代码贴出来，大家对比一下，自己添加的是否正确

<template><div><div class="show"><div class="mark-text">当前分数</div><div class="mark">{{mark}}</div></div><div class="row"><div class="right button" @click='addMark(1)'>+ 1</div><div class="left button" @click='addMark(-1)'>- 1</div></div><div class="row"><div class="right button" @click='addMark(5)'>+ 5</div><div class="left button" @click='addMark(-5)'>- 5</div></div></div></template>
<script>export default {data () {return {mark: 0}},methods: {addMark (add) {//this.mark = 0 + 1this.mark = this.mark + addconsole.log("mark为：",this.mark)}}}
</script><style lang='scss'>
.show{text-align:center;height:266px;background: #EA5149;margin-bottom:5px;color: #FFFFFF;font-weight:bold;.mark-text{font-size: 20px;padding:28px;}.mark{font-size: 88px;}
}
.row{margin: 40px 56px;.button{width: 70px;height: 70px;line-height:70px;border-radius: 20%;border: none;text-align:center;font-size: 25px;color:#FFFFFF;font-weight:bold;}.right{background:#EA5149;float: right;}.left{background:#feb600;margin-right:80px;}
}
</style>