?點擊觀看視頻課程 ↓↓↓

微信小程序首頁完善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>關注【貓寧一】公眾號回復【課件】領取課程PPT和小程序源碼
B站可以1.5倍加速觀看視頻課程微信小程序實戰開發課程【提供源碼】實際上線項目 mpvue+koa2_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili?www.bilibili.com

總結

以上是生活随笔為你收集整理的微信开发修改button里的字体大小_微信小程序全栈开发课程【视频版】2.2 index页面完善...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。